@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section header
    {
    <link rel="stylesheet" href="/css/treetable.css" />
}
第一步:html
    <pre class="layui-code" lay-title="cshtml" lay-skin="notepad">
&lt;div id="listForm" class="layui-tab-item layui-show"&gt;
    &lt;div id="ImportData" style="padding: 60px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;display: none;"&gt;
        **导入区域
    &lt;/div&gt;
    &lt;form class="layui-form layui-form-pane" action="" lay-filter="listForm"&gt;
        &lt;div class="layui-form-item" id="panelSearch" hidden&gt;
            **主表检索区域

            &lt;div class="layui-col-sm6"&gt;
            &lt;label class="layui-form-label layui-col-sm3"&gt;样式属性&lt;/label&gt;
            &lt;div class="layui-input-inline layui-col-sm6"&gt;
                **检索区的 下拉框绑值的html规则：v-model,data-model相同,name在前面加q；class='Selector'， lay-filter="qform"
                &lt;select name="qCssClass" v-model="CssClass" data-model="CssClass" class="Selector" lay-filter="qform"&gt;&lt;/select&gt;
            &lt;/div&gt;

        &lt;/div&gt;
        &lt;/div&gt;

        &lt;table id="mainList" class="layui-table"
               lay-data="{height: '450', cellMinWidth: 80, page:true, id:'mainList', limit: 10, limits: [10, 50, 100, 200, 500, 1000], defaultToolbar: ['filter'], toolbar: '#toolbarTable'}"
               lay-filter="mainList" lay-size="sm"&gt;
            &lt;thead&gt;
                **主表表格区域
                **表格内容转译定义:增加templet属性定义如下：'WarehouseType'是v-model值，'DictValue'是保存的字段，'DictLabel'是显示的字段，d.WarehouseType 是 要转译的栏位
                &lt;th lay-data="{field:'WarehouseType', width:100, sort: true, fixed: false, hide: false, templet: function(d){return GetLabel('WarehouseType', 'DictValue', 'DictLabel', d.WarehouseType)}}"&gt;仓库&lt;/th&gt;
            &lt;/thead&gt;
        &lt;/table&gt;
        
        &lt;script type="text/html" id="toolbarTable"&gt;
            **主表工具栏区域
        &lt;/script&gt;
	
	//此处增加折叠控件
        &lt;div class="layui-collapse" lay-filter="DisplayDtl"&gt;
	    //此处增加子表折叠项,id命名规则:'DisplayDtl' + 表名
            &lt;div class="layui-colla-item" style="display:none" id="DisplayDtlSysDictData"&gt;
		//此处是折叠项的标题，id命名规则:'itle_' + 表名
                &lt;h2 class="layui-colla-title" id="title_SysDictData"&gt;字典明细&lt;/h2&gt;
                &lt;div class="layui-colla-content"&gt;
		    //此处是子表表格区域，id命名规则:'mainListDtl' + 表名，三个地方（table的id和lay-filter, lay-data的id）
                    &lt;table id="mainListDtlSysDictData" class="layui-table"
                           lay-data="{height: '400', cellMinWidth: 80, page:true, id:'mainListDtlSysDictData', limit: 8, limits: [8, 50, 100, 200, 500, 1000], defaultToolbar: ['filter'], toolbar: '#toolbarTableSysDictData'}"
                           lay-filter="mainListDtlSysDictData" lay-size="sm"&gt;
                        &lt;thead&gt;
                            **子表表格区域,子表id命名规则：'mainListDtl' + 表名，三个地方（table的id和lay-filter, lay-data的id）
                        &lt;/thead&gt;
                    &lt;/table&gt;
                    &lt;script type="text/html" id="toolbarTableSysDictData"&gt;
                        **子表工具栏区域
                    &lt;/script&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;

&lt;div id="modifyForm" class="layui-tab-item"&gt;
    **主表编辑区域
&lt;/div&gt;
&lt;div id="modifyFormDtl_SysDictData" class="layui-tab-item"&gt;
    &lt;form class="layui-form layui-form-pane" action="" lay-filter="modifyFormDtl_SysDictData"&gt;
        **子表编辑区域，最外层div容器id命名规则：'modifyFormDtl_' + 表名， form的lay-filter命名规则一样
        &lt;div class="layui-col-sm6"&gt;
            &lt;label class="layui-form-label layui-col-sm3"&gt;样式属性&lt;/label&gt;
            &lt;div class="layui-input-inline layui-col-sm6"&gt;
                **编辑区的 下拉框绑值的html规则：name,v-model,data-model相同；class定义：'Selector_' + 表名 + 空格 + 'ClearSelector_' + 表名， lay-filter="eform"
                &lt;select name="CssClass" v-model="CssClass" data-model="CssClass" class="Selector_SysDictData ClearSelector_SysDictData" lay-filter="eform"&gt;&lt;/select&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;
&lt;/div&gt;
</pre>
第二步:js
    <pre class="layui-code" lay-title="js" lay-skin="notepad">
    //此为加载主表数据
    Universal.mmain(AreaName, TableName, table, layer, element, laydate, $, vm, vmq, EditInfo, selfbtn, mainList, form);
    
    //以下为子表逻辑
    //子表逻辑
    var All = new Array();
    var AreaNameDtlSysDictData = 'base';
    var TableNameDtlSysDictData = 'SysDictData';
    //{子表字段：主表字段}
    var NameDtlSysDictData = { DictType: 'DictType', HeaderId: 'Id' };
    var vmDtlSysDictData = new Vue({
        el: '#modifyFormDtl_' + TableNameDtlSysDictData
    });
    var vmqDtlSysDictData = new Vue({
        data: { DictType: '', HeaderId: '' }
    });
    //编辑
    var EditInfoDtlSysDictData = function (tabledata) {
        data = tabledata;
        vmDtlSysDictData.$set('$data', tabledata);
        var list = {};
        $('.ClearSelector_' + TableNameDtlSysDictData).each(function () {
            var selDom = ($(this));
            if ($(selDom)[0].name.search("q") == -1) {
                list[$(selDom)[0].name] = data[$(selDom)[0].name] + "";
            }
        });
        //表单修改时填充需修改的数据
        form.val('modifyFormDtl_' + TableNameDtlSysDictData, list);
    };

    //此为定义主子表编辑区域的下拉框绑值及表格内容转译的数据源定义
    var selector = {
        'CssClass': {
            SelType: "FromDict",    //FromDict：从字典; FromUrl：从控制器
            SelFrom: "dictCss",     //字典关键字 或 控制器Url地址
            SelModel: "CssClass",   //Model属性名
            SelLabel: "DictLabel",  //显示的字段 或 转译后的字段
            SelValue: "DictValue",  //保存的字段 或 转译前的字段
            Dom: [$("[name='CssClass']"), $("[name='qCssClass']")]
        }
    };

    var vml = new Array({
        vm: vm,
        vmq: vmq,
        vmDtlSysDictData: vmDtlSysDictData,
    });
    
    //此为绑定下拉框数据，以及转译表格内容的方法调用
    Universal.BindSelector($, form, vml, selector);
    //此为加载子表数据
    All.push({ AreaNameDtl: AreaNameDtlSysDictData, TableNameDtl: TableNameDtlSysDictData, vmqDtl: vmqDtlSysDictData, vmDtl: vmDtlSysDictData, EditInfoDtl: EditInfoDtlSysDictData, NameDtl: NameDtlSysDictData });
    Universal.mainDtl(table, layer, element, $, selfbtn, All, form);
</pre>

<script type="text/javascript" src="/layui/layui.js"></script>
<script type="text/javascript" src="/productJs/management/DevelopSOP.js?t=20190920"></script>