dorado DataGrid选择列功能

前段时间要实现一个datagrid选择列的功能，想了很多办法，还好在dorado文档查到dataColumn控件headerRenderer属性,

那好办就在列头中加一个复选框。

ckeckBox添加完了，不过复选框样式和其他dorado复选框样式不一样。好那就只能想办法了改造这个checkbox了。

先在checkbox 外面包了两层span，再应用上darado checkBox的class，思路是：把checkbox设为透明，class为icon

的背景是checkbox样式的图片，checkbox添加click事件onclick=cBClick(this)，点击的时候修改icon 的class。

js代码

/**

* 复选框点击

* @param {Object} obj

*/

window.cBClick = function (obj) {

    var iconId="#ckIcon"+$(obj).val();

if ($(obj).is(':checked')) {

$(iconId).removeClass("unchecked"); //删除未勾选选背景图

$(iconId).addClass("checked"); //添加勾选态背景图

} else {

$(iconId).removeClass("checked"); //删除勾选选背景图

$(iconId).addClass("unchecked"); //添加未勾选选背景图

}

}

var columns = [];

name = "month" + d;

pro = "#.schedulingInfoMonth.month" + d;

isRead = false;

trigger = tdTrigger;

headRenderer = function (dom, arg) {

dom.innerHTML = arg.column.get("caption") +"<span class='d-checkbox'><span class='icon unchecked' id='ckIcon" + arg.column.get("name") +"'><input name='colum' class='checkbox' onclick=cBClick(this) type='checkbox' value='" + arg.column.get("name") +"' /></span></span>";

};

var colum = {

property: pro, name: name, width: colWidth, caption: capt, align: "center", readOnly: isRead, trigger: trigger, supportsOptionMenu: false, headerRenderer: headRenderer

};

columns.push(colum);

css 代码：

.checkbox {

opacity: 0;

filter: alpha(opacity=0);

}

.d-checkbox {

vertical-align: middle;

}

获取选择的列：

var days = "";

$("input[name='colum']:checked").each(function () {

var cheValue=$(this).val();

days += cheValue.substring(5,cheValue.length) +",";

});

看看效果：

好了选择列功能就这样实现了。