基于jQuery下拉选择框插件支持单选多选

               

由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了jQuery与jqgrid以及easyui,先贴出主要代码

/** *下拉框插件-chooseList *调用插件的方式以及格式: * 1.首先你需要创建一个div面板,给div定义ID * 2.在你所需要的地方调用插件: * 参数说明: * $("#divID").chooseList({ *  query_url :加载下拉框数据的URL,指定你所写编写的controller地址,如果URL为空则使用插件提供的默认URL *  divID:divID *  sidx:排序字段,默认罪犯编号 *  sord:排序类型,默认desc *  postData:  postData: {
    filters:JSON.stringify(filters)} 自定义查询条件 *  filters的格式如下 *   var rules = [];     rules.push({"field":"gydwName","op":"cn","data":"xxxx"});     var filters = {"groupOp":"AND","rules":rules};     isMultiselect:是否多选,默认单选false *     *    }) * * */(function ($) {    $.fn.extend({     chooseList: function (options) {        //产生随机数        var random =Math.floor(Math.random()*100000+1);        /**         * 自定义参数,需要使用其中的属性直接:customparams.属性名         */        var customparams = {            resultObj : {},//存储单选选择的后的数据,返回给外界调用者使用            resultListObj : new map(),//存储多选选择的后的数据,返回给外界调用者使用            currentTag : this,//当前标签对象            formID: "form_"+random,            chooseID : "sel"+"_"+random,//下拉选择框的ID            gridID :"grid"+"_"+random,//dataGrid的ID            pager : "pager"+"_"+random,//分页ID            countRow :0//计数行号,默认为0                };        /**         * 参数和默认值         */           var defaults = {          _search:"false",          //如果未传入url,则使用默认的url进行查询          query_url :contextPath + "/chooseCriminal",          sidx:"bh",//排序字段,默认根据罪犯的编号bh          sord: "desc",//排序类型:升序,降序 ,默认降序          isMultiselect:false,//是否多选,默认单选                     };           /**            * 装载默然参数和传人的参数对象            */           var options = $.extend(defaults, options);                       /**            * 解析载入参数            * @param query_url 请求的地址            * @param  flag 标识是第一次加载表格还是模糊查询加载表格数据            */           var bindParams = function(query_url){            var params="";//存储解析的参数            for(var attr in options){             var key = attr;             var value = options[attr];             if(value != "" && !(value instanceof Object)&key!="query_url"&&key!="divID"&&key!=false){              params+=key+"="+value+"&"             }else if(value instanceof Object){              params+=$.param(value)+"&"              }else if(key=="_search"&&value==false){              params+=key+"=false&";             }            }            var finalParams =query_url+"?"+params.substring(0,params.length-1);            return finalParams;              };                     /**           * 绑定选择罪犯combogrid           */          var renderComboGrid  = function(){             $("#"+customparams.chooseID).combogrid({             panelWidth: 500,            idField: 'bh',//id            textField: 'xm',//input显示值               pagination : true,//是否分页                pageSize: 10,//每页显示的记录条数,默认为10                   rownumbers:true,//序号            url: bindParams(options.query_url),            method: 'get',            fitColumns: true,            columns: [[             {
   field:'xm',title:'姓名',width:80},             {
   field:'bh',title:'编号',width:120},            {
   field:'gydwName',title:'单位',width:80},                         ]],        keyHandler:{                query:function(keyword){
   //动态搜索                  var value =keyword;                  //装载动态输入参数                  if(options.postData!=null&&options.postData!=undefined){                   var oldRules  =  JSON.parse(options.postData.filters);                      var newRules =[                                    {
   "field":"xm","op":"cn","data
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值