jquery樹形插件 jquery.dynatree.js 的使用

1，在後臺拼字符串產生json，json的格式爲：[{title :"xxxx",  key: xerx, ,expand:true/false ,children:[{title:"yyyyy",key:eeee,expand:true},

{title:"zzzzz",key:dfds,expand:true}]}]。 這麼嵌套下去，實際使用時能夠用StringBuffer這樣拼字符的速度快些。expand:true時產生的樹是展開的，當爲false時樹是閉合 的。把這個json字符串放入map中在前臺展現。（我用的springmvc框架）

2，引入css和js文件：dynatree/src/skin/ui.dynatree.css，dynatree/jquery/jquery-ui.custom.js，dynatree/jquery/jquery.cookie.js，

dynatree/src/jquery.dynatree.js。

3，在jsp中添加這樣的div      <div name=test  style="width:170px;height:200px;overflow: auto ;background-color: white; border: #83BCF5 1px solid;" value="1">

4，在js中：

$(function(){   //這是爲了在打開頁面時就調用這個方法
        initTree();
         });

function initTree(){
         //初始化樹狀結構
        $("#test").dynatree({
            checkbox: true,
            // Override class name for checkbox icon, so rasio buttons are displayed:
            classNames: {nodeIcon: ""},
            // Select mode 3: multi-hier
            selectMode: 3,
            children: ${sjon}   //這個${sjon}就是後臺保存在map中的json字符串
        });

}       

4，爲該樹添加全選與所有選操做：   

function selectAll(){    //全選
      $("#test").dynatree("getRoot").visit(function(node){
        node.select(true);
      });

}

function deSelectAll(){   //全不選
      $("#test").dynatree("getRoot").visit(function(node){
        node.select(false);
      });

}

5，把此樹的key發送到後臺的方法：

好比這個樹在  id爲form1的form中，var formData = $("#form1").serializeArray();//這爲了把樹之外的內容序列化和樹的數據一塊兒發送

var tree1;

         tree1 = $("#test").dynatree("getTree");

        formData = formData.concat(tree1.serializeArray());    //這就把樹的數據獲得並和樹以外的數據連在一塊兒了。

而後把formData發送就over了。

 6，判斷樹是否有節點選擇

$("#test).dynatree("getSelectedNodes").length==0表示沒選擇。

  2、如下是本身作的一個小列子實例，樹形分類。樹形分類的代碼就不提供了。

 

<-- view 層-->

<script src="__JS__/dynatree/jquery/jquery-ui.custom.js" type="text/javascript"></script>
  <link href="__JS__/dynatree/src/skin/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet">
  <script src="__JS__/dynatree/src/jquery.dynatree.js" type="text/javascript"></script>

<!--添加  expanded 類是爲了初始化頁面，默認打開就展開某些項-->

<div id="tree">
                         <ul id="treeData" >
                            <?php foreach ($cateTree as $key => $cate) :?>
                                <li id="{$cate['id']}" title="" class="li_{$cate['id']} top expanded" data-cateid="{$cate['id']}" >{$cate['cateName']}

                                   <a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $cate['id'];?>');">
                                      <i class="iconfont">&#xe623;</i>
                                    </a> |
                                    <a class="text-muted" href="javascript:deleteCate('<?php echo $cate['id'];?>');" onclick="return nat_del()">
                                      <i class="iconfont">&#xe61e;</i>
                                    </a>

                                    <ul>
                                       <?php foreach ($cate['child'] as $key => $child) :?>
                                           <li id="{$child['id']}" class="li_{$child['id']}" data="code:{$child['id']}" >{$child['cateName']}
                                            <a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $child['id'];?>');">
                                              <i class="iconfont">&#xe623;</i>
                                            </a> |
                                            <a class="text-muted" href="javascript:deleteCate('<?php echo $child['id'];?>');" onclick="return nat_del()">
                                              <i class="iconfont">&#xe61e;</i>
                                            </a>

                                            <ul>
                                              <?php foreach ($child['child'] as $key => $last) :?>
                                                  <li id="{$last['id']}" class="li_{$last['id']}" data="code:{$last['id']}" >{$last['cateName']}
                                                       <a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $last['id'];?>');">
                                                        <i class="iconfont">&#xe623;</i>
                                                      </a>|
                                                      <a class="text-muted" href="javascript:deleteCate('<?php echo $last['id'];?>');" onclick="return nat_del()">
                                                        <i class="iconfont">&#xe61e;</i>
                                                      </a>
                                                      <ul>
                                                        <volist name="last['child']" id="four" >
                                                          <li id="{$four['id']}" class="li_{$four['id']}" data="code:{$four['id']}">{$four['cateName']}
                                                            <a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $four['id'];?>');">
                                                                <i class="iconfont">&#xe623;</i>
                                                              </a>
                                                              |
                                                              <a class="text-muted" href="javascript:deleteCate('<?php echo $four['id'];?>');" onclick="return nat_del()">
                                                                <i class="iconfont">&#xe61e;</i>
                                                              </a>
                                                              <ul>
                                                                    <?php foreach ($four['child'] as $key => $five) :?>
                                                                           <li id="{$five['id']}" class="li_{$five['id']}" data="code:{$five['id']}">{$five['cateName']}
                                                                            <a class="edit_nat c-violet" style="margin-left:100px;" href="javascript:editCate('<?php echo $five['id'];?>');">
                                                                                <i class="iconfont">&#xe623;</i>
                                                                              </a>
                                                                              |
                                                                              <a class="text-muted" href="javascript:deleteCate('<?php echo $five['id'];?>');" onclick="return nat_del()">
                                                                                <i class="iconfont">&#xe61e;</i>
                                                                              </a>
                                                                    <?php endforeach;?>
                                                              </ul>
                                                        </volist>
                                                      </ul>
                                              <?php endforeach;?>
                                            </ul>
                                      <?php endforeach;?>
                                    </ul>
                             <?php endforeach;?>
                          </ul>
                        </div>

<scsript type="text/javascript>

   　//初始化樹形，（備註：若是初始化默認頁面中要展開某些項時，在標籤中要添加"expanded"類。）

　　$(function(){

　　　　$("#tree").dynatree({
            
            }
        });

　　})

 

</script>