subGrid 多级表格

效果图

html部分

<table id="list2"></table>
<div id="gridpager2"></div>

js部分

<script type="text/javascript">
    
    $(document).ready(function() {
        // ‘use strict‘;
        var myJSONObject = { "list": [
                {
                    "id":"m1",
                    "modelcode": "model-money",
                    "edition": "原件",
                    "faren": "云南省农信信用社",
                    "product": "消费贷",
                    "itemcode": "hyzk",
                    "itemname": "婚姻状况",
                    "score": "0.99",
                    "attribute": [
                        {"id": "m1_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},

                    ]

                },{
                    "id":"m2",
                    "modelcode": "model-money",
                    "edition": "原件",
                    "faren": "云南省农信信用社",
                    "product": "消费贷",
                    "itemcode": "hyzk",
                    "itemname": "婚姻状况",
                    "score": "0.99",
                    "attribute": [
                        {"id": "m2_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
                        {"id": "m2_s2","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},

                    ]

                },{
                    "id":"m3",
                    "modelcode": "model-money",
                    "edition": "原件",
                    "faren": "云南省农信信用社",
                    "product": "消费贷",
                    "itemcode": "hyzk",
                    "itemname": "婚姻状况",
                    "score": "0.99",
                    "attribute": [
                        {"id": "m3_s1","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},
                        {"id": "m2_s2","modelcode": "model-money","edition": "原件", "faren": "云南省农信信用社", "product": "消费贷","itemcode": "hyzk", "yinzicode": "hyzk-4","yinziname": "已婚", "score": "0.8"},

                    ]

                },
            ]
        };


        jQuery("#list2").jqGrid({
            datastr : myJSONObject,
            datatype: ‘jsonstring‘,
            colNames:[‘模型代码‘,‘版本类型‘, ‘法人机构‘,‘产品类型‘,‘评分项目代码‘,‘评分项目名称‘,‘分值‘,‘操作‘],
            colModel:[
                {name:‘modelcode‘,index:‘mxdm‘, width:90},
                {name:‘edition‘,index:‘edition‘, width:100},
                {name:‘faren‘,index:‘faren‘, width:100},
                {name:‘product‘,index:‘product‘, width:100},
                {name:‘itemcode‘,index:‘itemcode‘, width:100},
                {name:‘itemname‘,index:‘itemname‘, width:100},
                {name:‘score‘,index:‘score‘, width:100},
                {name:‘handle‘,index:‘handle‘, width:100,
                    formatter: formatContext
                }
            ],
            pager : ‘#gridpager2‘,
            rowNum:10,
            scrollOffset:0,
            height: ‘auto‘,
            autowidth:true,
            viewrecords: true,
            gridview: true,
            jsonReader: {
                repeatitems: false,
                page: function() { return 1; },
                root: "list"
            },
            subGrid: true,
            subGridRowExpanded: function(subgrid_id, row_id) {
                var subgrid_table_id, pager_id, iData = -1;
                subgrid_table_id = subgrid_id+"_t";
                pager_id = "p_"+subgrid_table_id;
                $("#"+subgrid_id).html("<div style=‘margin :0 20px 20px 20px‘><table id=‘"+subgrid_table_id+"‘ class=‘scroll‘></table></div>");
                $.each(myJSONObject.list,function(i,item){
                    if(item.id === row_id) {
                        iData = i;
                        return false;
                    }
                });
                if (iData == -1) {
                    return; // no data for the subgrid
                }
                jQuery("#"+subgrid_table_id).jqGrid({
                    datastr : myJSONObject.list[iData],
                    datatype: ‘jsonstring‘,
                    colNames: [‘模型代码‘,‘版本类型‘, ‘法人机构‘,‘产品类型‘,‘评分项目代码‘,‘评分因子代码‘,‘评分因子名称‘,‘分值‘,‘操作‘],
                    colModel: [
                        {name:‘modelcode‘,index:‘mxdm‘, width:90},
                        {name:‘edition‘,index:‘edition‘, width:100},
                        {name:‘faren‘,index:‘faren‘, width:100},
                        {name:‘product‘,index:‘product‘, width:100},
                        {name:‘itemcode‘,index:‘itemcode‘, width:100},
                        {name:‘yinzicode‘,index:‘itemcode‘, width:100},
                        {name:‘yinziname‘,index:‘itemname‘, width:100},
                        {name:‘score‘,index:‘score‘, width:100},
                        {name:‘handle‘,index:‘handle‘, width:100,
                            formatter: formatContext1
                        }
                    ],
                    rowNum:20,
                    // pager: pager_id,
                    sortname: ‘name‘,
                    sortorder: "asc",
                    height: ‘auto‘,
                    autowidth:true,
                    jsonReader: {
                        repeatitems: false,
                        page: function() { return 1; },
                        root: "attribute"
                    }
                });
                jQuery("#"+subgrid_table_id).jqGrid(‘navGrid‘,"#"+pager_id,{edit:false,add:false,del:false});
            }
        });
    });
    function formatContext( cellvalue, options, rowObject ){
        var id = options.rowId;
        return ‘<span class="handle" onclick="edit(this)">编辑</span><em class="marLR">|</em><span class="handle" onclick="deleteApply(this)">删除</span>‘;
    }
    function formatContext1( cellvalue, options, rowObject ){
        var id = options.rowId;
        return ‘<span class="handle" onclick="edit(this)">编辑</span><em class="marLR">|</em><span class="handle" onclick="deleteApply(this)">删除</span>‘;
    }
</script>

subGrid 多级表格

原文：https://www.cnblogs.com/required/p/10483442.html