Jquery.EasyUI中樹形插件的使用

1.基于easyui最基本的樹tree

a.頁面上的代碼構成

    1)html部分
           

<ul id="ttt" style="width: auto; height: auto; margin-top: 10px;"></ul>//這裡涉及到樣式問題的，按實際需要自己設定
           

2）js部分,(這裡我設定樹在頁面加載時直接構成，預設樹關閉)
           

<script type=""text/javascript>
    $(document).ready(function(){
        init_();
    });
    // 初始化樹表格
    function init_() {
        $('#ttt').tree(
                {
                    //請求樹的資料拼裝路徑
                    url : '/itsm/fortest/testtree',
                    method : 'post',
                    height : top.leftHeight - ,

                    //防止死循環加載樹
                    onBeforeLoad : function(node, param) {
                        if (node != null) {
                            return false;
                        }
                    },
            //輕按兩下事件，測試選中的節點傳值到背景
            onDblClick : function(node){
                $.ajax({
                    type : "post",
                    url : "/its/fortest/treelist?name="+node.id,
                    dataType : "json"
                        });
                    }
                });
    }
</script>
           

2.easyui中的資料表格形狀的樹，treegrid

a.頁面的代碼部分

    1）html部分
           

<table id="tt" style="width: auto; height: auto; margin-top: 10px;"></table>
           

2）js部分
           

<script type=""text/javascript>
    $(document).ready(function(){
        init_();
    });
function init_() {
        $('#tt').treegrid( {
            url : '/its/fortest/testtree',
            method : 'post',
            idField : 'id',//節點id
            treeField : 'text',//節點名稱
            height : top.leftHeight - ,
            //防止死循環加載
            onBeforeLoad : function(node, param) {
                if (node != null) {
                    return false;
                }
            },
            //設定列
            columns : [ [ {
                field : 'text',
                title : '名稱',
                width : 
            },{
                field : 'id',
                title : 'ID',
                width : 
            }] ],

            //輕按兩下的時候給背景傳遞選中值
            onDblClickRow : function(row){              
                $.ajax({
                    type : "post",
                    url : "/its/fortest/treelist?name="+row.id,
                    dataType : "json"
                });
            }           
        });
    }
</script> 
           

3.可以進行多選的樹形結構，combotree

a.第一個樹是可全部多選的樹
b.第二個數是隻能多選最後的自己的的樹

    1)頁面html代碼
           

<input id="cc" value="" name="name" >
                    或者
        <select id="cc" name="name"></select> 
           

2）js代碼
           

<script type="text/javascript">
    $(document).ready(function() {
        init_();
    });

    // 初始化樹表格
    function init_(){
        $('#cc').combotree({
            url : '/its/fortest/testtree',
            multiple: true,//設定可以多選
            //設定上面說的兩個不同的樹(a,b)
            onlyLeafCheck:true,

            //防止死循環
            onBeforeLoad : function(node, param) {
                if (node != null) {
                    return false;
                }
            },
        //a情況中，選中自己的是不選擇父節點
          onBeforeSelect:function(node){
              var rows = node.children;
              if(rows.length>){
                  $('cc').treegrid('unselect');
              }
          }

        });
    }
</script>   
           

3.這是基于easyui動态建構樹的幾個插件，在js代碼中，url向伺服器請求的是json代碼，具體資料代碼的拼裝，在下一篇部落格中介紹，這是我常用的三種樹，以後碰到裡面問題再來補充。