来自 前端技术 2019-09-04 19:43 的文章
当前位置: 六合联盟网 > 前端技术 > 正文

懒加载树,开发教程

            图片 1

懒加载树
     图片 2               
参照示例:懒加载树

            

                     
开创代码                   

参照示例:TreeGrid:懒加载    

<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>
     
          
服务端重返数据

                           

[{
    id: "form",
    text: "Form",
    ......
    isLeaf: false,                            //是还是不是叶子节点:+和-号
    expanded: false                            //节点处于降低状态
},
......
]
个中,isLeft 表达此节点是还是不是有下一级节点。expanded 代表此节点处于折叠状态。          
          
懒加载事件         

始建代码

当顾客点击"+"Logo时,会活动加载下顶尖节点,此时会把当前节点id传递到后台,也足以阻碍加载事件,扩大额外属性:

 

function onBeforeTreeLoad(e) {
    var tree = e.sender;    //树控件
    var node = e.node;      //当前节点
    var params = e.params;  //参数对象

<div id="treegrid1" class="mini-treegrid" style="width:600px;height:250px;"     

    //能够传递自定义的属性
    params.myField = "123"; //后台:request对象获得"myField"
}

    url="../data/TreeService.aspx?method=LoadNodes" showTreeIcon="true" textField="text" idField="id" 

          
服务端处理       

    treeColumn="filename" onbeforeload="onBeforeTreeLoad">

服务端通过request获取"id"属性后,加载此节点的下超级节点数组,并由此JSON再次来到。

    <div property="columns">

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

        <div name="filename" field="name" width="150">名称</div>

//获取下超级节点
String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";
ArrayList folders = DBUtil.Select(sql);

        <div field="type" width="100">类型</div>

//决断节点,是或不是有子节点。固然有,则管理isLeaf和expanded。
for (int i = 0, l = folders.Count; i < l; i++)
{
    Hashtable node = (Hashtable)folders[i];
    String nodeId = node["id"].ToString();

        <div field="size" width="100" dateFormat="yyyy-MM-dd">大小</div>

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

        <div 田野同志="createdate" width="100" dateFormat="yyyy-MM-dd">创制日期</div>

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

    </div>

}

</div>

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

          

参照他事他说加以考察示例:懒加载树 创立代码 ul id=tree1 class=mini-tree url=../data/TreeService.aspx?method=LoadNodes style=width:300px;height:200px;padding:5px; showTree...

服务端重临数据

 

[{

    id: "form",

    text: "Form",

    ......

    isLeaf: false,                            //是不是叶子节点:+和-号

    expanded: false                            //节点处于收缩状态

},

......

]

内部,isLeft 表达此节点是不是有下一流节点。expanded 表示此节点处于折叠状态。

            

           

懒加载事件         

 

当客户点击"+"Logo时,会活动加载下一级节点,此时会把当下节点id传递到后台,也足以阻碍加载事件,扩充额外属性:

 

function onBeforeTreeLoad(e) {

    var tree = e.sender;    //树控件

    var node = e.node;      //当前节点

    var params = e.params;  //参数对象

 

    //能够传递自定义的品质

    params.myField = "123"; //后台:request对象获得"my菲尔德"

}

 

           

服务端管理          

 

服务端通过request获取"id"属性后,加载此节点的下一流节点数组,并透过JSON再次回到。

 

String id = Request["id"];

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

 

//获取下一流节点

String sql = "select * from plus_file where pid = '" + id + "' order by updatedate";

ArrayList folders = DBUtil.Select(sql);

 

//推断节点,是还是不是有子节点。如若有,则管理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);

创造代码 div id=treegrid1 class=mini-treegrid style=width:600px;height:250px; url=../data/TreeService.aspx?method=LoadNodes showTreeIcon=tru...

本文由六合联盟网发布于前端技术,转载请注明出处:懒加载树,开发教程

关键词: