dorado DataGrid选择列功能_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) +",";
});
看看效果：





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