zszq-trs/YLErpWeb/Views/supervise_report/supervisePreview.cshtml

@model List<YLErp.Modules.SuperviseReportModule.SAC.Common.SacInfo>
@{
    Layout = "~/Views/Shared/_LayoutMini.cshtml";
    var pageObj = new
    {
        SacInfoList = Model,
        ShowMessage = ViewBag.ShowMessage,
        ColShow = true,
    };
}
@section JS{
    <script>
        var pageObj = @Html.Raw(pageObj.ToJson());
        var level = 1;
        function formatSubMaps(obj,expanded = true) {
            if (!obj.id) {
                obj["id"] = level+"";
                obj["parent"] = "";
            }
            level++;
            obj["level"] = obj["id"].split('_').length - 1;
            obj["loaded"] = true;
            obj["isLeaf"] = !(obj.SubMaps && obj.SubMaps.length > 0);
            obj["expanded"] = expanded;
            if (obj.SubMaps && obj.SubMaps.length > 0) {
                obj.SubMaps.forEach(function (item) {
                    item["parent"] = obj.id;
                    item["id"] = obj.id + "_" + level;
                    formatSubMaps(item, true);
                    level++;
                });
            }
        }
        function formatToArray(obj) {
            var array = [];
            array.push(obj);
            if (obj.SubMaps) {
                obj.SubMaps.forEach(function (item) {
                    $.merge(array, formatToArray(item));
                });
            }
            return array;
        }
        $(function () {
            debugger;
            var list = [];
            pageObj.SacInfoList.forEach(Obj => {
                formatSubMaps(Obj);
                $.merge(list, formatToArray(Obj));
            })
            pageObj.SacInfoList = list;
            var obj = {
                datatype: 'jsonstring',
                datastr: pageObj,
                height: '660',
                caption: '点击第一列可以展开或折叠',
                colModel: GetColModel(),
                ExpandColClick: true,
                treeGrid: true,
                ExpandColumn: "FieldName_CN",
                treeGridModel: "adjacency",
                jsonReader: {
                    repeatitems: false,
                    root: "SacInfoList"
                },
                gridComplete: function () {
                    $("#loadTip").hide();
                },
            };
            var g_grid = jQuery('#listGrid').jqGrid(obj);
            g_grid.jqGrid('setGroupHeaders', {
                useColSpanStyle: true,
                groupHeaders: [
                    {
                        startColumnName: 'FieldName_CN', numberOfColumns: 4, titleText: '<span style="margin: 0 80px;">接口文档信息</span><a class="aButton" href="#" onclick="foldCol()">折叠列</a>' },
                ]
            });
        })
        function foldCol() {
            var g_grid = jQuery('#listGrid')
            if (pageObj.ColShow) {
                g_grid.hideCol(["FieldLength", "FieldDescription"])
                pageObj.ColShow = false;
                $(".aButton").text("展开列");
            } else {
                g_grid.showCol(["FieldLength", "FieldDescription"])
                pageObj.ColShow = true;
                $(".aButton").text("折叠列");
            }
        }
        function GetColModel() {
            return [
                { name: 'id', label: 'id', width: 150, sortable: false, editable: true, hidden: true, optionHide: true },
                {
                    name: 'FieldName_CN', label: '字段描述', width: 280, sortable: false, editable: true},
                {
                    name: 'FieldName', label: '字段名', width: 280, sortable: false, editable: true,
                    formatter: function (cellValue, options, rowObject) {
                        var result = cellValue;
                        if (rowObject.Index >= 0) {
                            result += "[" + (rowObject.Index) + "]";
                        }
                        return result;
                    } },
                { name: 'FieldLength', label: '长度', width: 80, sortable: false, editable: true },
                {
                    name: 'FieldDescription', label: '说明', width: 280, sortable: false, editable: true, formatter: formatToBr },
                { name: 'FieldValue', label: '值', width: 280, sortable: false, editable: true },
                { name: 'Message', label: '提示信息', width: 280, sortable: false, editable: true, hidden: !pageObj.ShowMessage, optionHide: !pageObj.ShowMessage, formatter: formatToBr },
            ];
        }
        function formatToBr(cellValue, options, rowObject) {
            var result = (cellValue || "").replaceAll("\r\n", "<br />");
            return result;
        }
    </script>
}
<style>
    table tr td:not(:nth-child(2)) {
        white-space: normal !important;
        line-break: anywhere;
        height: auto !important;
    }

    .aButton {
        color: #007bff !important;
        text-decoration: underline !important;
    }

    th, td {
        font: initial !important;
    }

    .tree-wrap .tree-wrap-ltr {
        display: inline-block;
    }

    .ui-icon .ui-icon-document-b .tree-leaf .treeclick {
        position: relative;
    }

    .ui-icon.treeclick .ui-icon-triangle-1-s .tree-minus {
        position: relative;
    }

    .ui-icon .treeclick .ui-icon-triangle-1-e .tree-plus {
        position: relative;
    }

    .ui-jqgrid-bdiv {
        overflow-y: overlay;
    }

    .main-content {
        text-align: center;
    }

    #gbox_listGrid {
        margin: 0px auto;
    }
</style>
@Html.Raw(JqGridSimple.OutTable())
<div id="loadTip"><span>数据加载中,页面可能会卡住,请耐心等待...</span></div>