欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Jquery-zTree的基本用法

程序员文章站 2022-05-26 13:58:56
首先我们要运用ztree实现的样式如下: 第一步:规定唯一的id,定义class,规定元素的类名,用于指向样式表中的类。 第二步:引入一些css和js样式...

首先我们要运用ztree实现的样式如下:

Jquery-zTree的基本用法

第一步:规定唯一的id,定义class,规定元素的类名,用于指向样式表中的类。

    第二步:引入一些css和js样式
    <script type="text/javascript" src="../../dist/js/jquery.js"></script><script type="text/javascript" src="../../dist/js/form.js"></script><script type="text/javascript" src="../../dist/js/ztree.js"></script>

    第三步:如下是本插件需要引入的js初始源代码:
    var ztree; var setting = { check: { //设置 ztree 的节点上是否显示 checkbox / radio enable: false }, edit:{ //设置 ztree 是否处于编辑状态 enable:true }, async: { //设置 ztree 是否开启异步加载模式 enable: true, //ajax 获取数据的 url 地址 url:"../../data/organ", //用于对 ajax 返回数据进行预处理的函数 datafilter: filter }, data: { simpledata: { //确定 ztree 初始化时的节点数据、异步加载时的节点数据、或 addnodes 方法中输入的 newnodes 数据是否采用简单数据模式 enable:true, //节点数据中保存唯一标识的属性名称 idkey: "id", //节点数据中保存其父节点唯一标识的属性名称 pidkey: "pid", //用于修正根节点父节点数据,即 pidkey 指定的属性值 rootpid: "" } }, callback: { //用于捕获节点被点击的事件回调函数 onclick: onclick } }; $(document).ready(function(){ //ztree 初始化方法 $.fn.ztree.init($("#tree"), setting, root); }); 
    /**定义根节点*/
    var root = [{id:'0', nodetype:'root',isleafmodule: '', name: '组织机构树', isparent: true,iconskin:"icon01", open: true, isroot: true}];
    	  }
    	 
    	   function datafilter(treeid, parentnode, childnodes){
    	  	if (!childnodes) return null;
    			for (var i=0, l=childnodes.length; i
    
    ;>