Ztree使用笔记

在项目中需要用到树,使用了Ztree。(官网地址:http://www.treejs.cn/v3/main.php#_zTreeInfo,介绍很详细,有API,有demo)

1.初始化树:   $.fn.zTree.init($("#treeDemo"), setting, zNodes),#treeDemo-放置树的容器ID,setting参数设置,ZNodes初始化的节点;

2.setting 参数设置如下

var setting = {
        check: {
            enable: true//是否显示勾选框
        },
        data: {
            simpleData: {
                enable: true//确定 zTree 初始化时的节点数据,是否采用简单数据模式 (Array),开启之后,后天直接返回的list可以直接绑定树
            }
        },
        callback: {//各种回调函数
            onDblClick: dblClickNode,
        }
    };

  3.后台自定义类,用来接受树数据,返回给前台绑定树使用,个人觉得这个树结构是很方便的,可以在后台将树处理好,只要是正确的父级ID,绑好数据返回给前台就能用了,基本不用再做其他处理,非常方便

public class JsTreeModel
    {
        public string id { get; set; }//树id

        public string pId { get; set; }//父级id

        public string name { get; set; }//名字

        public bool open { get; set; }//是否默认展开

        public bool isParent { get; set; }//是否是父级节点,异步加载时使用

        public bool @checked { get; set; }//是否选中
    }

4.后台处理好数据用上面定义的 JsTreeModel 的List类型接收,返回到前台,直接给树绑定,在前台就能看到完整的树结构了

5.考虑到树数据量大的问题,需要启用异步加载,只需要在设置参数中添加异步的参数

var setting = {
        async:{
            enable: true,
            url: "url",//子节点异步获取的后台方法
            autoParam: ["id", "checked"],//参数,基本树节点自带属性都可以从这里传到后台
            otherParam: { "userlist": userlist, "username": function () { return $("#teachername").val(); } },//其他参数,自定义参数
            dataFilter: filter//过滤器,对后台传回来的数据进行处理后再交给树
        }  ,
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onDblClick: dblClickNode,
        }
    };

 在异步加载的时候出现过几个问题,一是异步方法不进去,发现是父节点没有设置Isparent属性,在初始化的时候,给父节点的isparent属性设置为true,二是子节点不展示,发现时过滤器方法不对,数据没有返回,三是勾选父节点,再进行异步加载,子节点没有被勾选,这个通过异步方法将父节点的选中属性(checked)传到后台,赋值给查询到的子节点就行了,四是自定义参数的问题,在otherParam里面传的参数只是初始值,如果是用户输入之类的参数值,会一直都是空,所有需要使用函数的方式传值,就上面所写到的

"username": function () { return $("#teachername").val(); }

  

时间: 2024-08-15 02:43:09

Ztree使用笔记的相关文章

ztree学习笔记(一)

在项目当中,经常会用到ztree树形插件,之前做的几个项目当中都用到了这个插件,感觉功能还是很强大的,而且在网上还找到了中文的API,因为项目中的树形结构不是自己做的,所以现在从头学习一下,并且记录一下学习的过程. 先简单介绍一下ztree. ztree是一款依靠jQuery实现的"树形"插件,它的特点是性能优异,配置灵活,功能强大,经常用于一些项目的功能管理和权限管理上,我自己接触的几个项目上的功能管理和权限管理上就用到了ztree插件.先向大家推荐一下ztree的中文API,个人觉

【笔记】ztree的使用

引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery-1.7.min.js"></script><script type="text/javascript" src="zTree/js/jquery.ztree.core-3.2.js"></script><scr

easyUi 学习笔记 (一) 使用easyui 和ztree 创建前端框架

1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 4 <%@ include file="/common/page.jsp" %> // 这里是引用的公共代码 ,主要是css和js jstl 的引用 easyui核心js都在里面 5 <!DOCTYPE html

2015第6周三ztree的使用

今天第一次真正在开发中使用了ztree组件,在实践过程体会了从生到熟的乐趣,从开始看不太懂ztree的api到后面熟悉理解其API布局,学习其中的各demo,感觉很不错,简单记录下使用ztree的经验. 1.查找API文档:http://www.ztree.me/v3/api.php 主要理解ztree对象(treeObj)和ztree结点(node)区别 (1)ztree对象treeObj是整棵树,不是指树的根节点rootNode,可通过treeObj.getNodes()获取所有根结点的集合

【安全牛学习笔记】

弱点扫描 ╋━━━━━━━━━━━━━━━━━━━━╋ ┃发现弱点                                ┃ ┃发现漏洞                                ┃ ┃  基于端口五福扫描结果版本信息(速度慢)┃ ┃  搜索已公开的漏洞数据库(数量大)      ┃ ┃  使用弱点扫描器实现漏洞管理            ┃ ╋━━━━━━━━━━━━━━━━━━━━╋ [email protected]:~# searchsploit Usage:

51CTO持续更新《通哥的运维笔记》

<通哥的运维笔记>将持续在51CTO网站更新,希望大家多多关注.互相学习,后期,我将会退出<通哥的运维笔记>系列视频教程,希望带给大家最大的收获,帮助大家更好的学习.进步.<通哥的运维笔记>主要从linux系统管理.虚拟化.cloudstack云平台以及网络管理之CCNA.CCNP.CCIE,等等方面深入讲解.

WPF笔记整理 - Bitmap和BitmapImage

项目中有图片处理的逻辑,因此要用到Bitmap.而WPF加载的一般都是BitmapImage.这里就需要将BitmapImage转成Bitmap 1. 图片的路径要用这样的,假设图片在project下的Images目录,文件名XXImage.png. pack://application:,,,/xxx;component/Images/XXImage.png 2. 代码: Bitmap bmp = null; var image = new BitmapImage(new Uri(this.X

java String 类 基础笔记

字符串是一个特殊的对象. 字符串一旦初始化就不可以被改变. String s = "abc";//存放于字符串常量池,产生1个对象 String s1=new String("abc");//堆内存中new创建了一个String对象,产生2个对象 String类中的equals比较字符串中的内容. 常用方法: 一:获取 1.获取字符串中字符的个数(长度):length();方法. 2.根据位置获取字符:charAt(int index); 3.根据字符获取在字符串中

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main