zTree 樹形結構常用功能點
阿新 • • 發佈：2019-02-19
資料格式：
示例：
一、獲取zTree中選中的節點
/** * 獲取treeId中選中的節點Id和Name */ function onCheck(treeId){ var treeObj=$.fn.zTree.getZTreeObj(treeId), nodes=treeObj.getCheckedNodes(true), v=""; pid=""; for(var i=0;i<nodes.length;i++){ v+=nodes[i].text + ","; pid+=nodes[i].pid; console.log("節點id:"+nodes[i].id+", 節點名稱："+v+", pid:"+pid); //獲取選中節點的值 } }
二、點選增加
/** * 批量-點選新增 */ violationAllot.add = function() { // 獲取已選道路臺賬列表 selectAllotList(全域性變數) var treeObj = $.fn.zTree.getZTreeObj("waitTree"); // 獲取待選道路列表選中的節點的ID、pid、text; nodes = treeObj.getCheckedNodes(true); // 儲存json中所有的ID var allId = getAllAllotId(); var jsonChild = {}; var json = {}; var j = 0; // 呼叫js進行新增（單個、批量）; for(var i = 0; i < nodes.length; i++){ // 去重 if(allId.indexOf(nodes[i].id) != -1 && nodes[i].pid != null) {continue;} if(nodes[i].pid == null) {// 父級節點 json[nodes[i].id] = { id: nodes[i].id, pid: nodes[i].pid, text: nodes[i].text, children: new Array() }; }else {// 如果是子節點 jsonChild = { id: nodes[i].id, pid: nodes[i].pid, text: nodes[i].text }; json[nodes[i].pid]["children"].push(jsonChild); } } // json和selectAllotList 取並集 // 預設父級沒有 var flagParent = false; // 預設子級沒有 var flagChild = false; var location = 0; var parentId = null; var count = 0; // selectAllotList > json 增加父級存在的節點 for(var i = 0; i < selectAllotList.length; i++) { count = 0; parentId = selectAllotList[i].id; if(json[parentId] != null) {// 父級有 if(json[parentId].children.length == 0) {continue;} location = i; flagParent = true; }else {// 父級沒有則新增父級 continue; } for(var j = 0; j < selectAllotList[i].children.length; j++) { if(selectAllotList[i].children[j].id == json[parentId].children[count].id) {// 子級有 flagChild = true; break; } } if(!flagChild) { jsonChild = { id: json[parentId].children[count].id, pid: json[parentId].children[count].pid, text: json[parentId].children[count++].text }; selectAllotList[location].children.push(jsonChild); } } // json > selectAllotList 增加父級不存在的節點 allId = getAllAllotId(); for(var i in json) { // 增加父級節點 if(allId.indexOf(json[i].id) == -1) { selectAllotList.push(json[i]); } } //返回更新已選臺賬列表 selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, selectAllotList); selectedTreeObj.expandAll(true); }
三、點選刪除
/** * 批量-點選刪除 */ violationAllot.deleteOne = function() { // 獲取已選道路臺賬列表 selectAllotList(全域性變數) // 獲取選中的節點 var treeObj=$.fn.zTree.getZTreeObj("selectTree"); // 獲取已選道路列表選中的節點的ID、pid、text nodes = treeObj.getCheckedNodes(true); // 從selectAllotList刪除對應id的節點 for(var i = 0; i < nodes.length; i++){ selectAllotList = removeByValue(selectAllotList, nodes[i].id); } // 返回更新已選臺賬列表 selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, selectAllotList); selectedTreeObj.expandAll(true); } /** * 刪除陣列中id=val的節點 */ function removeByValue(arr, val) { for(var i=0; i<arr.length; i++) { for(var j = 0; j < arr[i].children.length; j++) { if(arr[i].children[j].id == val){ arr[i].children.splice(j, 1); } } if(arr[i].children.length == 0 ){ arr.splice(i, 1); } } return arr; }
四、點選增加所有
/**
* 批量-新增所有未分配道路
*/
violationAllot.add_all = function() {
selectAllotList = new Array();
var ajax = new $ax(GlobalUtils.ctxPath + "/maintenance/allot/unassignedTreeData" , function (data) {
if (GlobalUtils.isSuccess(data)) {
allAllot = data.content;
selectedTreeObj = $.fn.zTree.init($("#selectTree"), setting, allAllot);
// 展開所有
selectedTreeObj.expandAll(true);
selectAllotList = allAllot;
}
}, function (data) {
});
ajax.start();
}
五、點選刪除所有
/**
* 批量-刪除所有
*/
violationAllot.delete_all = function() {
selectAllotList = new Array();
$.fn.zTree.init($("#selectTree"), setting, null);
}
六、zTree常用功能
6.1 初始化設定
var setting = {
view: {
showIcon: false, //隱藏icon
dblClickExpand: false,//雙擊節點時，是否自動展開父節點的標識
showLine: true,//是否顯示節點之間的連線
fontCss:{'color': '#33445D', 'font-family': 'Microsoft YaHei UI'},//字型樣式函式
selectedMulti: true //設定是否允許同時選中多個節點
},
data: {
key: {
name: 'text',
checked: 'checked',
open: 'state'
},
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pid'
}
},
check : {
enable: true,// 顯示多選框
autoCheckTrigger: false,
chkboxType: { "Y": "ps", "N": "ps" }
}
};
6.2 初始化
var ajax = new $ax(GlobalUtils.ctxPath + "/maintenance/allot/treeData" , function (data) {
if (GlobalUtils.isSuccess(data)) {
allAllot = data.content;
zTreeObj= $.fn.zTree.init($("#waitTree"), setting, data.content);
// 展開所有
zTreeObj.expandAll(true);
var node = null;
var childrenLength = null;
var child = null;
for(var i = 0; i < data.content.length; i++) {
if(data.content[i].checked == 'checked') { // 如果父節點為選中
node = zTreeObj.getNodeByParam("id", data.content[i].id);
// node.chkDisabled = true;
childrenLength = data.content[i].children.length;
for(var j = 0; j < childrenLength; j++) {// 如果子節點為選中
child = data.content[i].children[j];
if(child.checked == 'checked'){
node = zTreeObj.getNodeByParam("id", child.id);
zTreeObj.setChkDisabled(node, true);
}
}
}
}
}
}, function (data) {
});
ajax.start();
6.3 展開所有
zTreeObj.expandAll(true);
6.4 禁用節點操作
zTreeObj.setChkDisabled(node, true);
6.5 根據節點屬性值獲取節點
node = zTreeObj.getNodeByParam("id", data.content[i].id);
6.6 設定父節點、子節點級聯
setting.check : {
enable: true,// 顯示多選框
autoCheckTrigger: false,
chkboxType: { "Y": "ps", "N": "ps" }
}
6.7 設定後臺資料對應
用於後臺封裝的物件屬性值與預設的zTree屬性值不一致的情況。
setting. data: {
key: {
name: 'text',
checked: 'checked',
open: 'state'
},
simpleData: {
enable: true,
idKey: 'id',
pIdKey: 'pid'
}
},
6.8 設定zTree字型樣式
setting.view: {
showIcon: false, //隱藏icon
dblClickExpand: false,//雙擊節點時，是否自動展開父節點的標識
showLine: true,//是否顯示節點之間的連線
fontCss:{'color': '#33445D', 'font-family': 'Microsoft YaHei UI'},//字型樣式函式
selectedMulti: true //設定是否允許同時選中多個節點
},
6.9 設定節點為選中
zTree.selectNode(node, true);
6.10 預設選中第一行
// 結果列表初始化
var defaultColunms = ViolationEntry.initColumn();
_this.table = new BSTable(ViolationEntry.id, "/violation/list", defaultColunms,
{
pageSize:_this.pageSize,
onLoadSuccess: function (data) {
if(data.rows.length > 0){
// 預設選中第一行
changeImgMovie(data.rows[0].violationXh);
}
_this.total_until = _this.table.getTotal();
_this.page_num = _this.table.getPageNumber();
_this.total_page = _this.table.getTotalPage();
_this.order_filed = _this.table.getOrderField();
_this.sort_order = _this.table.getSortOrder();
}
});
_this.table.setPaginationType("server");
_this.table.setQueryParams(ViolationEntry.param());
_this.table.init();
參考連結：