基于jQuery下拉选择框插件支持单选多选功能代码

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

下面给大家展示下效果图,如果大家感觉还不错,请参考实现代码

多选:呈现列表

具体代码如下所示:

= 10 ? DateIn .getMonth() + 1 : '0' + (DateIn.getMonth() + 1)) + '-' + (DateIn.getDate() >= 10 ? DateIn.getDate() : '0' + (DateIn.getDate())); }; /** * 自定义map */ function map () { this.elements = new Array(); //得到map的大小 this.size = function() { return this.elements.length; } //判断是否为空 this.isEmpty = function() { return (this.elements.length < 1); } //清空 this.clear = function() { this.elements = new Array(); } //放进map一个对象 this.put = function(_key,_value) { this.elements.push( { key : _key,value : _value }); } //根据键去除一个对象 this.remove = function(_key) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key && typeof this.elements[i].key == typeof _key) { this.elements.splice(i,1); return true; } } } catch (e) { bln = false; } return bln; } //根据键得到一个对象 this.get = function(_key) { try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key && typeof this.elements[i].key == typeof _key) { return this.elements[i].value; } } } catch (e) { return null; } } //返回指定索引的一个对象 this.element = function(_index) { if (_index < 0 || _index >= this.elements.length) { return null; } return this.elements[_index]; } //是否包含键 this.containsKey = function(_key) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].key == _key && typeof this.elements[i].key == typeof _key) { bln = true; } } } catch (e) { bln = false; } return bln; } //是否包含值 this.containsValue = function(_value) { var bln = false; try { for (i = 0; i < this.elements.length; i++) { if (this.elements[i].value == _value && typeof this.elements[i].value == typeof _value) { bln = true; } } } catch (e) { bln = false; } return bln; } //得到所有的值 this.values = function() { var arr = new Array(); for (i = 0; i < this.elements.length; i++) { arr.push(this.elements[i].value); } return arr; } //得到所有的键 this.keys = function() { var arr = new Array(); for (i = 0; i < this.elements.length; i++) { arr.push(this.elements[i].key); } return arr; } }; /** * 渲染panel视图 */ var renderPanelView = function(){ var html = ""; html+="请选择:@H_403_26@"; html+="
"; html+="403_26@"; gridhtml+="
"; gridhtml+=""; gridhtml+=""; $(customparams.currentTag).append(gridhtml); renderComboGrid(); initDataGrid(); }; /** * 加载dataGrid表格数据 */ var initDataGrid =function (){ $("#"+customparams.gridID).jqGrid({ datatype : 'local',autowidth: true,height:300,colNames: ["姓名","编号","单位","操作"],colModel: [ { name: "xm",index:"xm",align:"center",width:50,sortable: true},{ name: "bh",index:"bh",{ name: "gydwName",index:"gydwName",{ name: "customColumn",formatter:function(cellvalue,options,rowObject){ var obj = "{bh:" + "\"" + rowObject.bh + "\"" + ",rowId:" + "\"" + options.rowId + "\"" + "}"; var columnTemplate = "删除" return columnTemplate; },search:false,sortable: false} ],sortname: "bh",sortorder: "desc",rownumbers:true,//添加左侧行号 viewrecords: true,gridview: true,autoencode: true,caption: "罪犯信息列表",gridComplete: function(){ binCompleteEvent(); } }); }; /** * 给表格绑定加载完的事件 */ var binCompleteEvent =function(){ //给操作栏绑定点击事件 $(".innerDelBtn").click(function(e){ var obj = eval("(" + $(e.target).attr("name") + ")"); deleteRow(obj.bh,obj.rowId); }); //选中行鼠标变为手型 var ids=$("#"+customparams.gridID).jqGrid('getDataIDs'); for(var i = 0; i < ids.length ; i ++){ var id = ids[i]; $("#"+id).attr("style","cursor:pointer"); } } /*******************渲染dtaGrid部分结束*********************/ /** * 根据类型渲染视图 */ var renderView = function(){ //根据isMultiselect判断那种渲染视图 options.isMultiselect==true?renderGrid():renderPanelView(); }; /*** * 初始化入口 */ renderView(); //使用三元表达式判断返回的应是单个对象还是多个对象 return options.isMultiselect==false?customparams.resultObj:customparams.resultListObj; } }); })(jQuery);

以上所述是小编给大家介绍的基于jQuery下拉选择框插件支持单选多选功能代码的相关内容,希望对大家有所帮助!

相关文章

jQuery插件的种类 1、封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进...
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。 入门 编写一个jQuery插件开始于给...
最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js。 兼容性如图: ht...
一、什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作。其中,既有异...
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一...