tp5中下拉框查询

  • 搜索功能比较常用,需要写一个select下拉框,后台查询数据,在页面循环出来.想起刚入行时写这个头大的狠,最近又遇到,就记录一下.
    在这里插入图片描述

  • 首先是页面部分,我拿页面上的冻结原因与90日回款说明
    1.先从后台获取数据源发送到页面,我这里都放在了自定义参数中,直接调用
    在这里插入图片描述
    2.没有引入自定义参数的可以在控制器中自定义个数组,下面的样子

    $frozenReason = ['0' => '全部', '1' => '售假', '2' => '违规'];
    $this->assign('frozenReason', $frozenReason);//tp中的模板渲染
    

在这里插入图片描述

  • 拿到后台传过来的下拉框数据,在select中循环展示,value中的$key是数据的值,后面的vo是对应值得文字.中间的判断是为了在查询之后仍然保留查询项,不需要保留查询项的删掉判断即可.查询的提交就不展示了,get,post都行.
  • 接下来是后台查询部分.进行了多次拆分,不好完整截图,就看代码片段吧

在控制器中获取到传过来的查询参数,传入逻辑处理层.
在这里插入图片描述
验证参数,放入where[];写好where条件之后,写过查询,将结果传到页面就行

.

### 实现Layui与ThinkPHP5的三级联动功能 #### 后端逻辑设置 为了实现三级联动,在后端需要准备相应的接口来提供各级联的数据。具体来说: 在控制器中定义`getPid`方法用于获取子级数据,通过传入父级ID(`$pid`)参数返回对应的子类列表,并以JSON格式响应给前端[^2]。 ```php // ThinkPHP 控制器中的方法 public function getPid($pid){ $data = \app\admin\model\Category::where('pid', $pid)->select(); return json(['code'=>0, 'msg'=>'查询成功', 'data'=>$data]); } ``` 同时,在添加或编辑页面加载时初始化顶级分类信息并传递至视图层显示出来供用户选择。 #### 前端HTML结构构建 对于前端部分,则是在模板文件内编写好基础的选择标签,这些标签将作为触发事件的基础元素。通常情况下会先展示最上级别的选项卡,而其他级别的则等待用户交互后再动态生成其内部项[^1]。 ```html <!-- HTML代码片段 --> <select id="province" lay-filter="province"></select> <select id="city" disabled></select> <select id="district" disabled></select> ``` #### JavaScript事件监听与AJAX请求处理 利用Layui架提供的API可以很方便地完成异步通信以及DOM操作的任务。下面这段JavaScript脚本展示了如何绑定change事件到各个级别上,并向服务器发起Ajax请求取得相应等级下的所有条目;最后再根据接收到的结果更新下一个关联控件的内容[^3]。 ```javascript layui.use(['form'], function(){ var form = layui.form; // 初始化省份下拉 $.getJSON('/path/to/getPid?pid=0', function(res){ if (res.code === 0) { let options = res.data.map(item => `<option value="${item.id}">${item.name}</option>`).join(''); $('#province').html('<option value="">请选择</option>' + options); form.render('select'); } }); // 省份变化时填充城市 form.on('select(province)', function(data){ const pid = data.value; if (!pid) {$('#city,#district').empty().prop('disabled', true);return;} $.getJSON(`/path/to/getPid?pid=${pid}`, function(res){ if (res.code === 0) { let cityOptions = res.data.map(item => `<option value="${item.id}">${item.name}</option>`).join(''); $('#city').html('<option value="">请选择</option>' + cityOptions).removeAttr('disabled'); $('#district').empty().prop('disabled', true); form.render('select'); } }); }); // 城市变化时填充区县 $(document).on('change','#city',function(){ const cid = this.value; if(!cid){$('#district').empty().prop('disabled',true);return;} $.getJSON(`/path/to/getPid?pid=${cid}`, function(res){ if (res.code===0){ let districtOptions=res.data.map(item=>`<option value="${item.id}">${item.name}</option>`).join(''); $('#district').html('<option value="">请选择</option>'+districtOptions).removeAttr('disabled'); form.render('select'); } }) }); }); ``` 上述代码实现了基于Layui和ThinkPHP5平台上的地区三级联动效果,其中包含了前后端之间的协作流程说明[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值