• zTree:一个依靠 jQuery 实现的多功能 “树插件”


    官方网站:

    http://www.treejs.cn/v3/main.php#_zTreeInfo

    使用方式:

    步骤1、文件准备

    将需要使用的 zTree v3.x 相关的 js、css、img 文件分别放置到相应目录,并且保证相对路径正确

    步骤 2、编写 html 页面

    按照以下代码,制作 html 页面,访问试试看吧,注意:

    1) "<!DOCTYPE html>" 是必需的

    2) zTree 的容器 className 别忘了设置为 "ztree"

    3) 入门成功后,就可以按照顺序去看 Demo 了,直接看看源码,应该能看懂的。

    <!DOCTYPE html>
    <HTML>
     <HEAD>
      <TITLE> ZTREE DEMO </TITLE>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" href="demoStyle/demo.css" type="text/css">
      <link rel="stylesheet" href="zTreeStyle/zTreeStyle.css" type="text/css">
      <script type="text/javascript" src="jquery-1.4.2.js"></script>
      <script type="text/javascript" src="jquery.ztree.core-3.x.js"></script>
      <SCRIPT LANGUAGE="JavaScript">
       var zTreeObj;
       // zTree 的参数配置,深入使用请参考 API 文档(setting 配置详解)
       var setting = {};
       // zTree 的数据属性,深入使用请参考 API 文档(zTreeNode 节点数据详解)
       var zNodes = [
       {name:"test1", open:true, children:[
          {name:"test1_1"}, {name:"test1_2"}]},
       {name:"test2", open:true, children:[
          {name:"test2_1"}, {name:"test2_2"}]}
       ];
       $(document).ready(function(){
          zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
       });
      </SCRIPT>
     </HEAD>
    <BODY>
    <div>
       <ul id="treeDemo" class="ztree"></ul>
    </div>
    </BODY>
    </HTML>
          initTree: function() {//初始化权限
             var viewSelf = this;
             $.fn.zTree.init($("#treeDemo"), {
                async: {
                    enable: true,
                    url:$$ctx + "/menuMng/findFirstMenuList"
                },
                data: {
                    simpleData: { enable: true, idKey: "id", pIdKey: "pid"},
                    key: { name: "name" }
                },
                check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},
                callback: {
                    onAsyncSuccess: function() {
                       var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    //                 treeObj.expandAll(true);//全不展开
                    }
                }
             });
            
             $.fn.zTree.init($("#treeDemo_dashboard"), {
                async: {
                    enable: true,
                    url:$$ctx + "/menuMng/findDashboardMenuList"
                },
                data: {
                    simpleData: { enable: true, idKey: "id", pIdKey: "pid"},
                    key: { name: "name" }
                },
                check: { enable: true, chkStyle: "checkbox",chkboxType:{ "Y" : "ps", "N" : "ps" }},
                callback: {
                    onAsyncSuccess: function() {
                       var treeObj = $.fn.zTree.getZTreeObj("treeDemo_dashboard");
    //                 treeObj.expandAll(true);//全不展开
                    }
                }
             });
            
          },
  • 相关阅读:
    zendstudio 默认网页打开your project的时候不显示本地主机localhost的解决方法
    centos安装epel源后,使用报错(Error: Cannot retrieve repository metadata (repomd.xml) for repository: epel. Please verify its path and try again)
    描述硬链接和软链接区别
    软硬链接和文件之间的关系
    硬链接 inode号码相同 文件名不同
    目录下没有任何内容,为什么该目录的硬链接数为何是2
    磁盘还有空间为什么不能写入数据以及彻底删除文件原理
    inode和block的关系
    block
    /etc/init.d和/etc/rc.d/rc*.脚本/etc/rc.d/rc.local和/etc/rc.d/rc.sysinit
  • 原文地址:https://www.cnblogs.com/xyhero/p/9404192.html
Copyright © 2020-2023  润新知