dorado DataGrid选择列功能

最新推荐文章于 2024-06-04 16:44:22 发布

原创最新推荐文章于 2024-06-04 16:44:22 发布 · 2.1k 阅读

0 ·

CC 4.0 BY-SA版权

js/jquery/ajax 同时被 2 个专栏收录

10 篇文章

订阅专栏

html/div/css

4 篇文章

订阅专栏

本文介绍了如何在Dorado的DataGrid中实现选择列功能，通过自定义headerRenderer属性添加复选框，并利用JavaScript和CSS调整样式，实现选择状态的切换。同时提供了获取选中列的示例代码。

前段时间要实现一个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) +",";
});
看看效果：





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