C#优化递归树形

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../../Scripts/bootstrap/js/bootstrap/css/bootstrap.css" rel="stylesheet" />
    <link href="../../Scripts/bootstrap/js/bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="../../Scripts/bootstrap/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link href="../../Scripts/bootstrap/js/jquery.treegrid.min.css" rel="stylesheet" />
    <script src="../../Scripts/bootstrap/js/jQuery1.11.3.min.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../Scripts/bootstrap/js/jquery.treegrid.js"></script>
    <script src="../../Scripts/bootstrap/js/bootstrap-table/jquery.treegrid.ajax.js"></script>
    <style>
        tr.checked-item {
            background-color: #d4e1f5 !important;
        }
    </style>
</head>
<body>
    <table id="table"></table>
    <script>
        $(function () {
            var name = parent.$("#FullBodyContent_MainName").val();
            var $table = $("#table");
            $table.myAjaxTreeTable({
                url: 'treegrid.ashx?func=tree',
                ajaxParams: { name: name,type:"sbxj" },
                rootidValue: "",
                striped: true,
                expandColumn: 0,
                columns: [
                    {
                        field: 'name',
                        title: '名称',
                    }, {
                        field: 'step',
                        title: '步骤'
                    }, {
                        field: 'required',
                        title: '关键点'
                    },
                ],
            });
        })

    </script>
</body>
</html>

View Code

ashx：

using Ext.Net;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using XLT.QC.Domain;
using XLT.QC.Entity;

namespace XLT.QC.Web.Admin.RepairAdmin
{
    /// <summary>
    /// treegrid 的摘要说明
    /// </summary>
    public class treegrid : IHttpHandler
    {
        TestingMachineProcessDomain _testDomain = new TestingMachineProcessDomain();
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string func = context.Request["func"];
            switch (func)
            {
                case "tree":
                    getTreeGridData(context);
                    break;
                case "childtree":
                    getChildNodeData(context);
                    break;
                default:
                    break;
            }
        }

        public void getTreeGridData(HttpContext context)
        {
            string type = context.Request["type"];
            string name = context.Request["name"];
            DataSet ds = _testDomain.getNodeData(name,type);
            List<MachineProcess> list = new List<MachineProcess>();
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                MachineProcess entity = new MachineProcess();
                entity.name = ds.Tables[0].Rows[i]["Name"].ToString();
                entity.id = ds.Tables[0].Rows[i]["Id"].ToString();
                entity.pid = ds.Tables[0].Rows[i]["Pid"].ToString();
                if (!string.IsNullOrWhiteSpace(ds.Tables[0].Rows[i]["Step"].ToString()))
                {
                    entity.step = Convert.ToInt32(ds.Tables[0].Rows[i]["Step"]);
                }
                if (!string.IsNullOrWhiteSpace(ds.Tables[0].Rows[i]["Level"].ToString()))
                {
                    entity.level = Convert.ToInt32(ds.Tables[0].Rows[i]["Level"]);
                }
                entity.required = ds.Tables[0].Rows[i]["Required"].ToString();
                entity.isLeaf= true;
                list.Add(entity);
            }
            string jsonStr = JSON.Serialize(list);
            context.Response.Write(jsonStr);
        }

        public void getChildNodeData(HttpContext context) 
        {
            string pid = context.Request["pid"];
            string type = context.Request["type"];
            string table = "TestingMachineProcess";
            if (type=="sbxj")
            {
                table = "ArtificialProcess";
            }
            string sql = "select Id,Pid,Name,Step,Level,QualityStandard,Required from " + table + " where Pid='" + pid + "' and (IsValid is null or IsValid=1) order by Step asc";

            DataSet ds = ISS.DataAccess.DbHelper.ExecuteDataSetBySql(sql);
            List<MachineProcess> list = new List<MachineProcess>();
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
                MachineProcess entity = new MachineProcess();
                entity.name = ds.Tables[0].Rows[i]["Name"].ToString();
                entity.id = ds.Tables[0].Rows[i]["Id"].ToString();
                entity.pid = ds.Tables[0].Rows[i]["Pid"].ToString();
                if (!string.IsNullOrWhiteSpace(ds.Tables[0].Rows[i]["Step"].ToString()))
                {
                    entity.step = Convert.ToInt32(ds.Tables[0].Rows[i]["Step"]);
                }
                if (!string.IsNullOrWhiteSpace(ds.Tables[0].Rows[i]["Level"].ToString()))
                {
                    entity.level = Convert.ToInt32(ds.Tables[0].Rows[i]["Level"]);
                }
                entity.required = ds.Tables[0].Rows[i]["Required"].ToString();

                IDataReader dr = ISS.DataAccess.DbHelper.ExecuteReaderBySql("select COUNT(1) num from TestingMachineProcess where Pid='" + entity.id + "' ");
                if (dr.Read())
                {
                    if (Convert.ToInt32(dr["num"].ToString()) > 0)
                    {
                        entity.isLeaf = true;

                    }
                    else
                    {
                        entity.isLeaf = false;
                    }
                }
                
                dr.Close();
                dr.Dispose();
                list.Add(entity);
            }
            
            string jsonStr = JSON.Serialize(list);
            context.Response.Write(jsonStr);
        }
        public class MachineProcess 
        {
            public string id { get; set; }

            /// <summary>
            /// 父节点
            /// </summary>
            public string pid { get; set; }

            /// <summary>
            /// 名称
            /// </summary>
            public string name { get; set; }

            /// <summary>
            /// 步骤
            /// </summary>
            public int step { get; set; }

            /// <summary>
            /// 级别
            /// </summary>
            public int level { get; set; }

            /// <summary>
            /// 质量标准说明
            /// </summary>
            //public string QualityStandard { get; set; }

            /// <summary>
            /// 
            /// </summary>
            public bool isLeaf { get; set; }

            /// <summary>
            /// 关键点
            /// </summary>
            public string required { get; set; }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

js：

(function ($) {
    "use strict";

    $.fn.myAjaxTreeTable = function (options, param) {
        // 如果是调用方法
        if (typeof options == 'string') {
            return $.fn.myAjaxTreeTable.methods[options](this, param);
        }

        // 如果是初始化组件
        options = $.extend({}, $.fn.myAjaxTreeTable.defaults, options || {});
        // 是否有radio或checkbox
        var hasSelectItem = false;
        var target = $(this);
        // 在外层包装一下div，样式用的bootstrap-table的
        var _main_div = $("<div class='fixed-table-container'></div>");
        target.before(_main_div);
        _main_div.append(target);
        target.addClass("table table-hover treegrid-table table-bordered");
        if (options.striped) {
            target.addClass('table-striped');
        }
        // 工具条在外层包装一下div，样式用的bootstrap-table的
        if (options.toolbar) {
            var _tool_div = $("<div class='fixed-table-toolbar' style='display:none;'></div>");
            var _tool_left_div = $("<div class='bs-bars pull-left'></div>");
            _tool_left_div.append($(options.toolbar));
            _tool_div.append(_tool_left_div);
            _main_div.before(_tool_div);
        }
        // 得到根节点
        target.getRootNodes = function (data) {

            // 指定Root节点值
            var _root = options.rootidValue ? options.rootidValue : "";
            var result = [];
            $.each(data, function (index, item) {
                // 这里兼容几种常见Root节点写法
                // 默认的几种判断
                var _defaultRootFlag = item[options.pid] == '0'
                    || item[options.pid] == 0
                    || item[options.pid] == null
                    || item[options.pid] == '';
                if (!item[options.pid] || (_root ? (item[options.pid] == options.rootidValue) : _defaultRootFlag)) {
                    result.push(item);
                }
                // 添加一个默认属性，用来判断当前节点有没有被显示
                item.isShow = false;
            });
            return result;
        };
        var j = 0;
        // 递归获取子节点并且设置子节点
        target.getChildNodes = function (data, parentNode, parentIndex, tbody) {
            $.each(data, function (i, item) {
                if (item[options.pid] == parentNode[options.id]) {
                    var tr = $('<tr></tr>');
                    var nowParentIndex = (parentIndex + (j++) + 1);
                    tr.addClass('treegrid-' + nowParentIndex);
                    tr.addClass('treegrid-parent-' + parentIndex);
                    tr.addClass('unknow');
                    tr.attr("isLeaf", item.isLeaf);
                    tr.attr("level", item.level);
                    target.renderRow(tr, item);
                    item.isShow = true;
                    tbody.append(tr);
                    target.getChildNodes(data, item, nowParentIndex, tbody)
                }
            });
        };

        target.renderChildRows = function (data, parentNode, parentIndex, tbody) {
            var html = "";
            var parentNum = $(tbody).attr('class').split(" ")[2];
            $.each(data, function (i, item) {
                var tr = $('<tr></tr>');
                var nowParentIndex = parentIndex;
                tr.addClass('treegrid-' + nowParentIndex + i);
                tr.addClass('treegrid-parent-' + parentIndex);
                tr.addClass('unknow');
                tr.attr("isLeaf", item.isLeaf);
                tr.attr("level", item.level);
                target.renderRow(tr, item);
                item.isShow = true;
                html += tr.get(0).outerHTML;
            });
            tbody.after(html);
        };
        // 行添加内容
        target.renderRow = function (tr, item) {
            $.each(options.columns, function (index, column) {
                // 判断有没有选择列
                if (index == 0 && column.field == 'selectItem') {
                    hasSelectItem = true;
                    var td = $('<td style="text-align:center;width:36px"></td>');
                    if (column.radio) {
                        var _ipt = $('<input name="select_item" type="radio" value="' + item[options.id] + '"></input>');
                        td.append(_ipt);
                    }
                    if (column.checkbox) {
                        var _ipt = $('<input name="select_item" type="checkbox" value="' + item[options.id] + '"></input>');
                        td.append(_ipt);
                    }
                    tr.append(td);
                } else {
                    var html = "<td mainid='" + item[options.id] + "' style='text-align:left;'>";
                    var level = parseInt(item.level);
                    if (index == 0) {
                        if (item.pid != "") {
                            for (var i = 0; i < level; i++) {
                                html += "<span class='treegrid-indent'></span>";
                            }
                        }
                        html += "<span class='treegrid-expander'></span>" + item[column.field] + "</td>";
                    }
                    else {
                        html += item[column.field] + "</td>";
                    }

                    // 增加formatter渲染
                    if (column.formatter) {
                        td.html(column.formatter.call(this, item, index));
                    }
                    tr.append($(html));
                }
            });
        }
        // 加载数据
        target.load = function (parms) {
            // 加载数据前先清空
            target.html("");
            // 构造表头
            var thr = $('<tr></tr>');
            $.each(options.columns, function (i, item) {
                var th = null;
                // 判断有没有选择列
                if (i == 0 && item.field == 'selectItem') {
                    hasSelectItem = true;
                    th = $('<th style="text-align:' + item.valign + ';width:36px"></th>');
                } else {
                    th = $('<th style="text-align:' + item.valign + ';padding:10px;' + ((item.width) ? ('width:' + item.width) : '') + '"></th>');
                }
                th.text(item.title);
                thr.append(th);
            });
            var thead = $('<thead class="treegrid-thead"></thead>');
            thead.append(thr);
            target.append(thead);
            // 构造表体
            var tbody = $('<tbody class="treegrid-tbody"></tbody>');
            target.append(tbody);
            // 添加加载loading
            var _loading = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">正在努力地加载数据中，请稍候……</div></td></tr>'
            tbody.html(_loading);
            // 默认高度
            if (options.height) {
                tbody.css("height", options.height);
            }
            $.ajax({
                type: options.type,
                url: options.url,
                data: parms ? parms : options.ajaxParams,
                dataType: "JSON",
                success: function (data, textStatus, jqXHR) {
                    // 加载完数据先清空
                    tbody.html("");
                    if (!data || data.length <= 0) {
                        var _empty = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">没有记录</div></td></tr>'
                        tbody.html(_empty);
                        return;
                    }
                    var rootNode = target.getRootNodes(data);
                    //console.log(rootNode);
                    $.each(rootNode, function (i, item) {
                        var tr = $('<tr></tr>');
                        tr.addClass('treegrid-' + (j + "_" + i));
                        tr.attr('load', 'true');
                        tr.attr('level', item.level);
                        tr.addClass('unknow');
                        tr.addClass('tree_rootnode');
                        target.renderRow(tr, item);

                        item.isShow = true;
                        tbody.append(tr);
                        target.getChildNodes(data, item, (j + "_" + i), tbody);
                    });
                    target.append(tbody);
                    // 初始化treegrid bug
                    //target.treegrid({
                    //    treeColumn: options.expandColumn ? options.expandColumn : (hasSelectItem ? 1 : 0),//如果有radio或checkbox默认第二列层级显示，当前是在用户未设置的提前下
                    //    expanderExpandedClass: options.expanderExpandedClass,
                    //    expanderCollapsedClass: options.expanderCollapsedClass
                    //});
                    //if (!options.expandAll) {
                    //    target.treegrid('collapseAll');
                    //}
                    $(".treegrid-tbody").find("tr:not(.tree_rootnode)").hide();
                    target.repainExpends();
                },
                error: function (xhr, textStatus) {
                    var _errorMsg = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">' + xhr.responseText + '</div></td></tr>'
                    tbody.html(_errorMsg);
                }
            });
        }
        /***  初始化图标 ***/
        target.repainExpends = function (tr, reset) {
            var trExpends;
            if (tr) {
                var str = tr.attr('class').split(" ")[0].split("-")[1];
                var cls = "treegrid-parent-" + str;
                trExpends = target.find("tr." + cls);
            }
            else {
                trExpends = target.find("tr");
            }
            /*
            *  isleaf 是否有子数据
            *  load   是否已加载子数据
            */
            if (reset == "true") {
                $.each(trExpends, function (index, item) {
                    if ($(item).attr('isLeaf') == 'true') {
                        $(item).find("span:last-child").removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right').addClass('glyphicon');

                    }
                });
            }
            else {
                $.each(trExpends, function (index, item) {
                    if ($(item).attr('isLeaf') == 'true' && $(item).attr('load') != 'true') {
                        $(item).find("span:last-child").removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right').addClass('glyphicon'); //收缩
                    }
                    else if ($(item).attr('isLeaf') == 'true' && $(item).attr('load') == 'true') {
                        $(item).find("span:last-child").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right').addClass('glyphicon'); //展开
                    }
                    else {
                        if ($(item).hasClass('tree_rootnode')) {
                            $(item).find("span:last-child").removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right').addClass('glyphicon'); //收缩
                        } else {
                            $(item).find("span:last-child").removeClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-right');  //删除图标

                        }
                    }
                });
            }
        }
        /****** 加载子节点数据 start ***************/
        target.loadChilds = function (parentTR, parms) {
            debugger;
            var tbody = $(parentTR).parents(".treegrid-tbody");
            parms = $.extend({}, parms, options.ajaxParams);
            $.ajax({
                type: options.type,
                url: "handler/DeviceMaintainService.ashx?function=childtree",
                data: parms,
                dataType: "JSON",
                success: function (data, textStatus, jqXHR) {
                    var _tr = target.find(".treegrid-" + parms.parentIndex);
                    _tr.attr('load', 'true');
                    target.renderChildRows(data, { "mainId": parms.pid }, parms.parentIndex, _tr);
                    parentTR.removeClass('unknow').addClass('know');
                    target.repainExpends(parentTR);
                },
                error: function (xhr, textStatus) {
                    var _errorMsg = '<tr><td colspan="' + options.columns.length + '"><div style="display: block;text-align: center;">' + xhr.responseText + '</div></td></tr>'
                    tbody.html(_errorMsg);
                },
            });
        }
        /****** 加载子节点数据 end ***************/
        /*自定义扩展方法*/
        var customMethod = {
            collapseNode: function (parentTr) {
                var parentNum = parentTr.attr('class').split(" ")[0].split("-")[1];
                var childCls = "treegrid-parent-" + parentNum;
                var child = $("tr." + childCls);
                if (child.length > 0) {
                    child.hide();
                    for (var i = 0; i < child.length; i++) {
                        if (child.eq(i).attr("isleaf") == "true") {
                            child.eq(i).find("span.treegrid-expander").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
                        }
                        this.collapseNode(child.eq(i));
                    }
                }
            },
            expandNode: function (parentTr) {
                var parentNum = parentTr.attr('class').split(" ")[0].split("-")[1];
                var childCls = "treegrid-parent-" + parentNum;
                var child = $("tr." + childCls);
                if (child.length > 0) {
                    child.show();
                    for (var i = 0; i < child.length; i++) {
                        if (child.eq(i).attr("isleaf") == "true") {
                            child.eq(i).find("span.treegrid-expander").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
                        }
                        //this.expandNode(child.eq(i));
                    }
                }
            }
        }
        /*初始加载树数据*/
        if (options.url) {
            target.load();
        } else {
            // 通过data属性传递一个数据集合对组件进行初始化,
        }

        /*图标事件绑定*/
        $(document).on('click', 'span.glyphicon-chevron-right', function (e) {
            //console.log("right");
            if ($(this).parent().parent().attr('load') != 'true') {
                //console.log("loadchildren函数下节点图标绑定的事件触发了");
                $(this).removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
                $(this).parent().parent().addClass("expand").removeClass("collaps");
                target.loadChilds(
                    $(this).parent().parent(),
                    {
                        "pid": $(this).parent().attr('mainid'),
                        "parentIndex": $(this).parent().parent().attr('class').split(" ")[0].split("-")[1],
                        "nowParentIndex": $(this).parent().parent().attr('class').split(" ")[0].split("-")[0]
                    });
            }
            else {
                var parentTr = $(this).parent().parent();
                //var level = parentTr.attr("level");
                //var parentNum = parentTr.attr('class').split(" ")[0].split("-")[1];
                //var childCls = "treegrid-parent-" + parentNum;
                //var child = $("tr." + childCls);
                //if (level == "0" || $(this).parent().parent().hasClass("tree_rootnode")) { //根节点
                //    $(".treegrid-tbody").find("tr:not(.tree_rootnode)").show();                  
                //}
                //else {
                //    child.show();
                //}
                customMethod.expandNode(parentTr);
                $(this).removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
                $(this).parent().parent().addClass("expand").removeClass("collaps");
                //直属子级图标初始化统一为right
                target.repainExpends(parentTr, "true");
            }
            e.stopPropagation();
        });

        $(document).on('click', 'span.glyphicon-chevron-down', function (e) {
            //console.log("down");
            if ($(this).parent().parent().hasClass("expand")) {
                //获取选中行
                var parentTr = $(this).parent().parent();
                //var level = parentTr.attr("level");
                //if (level == "0" || $(this).parent().parent().hasClass("tree_rootnode")) {
                //    $(".treegrid-tbody").find("tr:not(.tree_rootnode)").hide();
                //}
                //else {
                customMethod.collapseNode(parentTr);
                //}
                console.log(parentTr);
            }
            else {

            }
            $(this).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
            $(this).parent().parent().addClass("collaps").removeClass("expand");
            e.stopPropagation();
        });

        $(document).on('click', '.treegrid-tbody tr', function () {
            $(".treegrid-tbody tr").removeClass("checked-item");
            var id = $(this).children(0).attr("mainid");
            $(this).addClass("checked-item");
            parent.$("#FullBodyContent_hdSelectedNodeId").val(id);
            $("#treeId").val(id);
        })
        return target;
    };



    // 组件方法封装
    $.fn.myAjaxTreeTable.methods = {
        // 返回选中记录的id
        getSelections: function (target) {
            var _ipt = target.find("tbody").find("tr").find("input[name='select_item']:checked");
            var chk_value = [];
            if (_ipt.attr("type") == "radio") {
                chk_value.push({ id: _ipt.val() });
            } else {
                _ipt.each(function (_i, _item) {
                    chk_value.push({ id: $(_item).val() });
                });
            }
            return chk_value;
        },
        // 刷新记录
        refresh: function (target, parms) {
            if (parms) {
                target.load(parms);
            } else {
                target.load();
            }
        },
        // 重置表格视图
        resetHeight: function (target, height) {
            target.find("tbody").css("height", height + 'px');
        }
    };

    $.fn.myAjaxTreeTable.defaults = {
        id: 'id',// 选取记录返回的值
        pid: 'pid',// 用于设置父子关系
        rootidValue: null,//设置根节点id值----可指定根节点，默认为null,"",0,"0"
        data: [], // 构造table的数据集合,本地测试可以设置具体数据
        type: "GET", // 请求数据的ajax类型
        url: null, // 请求数据的ajax的url
        ajaxParams: {}, // 请求数据的ajax的data属性
        expandColumn: null,// 在哪一列上面显示展开按钮
        expandAll: false, // 是否全部展开
        striped: false, // 是否各行渐变色
        columns: [],
        toolbar: null,//顶部工具条
        height: 0,
        expanderExpandedClass: 'glyphicon glyphicon-chevron-down',// 展开的按钮的图标
        expanderCollapsedClass: 'glyphicon glyphicon-chevron-right'// 缩起的按钮的图标
    };
})(jQuery);

效果图：

posted on 2018-09-11 11:19 niesiao 阅读(925) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

公告

C#优化递归树形