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

好记性不如烂笔头。

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

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

webservice中配置：

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

sql 语句：

  sql.Append("select * from(");

                 sql.Append(@"SELECT
                                                 row_number () OVER (

                                                     ORDER BY
                                                         CAST
         (a.SHOWINDEX AS NUMERIC(18, 0)) ASC
                                                 ) AS rn,
                                                 a.LAID,
                                                 a.LABEL,
                                                 b.LABEL AS parent,
                                                 a.BELONINGLABLE,
                                                 a.SHOWINDEX
                                             FROM
                                                 TB_LABEL a
                                             LEFT JOIN TB_LABEL b ON b.LAID = a.BELONINGLABLE
                                             WHERE
                                                 (
                                                     a.LABEL LIKE @bqm
                                                     OR (
                                                         SELECT
                                                             COUNT (1)
                                                         FROM
                                                             TB_LABEL c
                                                         WHERE
                                                             c.BELONINGLABLE = a.LAID
                                                         AND c.LABEL LIKE @bqm
                                                     ) > 0
                                                 )
                                             ");
                 sql.Append(") t where rn between @rn1 and @rn2");

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

 using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Web;

 namespace Web
 {
     public static class treetable
     {

         public static List<Web.WebService.index.label> resultNodes = new List<Web.WebService.index.label>();//树形结构排序之后list内容
         public static List<Web.WebService.index.label> nodes; //传入list参数

         public static List<Web.WebService.index.label> TreeLists(List<Web.WebService.index.label> WYGLTableModelList)
         {
             resultNodes.Clear();  ///清空 上一次 的 返回数组
             nodes = WYGLTableModelList;
             for (int i = ; i < nodes.Count; i++)
             {
                 String id = nodes[i].UNITID;
                 if (nodes[i].UNITNAME == "")
                 {//通过循环一级节点 就可以通过递归获取二级以下节点
                     resultNodes.Add(nodes[i]);//添加一级节点
                     build(nodes[i]);//递归获取二级、三级、。。。节点
                 }
             }

             return resultNodes;
         }

         /**
          * 递归循环子节点
          *
          * @param node 当前节点
          */
         private static void build(Web.WebService.index.label node)
         {
             List<Web.WebService.index.label> children = getChildren(node);
             if (children.Count > )
             {//如果存在子节点
                 foreach (Web.WebService.index.label child in children)
                 {//将子节点遍历加入返回值中
                     resultNodes.Add(child);
                     build(child);
                 }
             }
         }
         /**
          * @param node
          * @return 返回
          */
         private static List<Web.WebService.index.label> getChildren(Web.WebService.index.label node)
         {
             List<Web.WebService.index.label> children = new List<Web.WebService.index.label>();
             String id = node.UNITID;
             foreach (Web.WebService.index.label child in nodes)
             {
                 if (id == (child.UNITNAME))
                 {//如果id等于父id
                     children.Add(child);//将该节点加入循环列表中
                 }
             }
             return children;
         }

     }
 }

将组织好的数据发送到前端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" onclick="updateBind(\'' + a + ';' + sss[i].BELONGDPTID + '\')"><img src="./images/icon-edit.png" alt="修改"></a><a class="btn" onclick="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" onclick="updateBind(\'' + a + ';' + sss[i].BELONGDPTID + '\')"><img src="./images/icon-edit.png" alt="修改"></a><a class="btn" onclick="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文件
        等（忘了<^-^>）