针对EasyUI的checkbox进行扩展

我们知道，现目前最新版EasyUI新增了组件checkbox，但是官方提供的方法太少了，比如不能直接通过传入数据直接初始化checkbox（比如想datagrid那样，直接传入一个数组就可以初始化表格）、没有加载成功回调函数、不能通过js给复选框设置自定义属性等，针对这一情况，特别的对checkbox进行扩展封装，具体封装的代码如下所示（有相关的注释说明）：

(function ($) {$.fn.extend({checkboxExt: function (options) {//默认参数var defaluts = {labelField: 'name',//绑定显示文本的字段Key（data对象中必须存在此Key）valueField: 'id',  //绑定值的字段Key（data对象中必须存在此Key）checkedValue: [],  //选中值的集合data: [],          /*初始化数据，说明：在数据中可以增加自定义属性，自定义属性的key为attrName，属性的value为attrVal（此情况是针对设置单个属性的）针对设置多个属性的情况，直接增加属性attrs即可，格式如attrs:[{name:'attr1',val:'1'},{name:'attr2',val:'2'}]*/labelPosition: 'after',onChangeExt: null, /*onChange扩展事件，返回选中对象和options其中选中对象格式如：{ curChked: 当前复选框是否被选中, curVal: 当前复选框的值, curObj: 当前复选框对象, vals: 所有勾选中复选框的值集合, objs: 所有复选框对象属性 }其中的objs格式如：{name: 复选框显示的文本, checked: 复选框是否被选中, value: 复选框的值, obj: 复选框对象}*/onLoadSuccess: null/*加载成功事件，返回选中对象和options其中的选中对象格式如{ vals: 所有勾选中复选框的值集合, objs: 所有复选框对象属性 }其中的objs格式如：{name: 复选框显示的文本, checked: 复选框是否被选中, value: 复选框的值, obj: 复选框对象}*/};var opts = $.extend({}, defaluts, options);this.each(function (index, ele) {if (opts.data && opts.data.length > 0) {var allChkHtml = '';//检查当前复选框是否为勾选中状态var getIsChked = function (curVal) {var isChked = false;if (opts.checkedValue && opts.checkedValue.length > 0) {for (var i = 0; i < opts.checkedValue.length; i++) {if (opts.checkedValue[i] == curVal) {isChked = true;break;}}}return isChked;};for (var i = 0; i < opts.data.length; i++) {//获取自定义属性var chkCusAttr = opts.data[i].attrName != undefined && opts.data[i].attrName.length > 0 && opts.data[i].attrVal != undefined && opts.data[i].attrVal.length > 0 ? ' ' + opts.data[i].attrName + '="' + opts.data[i].attrVal + '" ' : '';//获取多个自定义属性的情况if (opts.data[i].attrs && opts.data[i].attrs.length > 0) {for (var j = 0; j < opts.data[i].attrs.length; j++) {if (opts.data[i].attrs[j].name != undefined && opts.data[i].attrs[j].name.length > 0 && opts.data[i].attrs[j].val != undefined && opts.data[i].attrs[j].val.length > 0) {chkCusAttr += ' ' + opts.data[i].attrs[j].name + '="' + opts.data[i].attrs[j].val + '" ';}}}//获取是否勾选中var chkOptsChecked = getIsChked(opts.data[i][opts.valueField]) ? 'true' : 'false';//设置onChange事件var chkOptsChg = opts.onChangeExt && opts.onChangeExt.length > 0 ? ',onChange:' + opts.onChangeExt : '';//设置data-options属性var chkOpts = 'data-options="label:\'' + opts.data[i][opts.labelField]+ '\',labelPosition:\'' + opts.labelPosition+ '\',value:\'' + opts.data[i][opts.valueField]+ '\',checked:' + chkOptsChecked+ chkOptsChg + '"';allChkHtml += '<input class="easyui-checkbox checkbox-ext" name="checkboxName" ' + chkOpts + '' + chkCusAttr + '>';}$(this).html(allChkHtml);var chkObjs = $(this).find('.checkbox-ext');//初始化checkboxchkObjs.checkbox();//获取勾选中的值集合和所有对象var getChkObjs = function () {var retValArr = [],retObjArr = [];chkObjs.each(function (index, thisChkObj) {if ($(thisChkObj).next().find('.checkbox-checked').next().length > 0) {retValArr.push($(thisChkObj).val());}retObjArr.push({name: $(thisChkObj).checkbox('options').label,checked: $(thisChkObj).next().find('.checkbox-checked').length > 0,value: $(thisChkObj).val(),obj: thisChkObj});});return [retValArr, retObjArr];};chkObjs.checkbox({onChange: function (thisIsChked) {var curChkObjs = getChkObjs();opts.onChangeExt({ curChked: thisIsChked, curVal: $(this).val(), curObj: this, vals: curChkObjs[0], objs: curChkObjs[1] }, opts);}});if (opts.onLoadSuccess && typeof opts.onLoadSuccess == 'function') {var curChkObjs = getChkObjs();opts.onLoadSuccess({ vals: curChkObjs[0], objs: curChkObjs[1] }, opts);}}});}});
})(jQuery);

调用示例：

        Html代码：<div id="panelMain"></div>JS代码：var chkData = {labelField: 'name',valueField: 'id',checkedValue: [1, 2],data: [{ id: 1, name: '成都', attrName: 'data-id', attrVal: '1', attrs: [{ name: 'data-attr1', val: '111' }, { name: 'data-attr2', val: '222' }] },{ id: 2, name: '德阳', attrName: 'data-name', attrVal: '2' },{ id: 3, name: '绵阳', attrs: [{ name: 'data-attr3', val: '333' }, { name: 'data-attr4', val: '444' }] }],onChangeExt: function (obj, options) {console.log(obj)},onLoadSuccess: function (obj, options) {console.log(obj)}};$('#panelMain').checkboxExt(chkData);

运行效果：

针对EasyUI的checkbox进行扩展相关推荐

easyUI 添加CheckBox选择到DataGrid
@author YHC 这个教程向你展示如何放置一个checkbox 列到datagrid,这个复选框用户将可以选择选中/取消选中 datagrid行数据. 查看 Demo 添加一个checkbox ...
easyui中checkbox全选全不选的时不处理最后一行的实现
有这样一个需求, easyui加载datagrid后, 最后一行为统计行, 在进行全选全不选的时候会将统计行也一并选择, 这跟业务不相符, 琢磨了半天后终于找到了解决方案 1.首先记录下统计功能的实现 ...
jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
easyui datagrid checkbox的相关属性整理
DataGrid其中与选择,勾选相关DataGrid属性: singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...
针对 easyui boolean 布尔值的处理
1.html代码 <select class="easyui-combobox" data-options="editable:false,panelHeight: ...
easyUI表单验证扩展
插件EasyuiEValidate.js代码内容: $.extend($.fn.validatebox.defaults.rules, { CHS: { validator: function (va ...
easyUI 1.3 中文 API
@author YHC CSDN讨论组:https://code.csdn.net/groups/16406 期待你的加入. 以下是easyUI1.3版本的中文API 以下如果有写错误的地方或者是用词 ...
适用于Android的OpenSL ES指南-OpenSL ES的Android扩展
翻译自Android Extensions 针对Android的OpenSL ES扩展了参考OpenSL ES规范,使其与Android兼容,并利用Android平台的强大功能和灵活性. Androi ...
[译文]c#扩展方法(Extension Method In C#)
原文链接: https://www.codeproject.com/Tips/709310/Extension-Method-In-Csharp 介绍扩展方法是C# 3.0引入的新特性.扩展方法使你 ...
CCNA课堂练习三:标准访问控制列表和扩展访问控制列表的区别
访问控制列表有两种:一种是标准的访问控制列表,另一种是扩展的访问控制列表.访问控制列表(ACL)是应用在路由器接口的指令列表.这些指令列表用来告诉路由器哪能些数据包可以收.哪能数据包需要拒绝.至于数据 ...

针对EasyUI的checkbox进行扩展

针对EasyUI的checkbox进行扩展相关推荐

最新文章

热门文章