zTree-jQuery树插件

1、需要引入对应的css文件：zTreeStyle.css,以及js文件：jquery.min.js和jquery.ztree.core.min.js 要确保先引入jQuery，再引入zTree。因为zTree依赖于jQuery。

2、写布局容器：   

  <div>
        //这里注意class名称的ztree是小写（当时因为写成了大写，导致zTree不显示图标，找了半天才发现）
        <ul id="treeDemo" class="ztree"></ul>
  </div>

3、写js

var zTreeObj;

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

var setting = {

        check:{

            enable:true

        }

};

// zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

var zNodes =[
	{ name:"父节点1 - 展开", open:true,
	children: [
	{ name:"父节点11 - 折叠",
	children: [
	{ 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}
	];

$(document).ready(function(){

   zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);

});

 

4、注意事项:

    ①小心样式冲突的问题。

    ②引入js文件的顺序问题。

    ③给zTree设置单选或者复选框        

var setting = {

        check:{

            enable:true,  //true、false分别表示显示不显示单选或者复选框

           chkStyle:"checkbox",//表示勾选框的类型（checkbox、radio）如果不写默认是checkbox 

            chkboxType:{"Y":"p","N":"s"} //表示勾选复选框对于父子节点的关联关系 默认值是{"Y":"ps","N":"ps"}

                                         // 当[setting.check.enable = true 且 setting.check.chkStyle = "checkbox" 时生效]

                                         // Y 属性定义 checkbox 被勾选后的情况； 

                                         // N 属性定义 checkbox 取消勾选后的情况； 

                                         //"p" 表示操作会影响父级节点； 

                                         //"s" 表示操作会影响子级节点。

                            

        }
};

 

④要想使用单选、复选框，还需要引入jquery.ztree.excheck.min.js 否则复选框不能正常显示。

⑤其中all.js=core + excheck + exedit(不包括 exhide)（也就是说，如果引的是jquery.ztree.all.min.js,就不用单独去引core.js以及excheck.js了）