由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了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