zTree-两种数据格式的使用

zTree有两种数据格式：标准数据格式及简单数据格式

1、标准数据格式

var setting = {
	data: {
		simpleData: {
			enable: false // 也可不设置
		},
        key:{
            children: "nodes",// 节点数据中保存子节点数据的属性名称,默认值："children"
            name: "ename",// 节点数据保存节点名称的属性名称,默认值："name"
            // 其他相关属性可查看zTree的API文档
        }
	}
};

// 标准数据格式需要用children嵌套表示节点的父子包含关系
var nodes = [
	{
        name: "父节点1", 
        children: [
		  {name: "子节点1-1"},
		  {name: "子节点1-2"}
	    ]
    },
    {
        name: "父节点2", 
        children: [
		  {name: "子节点2-1"},
		  {name: "子节点2-2"}
	    ]
    }
];

2、简单数据格式

var setting = {
	data: {
		simpleData: {
			enable: true, // 使用简单数据格式时，simpleDate的enable属性必须设为true
			idKey: "id", // 指定字段务必让数据满足父子关系
			pIdKey: "pId"
		}
	}
};
var nodes = [
	{id:1, pId:0, name: "父节点1"},
	{id:11, pId:1, name: "子节点1"},
	{id:12, pId:1, name: "子节点2"}
];

3、举例说明

// 以分组类型 分组展示，然后子节点展示组编号和组名称
// 相同的分组类型下展示组名称

var list = [
    {
        groupType:'01', // 分组类型
        groupTypeName:'组1',// 分组类型名称
        subGroupNo:'aaaa',// 组编号
        subGroupName:'分组1'// 组名称
    },
    {
        groupType:'02', // 分组类型
        groupTypeName:'组2',// 分组类型名称
        subGroupNo:'bbbbb',// 组编号
        subGroupName:'分组2'// 组名称
    },
    {
        groupType:'03', // 分组类型
        groupTypeName:'组3',// 分组类型名称
        subGroupNo:'cccc',// 组编号
        subGroupName:'分组3'// 组名称
    },
    {
        groupType:'01', // 分组类型
        groupTypeName:'组1',// 分组类型名称
        subGroupNo:'dddd',// 组编号
        subGroupName:'分组4'// 组名称
    },
    {
        groupType:'02', // 分组类型
        groupTypeName:'组2',// 分组类型名称
        subGroupNo:'eeee',// 组编号
        subGroupName:'分组5'// 组名称
    }

];

var setting = {
        edit:{enable:false},
        check:{enable:false},
        date:{}// 这里使用标准数据格式
}

// 这种有特殊要求的需要对数据进行处理，让数据满足父子关系
var treeList = [];

list.forEach(function(item){
    if (treeList.find(i=>i.id === item.groupType)) {
        var _child = list.filter(i=>i.groupType === item.groupType);
        treeList.push({
            id:item.groupType,
            name:item.groupType + '-' + item.groupTypeName,
            children:getChild(_child)
        });
    }
});

function getChild(childArr){
    var _childArr = [];
    childArr.forEach(function(item){
        _childArr.push({
            id:item.subGroupNo,
            name: item.subGroupNo + '-' + item.subGroupName
        });
    });
    return _childArr;
}

4、总结

这里只是简单说明了zTree这种jQuery插件的两种数据格式，更多详细的属性可参考官方文档。

zTree-API文档https://docs.caacle.com/zTree_v3/api/API_cn.html