A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 梦缠绕的时候 黑马粉丝团   /  2018-8-24 11:26  /  833 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

最简单的下拉插件开始,经过两天业余时间的奋斗终于完成了。功能齐全,能满足大部分需求,还支持模糊匹配,废话不多说了,接下来讲下这个插件的用法。

如果有用过easyui 或者 ext 你会发现其实他们的用法很相似的,配置项参数也基本相同。

1.依赖文件引入其实整个插件就用了bootstrap的 form-control样式,很多样式都只是空的,预留着,比较简短的样式都直接放在元素上了,如果您不想跟bootstrap一起使用,
可以自己去定义样式,只要在源码中把form-control换成你自己定义的样式就可以,见下图(那个bootstrap-select,目前是空的,预留使用,可以去掉)



需要引入的文件 jquery.min.js、bootstrap.min.css、bootstrap.min.js还有一个就是该插件。

下载地址:http://download.csdn.net/detail/lzxadsl/9164287 点击打开链接
到时如果下拉框那个倒三角小图标没加载成功,见下图看你图片位置是否对,新版本已经不使用图片了,最底下有下载地址。


2.创建下拉框HTML标签可以是input也可以是select,平时我都比较习惯用input


JS创建方法


  • $('#order_status1').bootstrapSelect({



  •         url:'user/getUser.htm',



  •         //data:[{user_id:1,username:'lzx'},{user_id:2,username:'lsl'}],



  •         valueField:'user_id',



  •         textField:'username',



  •         emptyText:'',



  •         enabled:true,



  •         //multiple:true,开启多选



  •         formatter:function(rec){



  •                 rec['username'] = rec.username+'_';//格式化选择项



  •                 return rec;



  •         },



  •         unSelect:function(val,rec){



  •                 console.log($('#order_status1').bootstrapSelect('getValue'));



  •         },



  •         onSelect:function(val,rec){



  •                 console.log('comb2:'+$('#order_status2').bootstrapSelect('getValue'));//获取选中值



  •                 console.log($('#order_status1').bootstrapSelect('getValue'));



  •                 $('#order_status2').bootstrapSelect('setValue','2');



  •         },



  •         onBeforeLoad:function(params){



  •                 params['username'] = 'lzx';//加载前改变参数username的值



  •         }



  • });


下拉项加载优先级,url > data > option option节点是使用select标签时的下拉项option

3.插件参数说明3.1配置项可根据自己的需要配置相应的参数。


  •          /**



  •          * 定义默认配置信息



  •          * data:格式{data:[{title:null,result:{}},{title:null,result:{}}]}



  •          * url和data参数只有一个生效,url优先



  •          * 如果有option选项,则它的优先级低于data



  •          */



  •         $.fn.bootstrapSelect.defaults = {



  •                         url    : null, //请求路径



  •                         params : {},   //请求参数



  •                         paramsType : '',//参数默认是以表单形势传递,为json时是以json格式传递到后台



  •                         data   : [],   //数据[{key:value},{key:value}]



  •                 method : 'get',//请求方法



  •                 textField  : 'text',//显示文本字段



  •                 valueField : 'id',//隐藏文本字段



  •                 relationId : null,//级联id



  •                 emptyText  : null,//空选项文本,该属性为null或undefined时不创建空选项,默认不创建



  •                 emptyValue : '',//空选项值



  •                 separator  : ',',//多选时返回值的分割符



  •                 editable         : true,//是否可编辑



  •                 multiple : false,//多选



  •                 disabled : false,//禁用



  •                 downBorder : false,//下拉按钮是否带边框



  •                 cls:'',//自定义样式,多个样式用逗号隔开 class1,class2



  •                 formatter:function(rec){},//格式化节点       



  •                 onSelect : function(val,rec){},



  •                 unSelect : function(val,rec){},//反选



  •                 onBeforeLoad: function(param){},//param 请求参数



  •                         onLoadSuccess: function(data){},//data加载成功后返回的数据



  •                         onLoadError: function(){}



  •         };





3.2方法说明:


  • //获取下拉框选中值



  •                 $('#order_status1').bootstrapSelect('getValue')







  •                 //获取下拉框选中文本



  •                 $('#order_status1').bootstrapSelect('getText')







  •                 //设置选中,如果是多选 value 格式:2,3,4



  •                 $('#order_status1').bootstrapSelect('setValue','1');



  •                 $('#order_status1').bootstrapSelect('setValue','1,2,3');多选时设置选中







  •                 //获取所有下拉节点的数据集,返回值是数组类型



  •                 $('#order_status1').bootstrapSelect('getData');







  •                 //重新加载,可重定向url和params



  •                 $('#order_status1').bootstrapSelect('reload');



  •                 //带参数



  •                 $('#order_status1').bootstrapSelect('reload',{



  •                         params:{id:'lzx'}



  •                 });



  •                 //重置url



  •                 $('#order_status1').bootstrapSelect('reload',{



  •                         url:'test/test.htm',



  •                         params:{id:'lzx'}



  •                 });











  •                 //刷新



  •                 $('#order_status1').bootstrapSelect('refresh');



  •                 //清空下拉节点



  •                 $('#order_status1').bootstrapSelect('clear');



  •                 //隐藏下拉框



  •                 $('#order_status1').bootstrapSelect('hide');



  •                 // 显示下拉框



  •                 $('#order_status1').bootstrapSelect('show');



  •                 //根据id获取文本值



  •                 $('#order_status1').bootstrapSelect('getTextForVal',2);



  •                 //销毁



  •                 $('#order_status1').bootstrapSelect('destroy');





<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">默认下拉框如下图:</span>


设置downBorder:true,样式就变成下图所示

最新版下载地址:http://download.csdn.net/detail/lzxadsl/9194009
内含:可编辑表格控件、日期控件、下拉控件,可编辑表格的使用请参见下一篇


3 个回复

倒序浏览
提示: 作者被禁止或删除 内容自动屏蔽
来自宇宙超级黑马专属安卓客户端来自宇宙超级黑马专属安卓客户端
回复 使用道具 举报
回复 使用道具 举报
奈斯,加油加油
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马