由于最近项目的需求,需要做一个下拉选择框的插件,支持单选显示表单数据,多选显示表格数据,该插件主要运用了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 标识是第一次加载表格还是模糊查询加载表格数据










