treetable--.net webform中树形table表管理的应用

最新推荐文章于 2023-03-26 16:30:53 发布

weixin_30379973

最新推荐文章于 2023-03-26 16:30:53 发布

阅读量169

点赞数

原文链接：http://www.cnblogs.com/fishyues/p/8006326.html

版权

好记性不如烂笔头。

treetable 官网：http://ludo.cubicphuse.nl/jquery-treetable/#api

今天要做一个关于table的树节点展示，还有编辑，删除功能，找了一堆的代码，终于完成了。先奉上完成后图片：

webservice中配置：

因为有查询节点功能，所以sql语句中要保证当查询子节点时可以获取到父节点中的数据：

sql 语句：

 1  sql.Append("select * from(");
 2 
 3                 sql.Append(@"SELECT
 4                                                 row_number () OVER (
 5 
 6                                                     ORDER BY
 7                                                         CAST 
 8         (a.SHOWINDEX AS NUMERIC(18, 0)) ASC
 9                                                 ) AS rn,
10                                                 a.LAID,
11                                                 a.LABEL,
12                                                 b.LABEL AS parent,
13                                                 a.BELONINGLABLE,
14                                                 a.SHOWINDEX
15                                             FROM
16                                                 TB_LABEL a
17                                             LEFT JOIN TB_LABEL b ON b.LAID = a.BELONINGLABLE
18                                             WHERE
19                                                 (
20                                                     a.LABEL LIKE @bqm
21                                                     OR (
22                                                         SELECT
23                                                             COUNT (1)
24                                                         FROM
25                                                             TB_LABEL c
26                                                         WHERE
27                                                             c.BELONINGLABLE = a.LAID
28                                                         AND c.LABEL LIKE @bqm
29                                                     ) > 0
30                                                 )
31                                             ");
32                 sql.Append(") t where rn between @rn1 and @rn2");

将获取的值(list型)排序排成父节点在前，其子节点在后的顺序，偏于前台展示：

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace Web
 7 {
 8     public static class treetable
 9     {
10 
11         public static List<Web.WebService.index.label> resultNodes = new List<Web.WebService.index.label>();//树形结构排序之后list内容
12         public static List<Web.WebService.index.label> nodes; //传入list参数
13 
14         public static List<Web.WebService.index.label> TreeLists(List<Web.WebService.index.label> WYGLTableModelList)
15         {
16             resultNodes.Clear();  ///清空 上一次 的 返回数组
17             nodes = WYGLTableModelList;
18             for (int i = 0; i < nodes.Count; i++)
19             {
20                 String id = nodes[i].UNITID;
21                 if (nodes[i].UNITNAME == "")
22                 {//通过循环一级节点 就可以通过递归获取二级以下节点
23                     resultNodes.Add(nodes[i]);//添加一级节点
24                     build(nodes[i]);//递归获取二级、三级、。。。节点
25                 }
26             }
27 
28 
29             return resultNodes;
30         }
31 
32         /**
33          * 递归循环子节点
34          *
35          * @param node 当前节点
36          */
37         private static void build(Web.WebService.index.label node)
38         {
39             List<Web.WebService.index.label> children = getChildren(node);
40             if (children.Count > 0)
41             {//如果存在子节点
42                 foreach (Web.WebService.index.label child in children)
43                 {//将子节点遍历加入返回值中
44                     resultNodes.Add(child);
45                     build(child);
46                 }
47             }
48         }
49         /**
50          * @param node
51          * @return 返回
52          */
53         private static List<Web.WebService.index.label> getChildren(Web.WebService.index.label node)
54         {
55             List<Web.WebService.index.label> children = new List<Web.WebService.index.label>();
56             String id = node.UNITID;
57             foreach (Web.WebService.index.label child in nodes)
58             {
59                 if (id == (child.UNITNAME))
60                 {//如果id等于父id
61                     children.Add(child);//将该节点加入循环列表中
62                 }
63             }
64             return children;
65         }
66 
67     }
68 }

将组织好的数据发送到前端js 进行处理：

 $.ajax({

            url: WebService + "/Query_biaoqian_data",
            type: "post",

            dataType: "json",
            data: '{bqm:"'+bqm +'"}',

            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                var bok = data.d;
                var obj = JSON.parse(bok);
                dataLength = obj.rows.length;
                if (dataLength > 0) {
                    var sss = obj.rows;
                    var html = "<tbody><tr><td style='width:40%'>名称</td><td style='width:30%'>排序</td><td>操作</td></tr>";
                    for (var i = 0; i < dataLength; i++) {



                        var a = sss[i].UNITID;
                        var b = sss[i].UNITNAME;
                        var content = sss[i].BELONGDPTID;
                        if (b) {
                            html += '<tr data-tt-id="' + a + '" data-tt-parent-id="' + b + '"><td style="width:40%">' + content + '</td><td style="width:30%">' + sss[i].SHOWINDEX + '</td><td><a class="btn" data-toggle="modal" data-target="#add_gl" data-whatever="@biaoqiangl_xg" οnclick="updateBind(\'' + a + ';' + sss[i].BELONGDPTID + '\')"><img src="./images/icon-edit.png" alt="修改"></a><a class="btn" οnclick="deletes(\'' + a + '\')"><img src="./images/icon-gn_17.png" alt="删除"></a></td></tr>';
                        }
                        else {
                            html += '<tr data-tt-id="' + a + '"><td style="width:40%">' + content + '</td><td style="width:30%";>' + sss[i].SHOWINDEX + '</td><td><a class="btn" data-toggle="modal" data-target="#add_gl" data-whatever="@biaoqiangl_xg" οnclick="updateBind(\'' + a + ';' + sss[i].BELONGDPTID + '\')"><img src="./images/icon-edit.png" alt="修改"></a><a class="btn" οnclick="deletes(\'' + a + '\')"><img src="./images/icon-gn_17.png" alt="删除"></a></td></tr>';
                        }
                    }
                    html += "</tbody>";
                    $('#tgProjectCustomer').append(html);

                    loadResource(); ////重新 加载 页面引用  的 js文件



                }

loadResource()开始将 table 转化成 tree—table；

var mouse;
function loadResource() {
    $("link[href='js/treetable/jquery.treetable.theme.default.css']").remove(); ////将页面 引入 的3个js 文件  删除掉，在下面重新 加载
    $("link[href='js/treetable/jquery.treetable.css']").remove();
    $("script[src='js/treetable/jquery.treetable.js']").remove();
    mouse = 0;
                                                              ///每次先做出界面  然后动态加载 3个js 来渲染 table
    loadjscssfile("js/treetable/jquery.treetable.css", "css", dataLength);
    loadjscssfile("js/treetable/jquery.treetable.theme.default.css", "css", dataLength);
    loadjscssfile("js/treetable/jquery.treetable.js", "js", dataLength);

}

function loadjscssfile(filename, filetype, dataLength) {   ///加载 3个 文件


    if (filetype == "js") {
        var fileref = document.createElement('script');
        fileref.setAttribute("type", "text/javascript");
        fileref.setAttribute("src", filename);
        mouse++;
    } else if (filetype == "css") {
        var fileref = document.createElement('link');
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", filename);
        mouse++;
    }

    if (typeof fileref != "undefined") {
        document.getElementsByTagName("head")[0].appendChild(fileref); ///将 添加的 js文件 加载到 html文件中<script src=""></script>
      
        if (mouse == 3) {  ////当3个 js 动态文件 执行成功后  调用 加载的js 文件里的方法
            $("#tgProjectCustomer").treetable('destroy');  ///当第一次 执行成功后， 再次执行 要清除 上一次的 痕迹
            $("#tgProjectCustomer").treetable({ expandable: true }); //执行  渲染 函数 ，把他 渲染成 树形 table
        }
    }
}

  $("#tgProjectCustomer").treetable('destroy'); 因为我们有查询 会多次 渲染，要把 上次 的 清除掉，否则不会生成treetable 表
到此，大功告成。
参考博客：http://blog.csdn.net/song_de/article/details/38224549   动态tree table jquery插件使用
        http://blog.csdn.net/gaoqiao1988/article/details/9121961   动态加载、移除、替换js/css文件
        等（忘了<^-^>）

转载于:https://www.cnblogs.com/fishyues/p/8006326.html

weixin_30379973

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
treetable--.net webform中树形table表管理的应用

好记性不如烂笔头。treetable 官网：http://ludo.cubicphuse.nl/jquery-treetable/#api今天要做一个关于table的树节点展示，还有编辑，删除功能，找了一堆的代码，终于完成了。先奉上完成后图片：webservice中配置：因为有查询节点功能，所以sql语句中要保证当查询子节点时可以获取到父节点中的数据：sql 语句：...
复制链接

扫一扫