• 懒加载树[tree]、点击已经加载完成的树[tree]节点,再次加载该节点下一级的所有子节点


    1.先来一个div,如下:[设置:id=treeboxbox_tree,如下]

    <td valign="top">
    <div id="treeboxbox_tree" style=" 100%; height: 100%; float: left
    border: 1px solid red;">
    </div>
    <br>
    </td>

    2.在页面加载后添加如下js代码:[每行代码意思都有解释]

    tree = new dhtmlXTreeObject("treeboxbox_tree", "90%", "100%", 0);//treeboxbox_tree为上面的div的id;
    tree.setSkin('dhx_skyblue'); //设这皮肤
    tree.setImagePath("Dhx/samples/common/images/"); //设这图片的路径;
    tree.enableDragAndDrop(1); //1表明可以drag; 0不可以drag;
    tree.enableTreeLines(false);
    tree.setOnClickHandler(onOneClick);//绑定onOneClick()方法;当单击树的节点是触发click事件;
    tree.setXMLAutoLoading("ResponseXml.ashx");
    tree.loadXML("ResponseXml.ashx?id=0");//请求的一般处理程序,下面将给出源码;?id=0,说明当页面加载的时候请求的是0级的节点集合;

    3.后台一般处理程序如下:

    View Code
     1  /// <summary>
     2     /// ResponseXml 的摘要说明
     3     /// </summary>
     4     public class ResponseXml : IHttpHandler
     5     {
     6         private string id = HttpContext.Current.Request["id"] ?? "";
     7         private bool root = true;
     8 
     9         private Kyt.BLL.base_productclass2 baseProductclass2 = new base_productclass2();
    10 
    11         public void ProcessRequest(HttpContext context)
    12         {
    13             //       context.Response.ContentType = "text/plain";
    14             context.Response.ContentType = "text/html";
    15             XmlDocument document = new XmlDocument();
    16             XmlElement rootEle = document.CreateElement("tree");
    17             XmlDeclaration declaration = document.CreateXmlDeclaration("1.0", "utf-8", "");
    18             document.InsertBefore(declaration, document.DocumentElement);
    19             document.AppendChild(rootEle);
    20             if (id == "0")
    21             {
    22                 rootEle.SetAttribute("id", "0");
    23             }
    24             else
    25             {
    26                 rootEle.SetAttribute("id", id);
    27             }
    28             List<Kyt.Model.base_productclass2> list = listChildren(id);
    29             foreach (var itemList in list)
    30             {
    31                 XmlElement element = document.CreateElement("item");
    32                 element.SetAttribute("text", itemList.mc);
    33                 rootEle.AppendChild(element);
    34                 element.SetAttribute("id", itemList.cpbm);
    35                 if (itemList.sy)
    36                 {//child 为0表明是树叶,为1表明不是树叶
    37                     element.SetAttribute("child", "0");
    38                 }
    39                 else
    40                 {
    41                     element.SetAttribute("child", "1");
    42                 }
    43             }
    44             XmlWriter w = new XmlTextWriter(context.Response.OutputStream, Encoding.UTF8);
    45             document.WriteTo(w);
    46             w.Flush();
    47             w.Close();
    48 
    49             //  document.Save(context.Request.MapPath("test.xml"));
    50             //     context.Response.Write("<script>location='test.xml'</script>");
    51 
    52         }
    53 
    54         /// <summary>
    55         /// 列出写几编码,只列出直接的下级。如果参数为null,列出第一级别;
    56         /// </summary>
    57         /// <param name="cpbm"></param>
    58         /// <returns></returns>
    59         private List<Kyt.Model.base_productclass2> listChildren(string cpbm)
    60         {
    61             Kyt.BLL.base_productclass2 baseProductclass2 = new base_productclass2();
    62             if (cpbm != null)
    63             {
    64                 Kyt.Model.base_productclass2 parent = baseProductclass2.GetModel(cpbm);
    65                 int level = parent.jc.Value + 1;
    66                 return baseProductclass2.GetModelList(" cpbm like '" + cpbm + "%' and jc=" + level.ToString());
    67             }
    68             else
    69             {
    70                 return baseProductclass2.GetModelList("jc=0");
    71             }
    72         }

     4.aspx页面要引用的文件,代码如下:

    <link href="Jquery_ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="../scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Jquery_ui/themes/jquery-ui.js" type="text/javascript"></script>
    <link href="Dhx/codebase/dhtmlxtree.css" rel="stylesheet" type="text/css" />
    <script src="Dhx/codebase/dhtmlxcommon.js" type="text/javascript"></script>
    <script src="Dhx/codebase/dhtmlxtree.js" type="text/javascript"></script>
    dhx资源地址:http://dhtmlx.com/docs/products/dhtmlxTree/的找download,
    至于juqery ui ,就很好找了,在这里就不多说了!
    对于jquery ui 和dhx,找找demo,看看例子,有时候做项目有很大的用处!

    5.要实现的树的结果图,如下:

    当添加、删除、更新一个节点之后,要对该节点刷新-tree.refreshItem(id);//id为要刷新的节点id

  • 相关阅读:
    添加或删除项并动态记录项的值
    练习题。对DOM中document的深刻理解巩固
    document--文档中的操作,操作属性、操作样式、操作元素
    10.13DOM中document--文档1找到元素的方法,还有元素内容属性
    函数的定义,语法,二维数组,几个练习题
    10.11讲的内容总结
    js基础巩固练习
    10.9做的一个静态页面(巩固前面的内容)
    9.29学习的js基础
    9.28做的作业(企业名称静态网页)
  • 原文地址:https://www.cnblogs.com/LpRightNow/p/2878142.html
Copyright © 2020-2023  润新知