zoukankan      html  css  js  c++  java
  • zTree的使用

    zTree可以实现树形结构的关系。一般会出现在部门 的上下级关系,角色权限的分配等模块中...

    zTree格式要求:即Json的复杂格式

      [{id:"..",pId:"..",name:"..",checked:"true/false"}]

    id:标识当前的id;

    pId:父节点的id;

    name:节点名称(就是在页面上可以看到的值);

    checked:是否勾选,默认是false。

     1 <html xmlns="http://www.w3.org/1999/xhtml">
     2 <head>
     3 <link rel="stylesheet" href="${ctx}/staticfile/components/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
     4     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery-1.4.4.min.js"></script>
     5     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.core-3.5.min.js"></script>
     6     <script type="text/javascript" src="${ctx}/staticfile/components/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
     7 <SCRIPT type="text/javascript">
     8 
     9     
    10         var setting = {
    11             check: {
    12                 enable: true
    13             },
    14             data: {
    15                 simpleData: {
    16                     enable: true
    17                 }
    18             }
    19         };
    20      //测试数据
    21         var zNodes =[{id:1,pId:1,name:"爷爷"},{id:2,pId:1,name:"爸爸"},{id:3,pId:2,name:"儿子"}];22         
    23         $(document).ready(function(){
    24             $.fn.zTree.init($("#htZtree"), setting, zNodes);
    25 
    26             var zTreeObj = $.fn.zTree.getZTreeObj("Ztree");
    27             zTreeObj.expandAll(true);        //展开所有树节点
    28         });
    29         
    30         
    31         
    32     </SCRIPT>
    33 
    34 </head>
    35 
    36 <body>
    37 <h1>Ztree入门教例</h1>
    38 <div style="padding:30px;">
    39     <ul id="Ztree" class="ztree"></ul>
    40 </div>
    41  
    42 </div>
    43  
    44  
    45 </form>
    46 </body>
    47 </html>
  • 相关阅读:
    Hack World和CTFHub布尔注入记录
    MySQL updatexml()、extractvalue() 报错型SQL注入
    常见的Web源码泄漏漏洞及其利用(转载记录)
    大白
    [强网杯 2019]随便注
    [极客大挑战 2019]LoveSQL 1
    Mysql--事物
    Android深度探索-卷1第十章心得体会
    Android深度探索-卷1第八章心得体会
    Android深度探索-卷1第九章心得体会
  • 原文地址:https://www.cnblogs.com/tongxuping/p/7134063.html
Copyright © 2011-2022 走看看