多级联动下拉菜单插件:jquery.cxselect.js
来源:互联网 发布:销售数据统计分析 编辑:程序博客网 时间:2024/06/01 07:50
话说这个插件,我也用了挺久了,但一直对其具体的作用不是很懂,只知道可以利用 ajax来请求数据,实现类似于多级联动的效果。后来百度了下,在此做个总结吧。
下面是以一名php程序员的角度来分析的。。。可能和前端同学分析的角度不大一样,见谅。
一、jquery.cxselect.js
(1)定义:cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市、商品分类等联动菜单。 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式。
(2)我们这里主要用到data 参数
在父元素上的 data- 属性
data-url 列表数据文件路径(此处只能设置路径,自定义需要在参数中设置)
data-nodata 子集无数据时 select 的状态。
data-required 是否为必选。
data-first-title 所有下拉框的第一个项目的标题
data-first-value 所有下拉框的第一个项目的值
例如:
data-url="{{url('/goods/get_type')}}
二、使用方法:
1、引入jquery和jquery.cxselect.js文件,这个大家都懂
2、项目中的应用:
<div class="control-group"> <label class="control-label" for="focusedInput">绑定设备类</label><div class="controls"> <fieldset id="goods_select"> <select class="g_type" name="g_type" id="g_type" data-url="{{url('/goods/get_type')}}"></select> <select class="goods_info_id" name="goods_info_id" id="goods_info_id" data-url="{{url('/goods/get_id')}}" data-json-name="name" data-json-value="value"></select> </fieldset> </div> </div>
这个代码有点长。。
(1)这里用的是select选项框。
(2)name和id要保持一致,也是我们需要用到的参数。
(3)data-url:由于楼主用的是laravel,所有直接写的路由名称,相当于请求服务器,查询想要的结果,然后以Json的形式返回。这里也可以写成:data-url=”cityData.min.js”格式的。
(4)data-json-name对应的是name和value,和下面的js代码对应。
3、在页面结尾要有调用一下该方法:
<script> $("#goods_select").cxSelect({ selects : ["g_type", "goods_info_id"], jsonName: 'name', jsonValue: 'value' });</script></body></html>
(1)利用id选择器,声明要请求服务器的id名称,进行ajax的请求时需要的参数
(2)json的格式规范
4、date-url对应的服务器端的代码
/* * 获取某一设备分类下的相关设备 * @param type * @param goods_info_id * @param title * */ public function get_id(Request $request) { $g_type = $request->input('g_type'); $goods = DB::table('goods_info')->where('type','=',$g_type)->get(); foreach($goods as $v) { $ret[] = [ "name" => $v->title, "value" => $v->id, ]; }return response(json_encode($ret, JSON_UNESCAPED_UNICODE)); }
(1)获取传过来的关键参数
(2)进行数据库查询
(3)将查询结果进行json的格式化,返回回去
5、效果图
如图所示:这是还没选的时候
如图所示:这是选择之后的
总结:这款插件,我觉得很适合各位后端的朋友,有时候自己写联动挺麻烦的,这个插件简单方便,而且还灵活。你需要什么数据,自己请求获取就好,不会限于什么省,市,县等三级联动,那都是毛毛雨。咱们这个插件理论山是可以实现所有联动需求的。大赞。
PS:我截的图比较丑,还是可以很美观的,这个得需要填其他参数,在这儿就不列出了,匿了。
谢谢,end
- 多级联动下拉菜单插件:jquery.cxselect.js
- jQuery cxSelect 多级联动下拉菜单
- jQuery cxSelect 多级联动下拉菜单
- jQuery cxSelect 多级联动下拉菜单
- JQuery cxSelect联动下拉菜单
- jQuery cxSelect 联动下拉菜单 城市联动
- select下拉联动 (Bootstrap、JQuery插件之cxselect)
- Laravel应用简单好用的多级联动插件cxSelect
- cxselect联动下拉菜单 所需数据格式封住
- Bootstrap 下拉菜单多级联动
- 多级下拉菜单插件
- js自定义多级联动下拉菜单,实用方便
- Jquery Chained Selects Plugin 多级联动下拉框插件
- Jquery联动下拉菜单
- 原声js多级联动菜单
- EXCEL如何实现多级联动下拉菜单
- jquery 实现多级下拉菜单
- js源码--多级下拉菜单
- 进程间通信---消息队列
- 输出200以内所有素数(质数),5个一换行
- 【转】数据库事务的四大特性以及事务的隔离级别
- Tensorflow基础:多线程输入数据处理框架
- 设计模式
- 多级联动下拉菜单插件:jquery.cxselect.js
- 加计时器的网络获取工具类
- 救灾新战士:这位机器人更像人还能应对各种场景 | 聚焦
- 详解谷歌硬件新生态:助手论英雄 成败在此一举 | 精选
- 量子计算机将改变一切,而且比你预想的要更早 | 观点
- 汤晓鸥教授:人工智能让天下没有难吹的牛! | 行业
- 对话Douglas Hofstadter:别被当下的人工智能假象骗了 | 精选
- 指针及二级指针的简单总结
- XML_解析