easyui-tree綁定數據的幾種方式

沒想到easyui對json數據格式要求的那么嚴謹，折騰了半天

第一種直接使用標簽方式，很容易就加載出來了：

<ul class="easyui-tree">
        <li>
            <span>My Documents</span>
            <ul>
                <li data-options="state:'closed'">
                    <span>Photos</span>
                    <ul>
                        <li>
                            <span>Friend</span>
                        </li>
                        <li>
                            <span>Wife</span>
                        </li>
                        <li>
                            <span>Company</span>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Program Files</span>
                    <ul>
                        <li>Intel</li>
                        <li>Java</li>
                        <li>Microsoft Office</li>
                        <li>Games</li>
                    </ul>
                </li>
                <li>index.html</li>
                <li>about.html</li>
                <li>welcome.html</li>
            </ul>
        </li>
    </ul>

第二種，在js中綁定：

 <ul id="myTree"></ul>

$('#myTree').tree({ method: 'get', url: 'tree_data1.json' });

注意：easyui tree獲取數據的HTTP方法默認是post，但是用post的時候卻報了謂詞錯誤， 所以指定了get ----》需要查查，還不了解因果。

三，用data直接綁json：

 $.ajax({ type: 'GET', url: 'tree_data1.json', success: function (result) { var myJson = eval('(' + result + ')'); $('#myTree').tree({ data: myJson }); } });

這種方式綁定下面的這種json數據格式是有效的，但是方法二卻綁不上：

[{ 'text':'.Net','state':'closed','children':[{'text':'C#'},{'text':'asp.Net'}]},{'text':'Java'}]

 一般最好用雙引號

第四種：與第二種js綁定其實都是一樣的只是寫在元素標簽上了而已

 <ul class=" easyui-tree" data-options=" url:'JsonHandler.ashx'">

JsonHandler.ashx是asp.net中的一般處理文件，輸出json串，當然這個返回的接送數據也要和第二種的json一致，不然還是綁不上

相關參考http://www.zi-han.net/case/easyui/datagrid&tree.html#tree

效果圖：

                                                      

 

 后台根據id獲取多級樹：

創建樹的實體類大概寫了幾個樹常用到的屬性

public class TreeEntity {
    public string id { get; set; }
    public string text { get; set; }
    public string iconCls {
        get { return "icon-group-bank"; }
    }
    public List<TreeEntity> children { get; set; }
 }

一般處理處理程序序列化輸出樹：

  public void ProcessRequest(HttpContext context) {

        Int32 groupId = (Int32)context.Session["LoginUserGroupID2"];
        string groupName = SqlDataHelper.GetGroupNameById(groupId);

        List<TreeEntity> list = new List<TreeEntity>();
        list.Add(new TreeEntity() {
            id = groupId.ToString(),
            text = groupName,
            children = GetTreeChildren(groupId)
        });
        string responseString = ClassHelper.ObjectToJSON(list);//序列化樹實例
        context.Response.ContentType = "text/plain";
        context.Response.Write(responseString);
    }
    /// <summary>
    /// 根據ID獲取子節點對象
    /// </summary>
    /// <param name="groupId"></param>
    /// <returns></returns>
    private static List<TreeEntity> GetTreeChildren(Int32 groupId) {
        List<GroupEntity> groupList = SqlDataHelper.GetUserGroupsById(groupId);
        List<TreeEntity> treeList = new List<TreeEntity>();
        if (groupList.Count < 1) {
            return null;
        }
        else {
            for (int i = 0; i < groupList.Count; i++) {
                TreeEntity tree = new TreeEntity();
                tree.id = groupList[i].GroupID.ToString();
                tree.text = groupList[i].GroupName;
                tree.children = GetTreeChildren(groupList[i].GroupID);
                treeList.Add(tree);
            }
            return treeList;
        }
    }