grid

參考示例：懶加載樹(shù)

                      

創(chuàng)建代碼                    

<ul id="tree1" class="mini-tree" url="../data/TreeService.aspx?method=LoadNodes" style="width:300px;height:200px;padding:5px;" 
    showTreeIcon="true" textField="name" idField="id" onbeforeload="onBeforeTreeLoad" 
        >        
</ul>

      
           

服務(wù)端返回?cái)?shù)據(jù)

[{
    id: "form",
    text: "Form",
    ......
    isLeaf: false,                            //是否葉子節(jié)點(diǎn)：+和-號(hào)
    expanded: false                            //節(jié)點(diǎn)處于收縮狀態(tài)
},
......
]

其中，isLeft 說(shuō)明此節(jié)點(diǎn)是否有下一級(jí)節(jié)點(diǎn)。expanded 表示此節(jié)點(diǎn)處于折疊狀態(tài)。           
           

懶加載事件          

當(dāng)用戶(hù)點(diǎn)擊"+"圖標(biāo)時(shí)，會(huì)自動(dòng)加載下一級(jí)節(jié)點(diǎn)，此時(shí)會(huì)把當(dāng)前節(jié)點(diǎn)id傳遞到后臺(tái)，也可以攔截加載事件，增加額外屬性：

function onBeforeTreeLoad(e) {
    var tree = e.sender;    //樹(shù)控件
    var node = e.node;      //當(dāng)前節(jié)點(diǎn)
    var params = e.params;  //參數(shù)對(duì)象

    //可以傳遞自定義的屬性
    params.myField = "123"; //后臺(tái)：request對(duì)象獲取"myField"
}

           

服務(wù)端處理        

服務(wù)端通過(guò)request獲取"id"屬性后，加載此節(jié)點(diǎn)的下一級(jí)節(jié)點(diǎn)數(shù)組，并通過(guò)JSON返回。

String id = Request["id"];
if (String.IsNullOrEmpty(id)) id = "-1";

//獲取下一級(jí)節(jié)點(diǎn)
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

//判斷節(jié)點(diǎn)，是否有子節(jié)點(diǎn)。如果有，則處理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
    Hashtable node = (Hashtable)folders[i];
    String nodeId = node["id"].ToString();

    String sql2 = "select * from plus_file where pid = '" + nodeId + "' order by updatedate";
    ArrayList nodes = DBUtil.Select(sql2);

    if (nodes.Count > 0)
    {
        node["isLeaf"] = false;
        node["expanded"] = false;
    }

}

//返回JSON
String json = PluSoft.Utils.JSON.Encode(folders);
Response.Write(json);