/**
* 擴展樹表格級聯勾選方法：
* @param {Object} container
* @param {Object} options
* @return {TypeName}
*/
$.extend($.fn.treegrid.methods, {
/**
* 級聯選擇
* @param {Object} target
* @param {Object} param
* param包括兩個參數:
* id:勾選的節點ID
* deepCascade:是否深度級聯
* @return {TypeName}
*/
cascadeCheck: function (target, param) {
var opts = $.data(target[0], "treegrid").options;
if (opts.singleSelect)
return;
var idField = opts.idField;//這里的idField其實就是API里方法的id參數
var status = false;//用來標記當前節點的狀態，true:勾選，false:未勾選
var selectNodes = $(target).treegrid('getSelections');//獲取當前選中項
for (var i = 0; i < selectNodes.length; i++) {
if (selectNodes[i][idField] == param.id)
status = true;
}
//級聯選擇父節點
selectParent(target[0], param.id, idField, status);
selectChildren(target[0], param.id, idField, param.deepCascade, status);
/**
* 級聯選擇父節點
* @param {Object} target
* @param {Object} id 節點ID
* @param {Object} status 節點狀態，true:勾選，false:未勾選
* @return {TypeName}
*/
function selectParent(target, id, idField, status) {
var parent = $(target).treegrid('getParent', id);
if (parent) {
var parentId = parent[idField];
if (status)
$(target).treegrid('select', parentId);
else
$(target).treegrid('unselect', parentId);
selectParent(target, parentId, idField, status);
}
}
/**
* 級聯選擇子節點
* @param {Object} target
* @param {Object} id 節點ID
* @param {Object} deepCascade 是否深度級聯
* @param {Object} status 節點狀態，true:勾選，false:未勾選
* @return {TypeName}
*/
function selectChildren(target, id, idField, deepCascade, status) {
//深度級聯時先展開節點
//if (!status && deepCascade)
// $(target).treegrid('expand', id);
//根據ID獲取下層孩子節點
var children = $(target).treegrid('getChildren', id);
for (var i = 0; i < children.length; i++) {
var childId = children[i][idField];
if (status)
$(target).treegrid('select', childId);
else
$(target).treegrid('unselect', childId);
selectChildren(target, childId, idField, deepCascade, status);//遞歸選擇子節點
}
}
}
});
調用方法：
$('#test').treegrid({
idField:'code',//需設置
treeField:'code',
singleSelect:false,//需設置
columns:[[
{field:'ck',checkbox:true},//需設置
{title:'Code',field:'code',width:200},
]],
onClickRow:function(row){
//級聯選擇
$(this).treegrid('cascadeCheck',{
id:row.code, //節點ID
deepCascade:true //深度級聯
});
}
});