树形图的简单使用

在做项目的时候,有可能会遇到需要运用到树形图的操作,下面就讲讲简单的树形图的插件的使用:
插件官网:http://www.treejs.cn/v3/main.php#_zTreeInfo

前期准备
1.首先要引用ZTree插件,
2.写一个div用来装ZTree内容,
3.初始化ZTree实例
4.对他们操作的函数,方法…

一,引入ztree插件:

二.写一个div用来装ZTree内容,

前端代码:

    Js代码:
    var setting = { };

    	var zNodes =[
    		{ name:"父节点1 - 展开", open:true,
    			children: [
    				{ name:"父节点11 - 折叠",
    					children: [
    						{treeId:1, name:"叶子节点111"},
    						{ name:"叶子节点112"},
    						{ name:"叶子节点113"},
    						{ name:"叶子节点114"}
    					]},
    				{ name:"父节点12 - 折叠",
    					children: [
    						{ name:"叶子节点121"},
    						{ name:"叶子节点122"},
    						{ name:"叶子节点123"},
    						{ name:"叶子节点124"}
    					]},
    				{ name:"父节点13 - 没有子节点", isParent:true}
    			]},
    		{ name:"父节点2 - 折叠",
    			children: [
    				{ name:"父节点21 - 展开", open:true,
    					children: [
    						{ name:"叶子节点211"},
    						{  name: "叶子节点212" },
    						{  name: "叶子节点213" },
    						{  name: "叶子节点214" }
    					]},
    				{ name:"父节点22 - 折叠",
    					children: [
    						{ name:"叶子节点221"},
    						{ name:"叶子节点222"},
    						{ name:"叶子节点223"},
    						{ name:"叶子节点224"}
    					]},
    				{ name:"父节点23 - 折叠",
    					children: [
    						{ name:"叶子节点231"},
    						{ name:"叶子节点232"},
    						{ name:"叶子节点233"},
    						{ name:"叶子节点234"}
    					]}
    			]},
    		{ name:"父节点3 - 没有子节点", isParent:true}
    	];
    

    三.初始化ZTree

    	$(document).ready(function(){
    	    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    	});
    

    运行结果:
    树形图的简单使用_第1张图片
    点击某一节点,跳转一个页面.
    function zTreeOnClick(event, treeId, treeNode) {
    if (treeNode.name == “叶子节点111”) {
    window.location.href = “/Tree/sc1”;
    }
    if (treeNode.name == “叶子节点112”) {
    window.location.href = “/Tree/sc2”;
    }
    };
    var setting = {
    callback: {
    onClick: zTreeOnClick
    }
    };

    你可能感兴趣的:(插件的使用,树形图的简单使用)