引入treegridEvent.js
/**
* 自定义树型表格事件及方法(级联时用)
* 针对手动加的复选框, 相关的事件及方法
*/
var treegridEvent = {
cascade : true, //是否级联
linkage : false, //行选中与复选框勾选是否联动
gridId : "domain_treegrid", //表格id
//复选框选中事件
onChecked : function(nodeId, isChecked){
//阻止冒泡, 目的是点击复选框时, 不触表格的click事件, 而是手动加样式
event.stopPropagation();
//获取树图jquery对象以及真实表格的table对象
var linkage = this.linkage,
$treegrid = $("#"+this.gridId),
$table = $treegrid.prev(".datagrid-view2")
.children(".datagrid-body")
.children(".datagrid-btable");
if(linkage){
//根据isChecked, 设置当前行选中或不选中
if(isChecked){
$treegrid.treegrid("select", nodeId);
}else{
$treegrid.treegrid("unselect", nodeId);
}//if
}
if(!this.cascade){
return; //如果不级联, 就此结束
}
/**
* 级联共有四种情况
* 父选中, 父取消, 子选中, 子取消
* 下面对四种情况做处理
*/
//父选中或取消, 子一定随之而动
var children = $treegrid.treegrid("getChildren", nodeId);//该方法可跨代获取
for(var i=0,len=children.length; i<len; i++){
var child = children[i],
childId= child.CODE;
$table.find('input[name="treegrid_box"][value="'+childId+'"]').attr("checked", isChecked);
if(linkage){
//根据isChecked, 设置当前行选中或不选中
if(isChecked){
$treegrid.treegrid("select", childId);
}else{
$treegrid.treegrid("unselect", childId);
}//if
}
}//for
if(isChecked){
/* 子级选中后, 对父级的处理, 调用递归 */
treegridEvent.onChildChecked(nodeId);
}else{
/* 子取消选中, 父也一定取消 */
//先递归获取所有父节点
var parentIds = this.recurGetParents(nodeId);
//遍历父节点, 一一做处理
for(var i=0,len=parentIds.length; i<len; i++){
var parentId = parentIds[i];
$table.find('input[name="treegrid_box"][value="'+parentId+'"]').attr("checked", false);
if(linkage){
$treegrid.treegrid("unselect", parentId); //取消勾选后, 设置行取消选中
}
}
}
},
//子级选中后, 对父级的处理, 因为递归, 所以提出来写成方法
onChildChecked : function(nodeId){
var linkage = treegridEvent.linkage,
$treegrid = $("#"+treegridEvent.gridId),
$table = $treegrid.prev(".datagrid-view2")
.children(".datagrid-body")
.children(".datagrid-btable");
/**
* 子选中, 如果其他兄弟都选中, 那么父也选中
* 总共分五步
*/
//第一步, 先获取父级
var parent = $treegrid.treegrid("getParent", nodeId);
if(!parent){ //避免父级为null情况
return;
}
var parentId = parent.CODE,
flag = true; //开关默认为true
//第二步, 获取父级的所有子级
var children = $treegrid.treegrid("getChildren", parent.CODE);
for(var i=0,len=children.length; i<len; i++){
var child = children[i];
/*
* 过滤出节点的兄弟级
* 因为插件的getChildren方法, 获取的是所有后代, 也就是跨代获取
* 所以要根据子级的父id, 与原始父id对比
* 如果相同, 则是兄弟级, 否则不是
*/
if(child.PARENT_CODE == parentId){
//第三步, 获取兄弟的checked属性
var chiIsChecked =
$table.find('input[name="treegrid_box"][value="'+child.CODE+'"]').attr("checked");
/* 如果有一个兄弟没被选中, 那么开关设置为false */
if(!chiIsChecked){
flag = false;
break; //之后的也没必要判断了, 直接break
}
}
}
//第四步, 根据之前得出的开关flag, 设置父级是否选中
if(flag){
$table.find('input[name="treegrid_box"][value="'+parentId+'"]').attr("checked", true);
if(linkage){
$treegrid.treegrid("select", parentId); //勾选后, 设置行选中
}
//第五步, 如果父级选中了, 那么要找到父级的兄弟级, 继续做同样判断, 可用递归
treegridEvent.onChildChecked(parentId);
}
},
//递归获取所有父节点, (子级取消选中时用)
recurGetParents : function(nodeId){
var $treegrid = $("#"+treegridEvent.gridId),
parent = $treegrid.treegrid("getParent", nodeId);
if(parent){
var parentId = parent.CODE;
var parentIds = treegridEvent.recurGetParents(parentId);
parentIds.push(parentId);
return parentIds;
}else{
return [];
}
},
//获取选中的checkbox
getCheckedBoxes : function(){
var boxArr = $("#"+this.gridId)
.prev(".datagrid-view2")
.children(".datagrid-body")
.children(".datagrid-btable")
.find("input[name='treegrid_box']:checked");
return boxArr;
}
};
之后正常初始化treegrid, 需要注意onClickRow事件中的写法(其实是判断复选框的勾选与行选中是否联动), 参考如下:
init : function(){
$("#domain_treegrid").treegrid({
idField: "CODE",
treeField: "NAME",
columns:[[
{field:'NAME',title:'专业名称',width:100,align:"left",
formatter: function(val, rowData, index){
var html = ''
+'<input type="checkbox" name="treegrid_box" '
+ 'style="margin-left:5px;" '
+ 'value="'+rowData.CODE+'" '
+ 'οnclick="treegridEvent.onChecked(this.value, this.checked);" />'
+ val; //非级联时,不加onclick事件
return html;
}},
{field:'REMARK',title:'备注',width:300,align:"center"},
{field:'PARENT_CODE',title:'父节点',width:100,align:"center",hidden:true}
]],
animate: true,
fitColumns: true,
singleSelect: true,
data: [],
onClickRow : function(row){
if(treegridEvent.linkage){
var nodeId = row.CODE,
$tr = $("#domain_treegrid")
.prev(".datagrid-view2")
.children(".datagrid-body")
.children(".datagrid-btable")
.children("tbody")
.find('tr[node-id="'+nodeId+'"]'),
//找到当前行的dom, 根据是否有特定class判断是否选中
isChecked = $tr.hasClass("datagrid-row-selected");
//根据isChecked, 为复选框设置状态
$tr.find('input[type="checkbox"][name="treegrid_box"]').attr("checked", isChecked);
//之后调用onChecked事件
treegridEvent.onChecked(nodeId, isChecked);
}
}
});
}