zoukankan      html  css  js  c++  java
  • ZTree 使用范例

    http://www.treejs.cn/v3/api.php zTree v3.x 入门指南 Api 文档

    https://github.com/zTree/zTree_v3  下载ZTree v3

    1、加载css js 文件

     <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>

    2、使用

    view 页面 

    <div class="zTreeDemoBackground">    <ul id="treeDemo" class="ztree"></ul></div>

    js 代码

    <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>

    这样就可以生成一个简单的树了。

    接下来,我们要给这个树增加别的功能。

    例如,如果你想实现增删改、只需要对Setting配置信息进行修改。

     var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            edit: {
                enable: true,
                editNameSelectAll:true,
                removeTitle:'删除',
                renameTitle:'编辑'
            },
            callback:{
                beforeRemove:beforeRemove,//点击删除时触发
                beforeEditName: beforeEditName,//点击编辑时触发
                onRemove:onRemove,//删除节点后触发,用户后台操作
                beforeDrag:beforeDrag,//用户禁止拖动节点
                onClick:clickNode//点击节点触发的事件
            }
        };
    //再对每个方法进行处理就可以了

    至于各种类型树的实现,大家看 官网的demo 一下就能掌握了!

    http://www.treejs.cn/v3/demo.php#_101

  • 相关阅读:
    Design and Analysis of Algorithms_Decrease-and-Conquer
    TCPL 札记
    谬论:64 = 65?
    二叉树内部顶点与外部顶点在数量上的关系
    Design and Analysis of Algorithms_Divide-and-Conquer
    LeetCode 36. Valid Sudoku
    LeetCode 58. Length of Last Word
    LeetCode 66. Plus One
    LeetCode 67. Add Binary
    LeetCode 70. Climbing Stairs
  • 原文地址:https://www.cnblogs.com/DaBing0806/p/5780335.html
Copyright © 2011-2022 走看看