我们知道，现目前最新版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');
//初始化checkbox
chkObjs.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);运行效果：
