Easyui—datagrid嵌套四层

YANG-Live

已于 2022-04-14 12:36:43 修改

阅读量744

点赞数

分类专栏： Easyui 文章标签： easyui 前端 javascript

于 2022-01-20 16:38:12 首次发布

本文链接：https://blog.csdn.net/qq_38567182/article/details/122604872

版权

Easyui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

关于Easyui 多层datagrid 列表数据
应用场景：如查询一个省有多少城市？一个城市有多少县区？一个县区多少乡镇。
用列表展示出来，并很直观感受出来
效果展示
图片.png

<div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;">
    <div style="padding:5px;background-color:#F4F4F4">
        <p>
            <input id="searchbox">
            <div id="combox" style="width:120px">
                <div data-options="name:'WorkOrder'">工单</div>
                <div data-options="name:'Prod'">物料号(品号)</div>
                <div data-options="name:'TraceNo'">追溯号</div>
            </div>
        </p>
    </div>
    <table id="dg"></table>
</div>
<script type="text/javascript">
    $(function () {
        $('#divLayout').layout('resize', {
            height: $(window).height() - 232
        });
        //js searchbox 加载 兼容IE
        $("#searchbox").searchbox({
            width: 250,
            height: 'auto',
            prompt: '请输入关键字',
            menu: "#combox", //combox 值
            searcher: function (value, name) {
                datagridloadData(1, 20, name, value, "TO");
            },
        });
    });

    //title
    var columnstitle = [
        { title: '工单', field: 'WorkOrder', width: 80 },
        { title: '类型', field: 'WorkOrderType', width: 50 },//formatter: function (value, rowData, rowIndex) { return type;}
        { title: '物料编码(品号)', field: 'Prod', width: 80 },
        { title: '物料名称', field: 'ProdName', width: 120 },
        { title: '追溯号', field: 'TraceNo', width: 80 },
        { title: '供应商代码', field: 'SupplierCode', width: 80 },
        { title: '客户品号', field: 'PartNo', width: 80 },
        { title: '(Part No.)', field: 'PartNoName', width: 80 },
        { title: '(D/C)', field: 'Dc', width: 80 },
        { title: '版本/型号', field: 'Rev', width: 80 },
        { title: '(LOT/DC)', field: 'LotDc', width: 80 },
        { title: '数量', field: 'OperationQty', width: 80 },
        { title: '仓库代码', field: 'Warehouse', width: 80 },
        { title: '仓库描述', field: 'WareHouseDesc', width: 100 },
        { title: '仓库状态', field: 'StorageStatus', width: 80 },
        { title: '出库操作人员', field: 'Creator', width: 80 },
        { title: '出库日期', field: 'CreateDate', width: 80 }];

    //数据列表
    $(function () {
        $('#dg').datagrid({
            //一级列表
            view: detailview,
            autoRowHeight: true,
            fitColumns: true,
            singleSelect: false,
            rownumbers: true,
            striped: true,
            height: '80%',
            loadMsg: '@Message.Loading',
            columns: [columnstitle],
            pagination: true,
            pageSize: 20,
            pageList: [10, 20, 30, 40, 50],
            detailFormatter: function (index, row) {
                //二级列表的分页
                return '<div style="padding:2px"><table class="ddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:20,pageList : [10,20,30,40,50]"></table></div>';
            },
            onExpandRow: function (index2, row) {
                //二级列表，注意此时行索引为index2
                var ddv = $(this).datagrid('getRowDetail', index2).find('table.ddv');
                ddv.datagrid({
                    url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//器件
                    queryParams: {
                        //page: 1,rows: 10,
                        searchName: "QJ",
                        searchValue: row.Prod,
                        selectType: "QJ"
                    },
                    view: detailview,
                    autoRowHeight: true,
                    fitColumns: true,
                    singleSelect: false,
                    rownumbers: true,
                    loadMsg: '@Message.Loading',
                    height: 'auto',
                    columns: [columnstitle],
                    detailFormatter: function (index, row) {
                        //三级列表的分页
                        return '<div style="padding:2px"><table class="dddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
                    },
                    onExpandRow: function (index3, row) {
                        //三级列表，此时行索引为index3
                        var dddv = $(this).datagrid('getRowDetail', index3).find('table.dddv');
                        dddv.datagrid({
                            url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//模块
                            queryParams: {
                                //page: 1,rows: 10,
                                searchName: "MODULE",
                                searchValue: row.Prod,
                                selectType: "MODULE"
                            },
                            view: detailview,
                            autoRowHeight: true,
                            fitColumns: true,
                            singleSelect: false,
                            rownumbers: true,
                            loadMsg: '@Message.Loading',
                            height: 'auto',
                            columns: [columnstitle],
                            detailFormatter: function (index, row) {
                                //四级列表的分页
                                return '<div style="padding:2px"><table class="ddddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
                            },
                            onExpandRow: function (index4, row) {
                                //四级列表，此时行索引为index3
                                var ddddv = $(this).datagrid('getRowDetail', index4).find('table.ddddv');
                                ddddv.datagrid({
                                    url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//明细
                                    queryParams: {
                                        //page: 1,rows: 10,
                                        searchName: "MODULE",
                                        searchValue: row.Prod,
                                        selectType: "MODULE"
                                    },
                                    autoRowHeight: true,
                                    fitColumns: true,//改变横向滚动条
                                    singleSelect: false,//去掉选中效果
                                    rownumbers: true,
                                    loadMsg: '@Message.Loading',
                                    height: 'auto',
                                    columns: [columnstitle],
                                    //四级
                                    onLoadSuccess: function () {
                                        setTimeout(function () {
                                            dddv.datagrid('fixDetailRowHeight', index4);
                                            //在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
                                            dddv.datagrid('fixRowHeight', index4);
                                            //在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
                                            $('#dg').datagrid('fixDetailRowHeight', index4);
                                            //在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
                                            $('#dg').datagrid('fixRowHeight', index4);
                                            //在加载成功时，获取父列表的明细点开后爷爷列表的高度，防止在超过加载成功前的高度时，出现垂直方向的滑动条
                                        }, 0);
                                    },
                                    onResize: function () {
                                        dddv.datagrid('fixDetailRowHeight', index4);
                                        $('#dg').datagrid('fixDetailRowHeight', index4);
                                    },
                                });
                                $('#dg').datagrid('fixDetailRowHeight', index4);
                            },
                            //三级
                            onLoadSuccess: function () {
                                $('#dg').datagrid('fixRowHeight', index3);
                                setTimeout(function () {
                                    ddv.datagrid('fixDetailRowHeight', index3);
                                    ddv.datagrid('fixRowHeight', index3);
                                    $('#dg').datagrid('fixDetailRowHeight', index3);
                                    $('#dg').datagrid('fixRowHeight', index3);
                                }, 0);
                            },
                            onResize: function () {
                                ddv.datagrid('fixDetailRowHeight', index3);
                                $('#dg').datagrid('fixDetailRowHeight', index3);
                            },
                        });
                        $('#dg').datagrid('fixDetailRowHeight', index3);
                    },
                    //二级
                    onCollapseRow: function (index2, row3) {
                        setTimeout(function () {
                            $('#dg').datagrid('fixDetailRowHeight', index2);
                            $('#dg').datagrid('fixRowHeight', index2);
                        }, 0);
                    },
                    onLoadSuccess: function () {
                        setTimeout(function () {
                            $('#dg').datagrid('fixDetailRowHeight', index2);
                            $('#dg').datagrid('fixRowHeight', index2);
                        }, 0);
                    },
                    onResize: function () {
                        $('#dg').datagrid('fixRowHeight', index2);
                    }
                });
                $('#dg').datagrid('fixDetailRowHeight', index2);
            }
        });

        //获取分页对象
        //var pager = $("#dg").datagrid("getPager");
        $('#dg').datagrid('getPager').pagination({
            onBeforeRefresh: function (pageNumber, pageSize) { //刷新
                console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize); //这个也没有出现
            },
            onSelectPage: function (pageNumber, pageSize) {
                //$(this).pagination('loading');
                //序号连序
                var gridOpts = $('#dg').datagrid('options');
                gridOpts.pageNumber = pageNumber;
                gridOpts.pageSize = pageSize;
                var name = $('#searchbox').searchbox('getName');   //搜索框
                var value = $('#searchbox').searchbox('getValue'); //值
                datagridloadData(pageNumber, pageSize, name, value, "TO");
            }
        });

    });

    //请求方法
    function datagridloadData(page, rows, name, value, Type) {
        $.ajax({
            url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect",
            method: 'POST',
            data: { page: page, rows: rows, searchName: name, searchValue: value, selectType: Type },
            success: function (data) {
                //序号连序
                var gridOpts = $('#dg').datagrid('options');
                gridOpts.pageNumber = page;
                gridOpts.pageSize = rows;
                $('#dg').datagrid('loadData', data);//绑定datagrid
            }
        });
    }

</script>

注意项：
1、searchbox 组件在ie下不支持在HTML写组件渲染关系
2、datagrid嵌套的子列表无法在外面用ajax请求，使用url 直接请求，如果参数过多不用拼接 ?a=1&=2 可用queryParams ，并开启 view: detailview ；在onExpandRow 写子列表渲染js

url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//模块
queryParams: {
	//page: 1,rows: 10,
	searchName: "MODULE",
	searchValue: row.Prod,
	selectType: "MODULE"
},

3、注意层级关系，否则打不开，或是乱的

dddv.datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
dddv.datagrid('fixRowHeight', index4);
//在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
$('#dg').datagrid('fixDetailRowHeight', index4);
//在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
$('#dg').datagrid('fixRowHeight', index4);

4、如第一层分页无效，需单独渲染

//获取分页对象
//var pager = $("#dg").datagrid("getPager");
$('#dg').datagrid('getPager').pagination({
	onBeforeRefresh: function (pageNumber, pageSize) { //刷新
		console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize); //这个也没有出现
	},
	onSelectPage: function (pageNumber, pageSize) {
		//$(this).pagination('loading');
		//序号连序
		var gridOpts = $('#dg').datagrid('options');
		gridOpts.pageNumber = pageNumber;
		gridOpts.pageSize = pageSize;
		var name = $('#searchbox').searchbox('getName');   //搜索框
		var value = $('#searchbox').searchbox('getValue'); //值
		datagridloadData(pageNumber, pageSize, name, value, "TO");
	}
});

5、如datagrid 分页在第二页分后序号ID又从1开始，需要连序

//序号连序
var gridOpts = $('#dg').datagrid('options');
gridOpts.pageNumber = page;
gridOpts.pageSize = rows;

6、deom

@using System.Collections.Generic
@using Microsoft.AspNetCore.Http
@using Microsoft.AspNetCore.Http.Authentication
@using iROCK.Entity.Enum
@using iROCK.Resource
@using iROCK.Foundation.Web
@using System.Net.Http
@using System.IO
@using iROCK.Web
@using Microsoft.Extensions.Configuration
@using iROCK.Foundation.Web
@{
    var resourceHost = Context.GetResourceHost();
    Layout = "/Views/Shared/_LayoutEasyuiIndex.cshtml";
}@{ await Html.RenderPartialAsync("/Views/Shared/_PartialGlobalScript.cshtml"); }
@{ await Html.RenderPartialAsync("/Views/Shared/_PartialEasyuiDataGridExtentionScripts.cshtml"); }
<div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;">
    <div style="padding: 5px; background-color: #F4F4F4; font-size: 12px;">
        <span style="vertical-align:middle;">序列号</span>
        <input id="txtSerialNo" class="easyui-textbox" data-options="prompt:'序列号',panelWidth:420">
        <span style="padding-right:5px">
            <a id="butnsearch" class="easyui-linkbutton l-btn l-btn-small" onclick="doSearch()">
                <span class="l-btn-left"><span class="l-btn-text"><i class="fa fa-search"></i> 搜索</span></span>
            </a>
        </span>
    </div>
    <table id="dg"></table>
</div>
<script type="text/javascript">
    $(function () {
        $('#divLayout').layout('resize', {
            height: $(window).height() - 232
        });
    });

    function doSearch() {
        datagridloadData(1, 20, $("#txtSerialNo").val(), "MODULE");
    }

    function columnstype(type) {
        var columns;
        switch (type) {
            case "MODULE":
            case "DEVICE":
                columns = [[
                    {title: '@Label.SerialNo', field: 'SerialNo', width: 120},
                    { title: '类型', field: 'WorkOrderType', width: 100, formatter: function (value, rowData, rowIndex) { return type; } },
                    { title: '@Label.WorkOrder', field: 'WorkOrder', width: 120 },
                    { title: '@Label.LotNo', field: 'LotNo', width: 120 },
                    { title: '@Label.Status', field: 'Status', width: 120 },
                    { title: '@Label.RouteName', field: 'RouteName', width: 140 },
                    { title: '@Label.Operation', field: 'OperationDesc', width: 140 },
                    { title: '@Label.OperationTo', field: 'OperationToDesc', width: 140 },
                    { title: '@Label.PlatePackingNo', field: 'BottomMostPackingNo', width: 120 },
                    { title: '@Label.CartonNo', field: 'MiddlePackingNo', width: 120 },
                    { title: '@Label.ShippingBoxNo', field: 'TopMostPackingNo', width: 120 },
                    {
                        title: '@Label.SubObjectTypeAndNo', field: 'SubObjectTypeAndNo', width: 160,
                        formatter: function (value, row, index) {
                            if (row.SubObjectTypeAndNo.replace(/(^s*)|(s*$)/g, "").length > 0) {
                                var str = '<p style="color:red;">' + row.SubObjectTypeAndNo + '</p>';
                                return str;
                            }
                        }
                    },
                    {
                        title: '@Label.ComponentsSubProd', field: 'SubProd', width: 140,
                        formatter: function (value, row, index) {
                            if (row.SubObjectTypeAndNo.replace(/(^s*)|(s*$)/g, "").length > 0) {
                                var str = '<p style="color:red;">' + row.SubProd + '</p>';
                                return str;
                            }
                        }
                    },
                    { title: '@Label.UdaAndUdaValueNew', field: 'UdaAndUdaValueNew', width: 120 },
                    { title: '@Label.Operate', field: 'EmpNo', width: 100 },
                    { title: '@Label.OperatingTime', field: 'DateTmOut', width: 120 }
                ]];
                break;
            case "TO":
                columns = [[
                    { title: '@Label.TraceNo',field: 'TraceNo',  width: 180 },
                    { title: '@Label.ItemNo', field: 'Prod', width: 100 },
                    { title: '@Label.MaterialName',field: 'ProdName',  width: 130 },
                    { title: '@Label.SupplierCode',field: 'SupplierCode',  width: 100 },
                    { title: '@Label.CustomerProd',field: 'PartNo', width: 100 },
                    { title: '@Label.PartNo',field: 'PartNoName', width: 120 },
                    { title: '@Label.Dc',field: 'Dc', width: 120 },
                    { title: '@Label.Version',field: 'Rev', width: 100 },
                    { title: '@Label.LotDc',field: 'LotDc', width: 80 },
                    { title: '@Label.Qty',field: 'OperationQty', width: 130 },
                    { title: '@Label.WorkOrder',field: 'WorkOrder',  width: 130 },
                    { title: '@Label.WareHouseCode', field: 'Warehouse',  width: 80 },
                    { title: '@Label.WareHouseDesc',field: 'WareHouseDesc',  width: 80 },
                    { title: '@Label.OutputOperator',field: 'Creator', width: 130 },
                    { title: '@Label.DeliveryDate',field: 'CreateDate',  width: 140 }
                ]];
                break;
        }
        return columns;
    }
    //{value?}/{type?}
    //数据列表
    $(function () {
        $('#dg').datagrid({
            //一级列表
            view: detailview,
            autoRowHeight: true,
            fitColumns: true,
            singleSelect: false,
            rownumbers: true,
            striped: true,
            height: '80%',
            loadMsg: '@Message.Loading',
            columns: columnstype("MODULE"),
            pagination: true,
            pageSize: 20,
            pageList: [10, 20, 30, 40, 50],
            detailFormatter: function (index, row) {
                //二级列表的分页
                return '<div style="padding:2px"><table class="ddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:20,pageList : [10,20,30,40,50]"></table></div>';
            },
            onExpandRow: function (index2, row) {
                //二级列表，注意此时行索引为index2 器件 DEVICE
                var ddv = $(this).datagrid('getRowDetail', index2).find('table.ddv');
                ddv.datagrid({
                    url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",
                    queryParams: {
                        page: 1, rows: 10,
                        value: row.SubSerialNo,
                        type: "DEVICE"
                    },
                    view: detailview,
                    autoRowHeight: true,
                    fitColumns: true,
                    singleSelect: false,
                    rownumbers: true,
                    loadMsg: '@Message.Loading',
                    height: 'auto',
                    pageSize: 10,
                    pageList: [10, 20, 30, 40, 50],
                    columns: columnstype("DEVICE"),
                    detailFormatter: function (index, row) {
                        //三级列表的分页
                        return '<div style="padding:2px"><table class="dddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
                    },
                    onExpandRow: function (index3, row) {
                        //三级列表，此时行索引为index3  TO
                        var dddv = $(this).datagrid('getRowDetail', index3).find('table.dddv');
                        dddv.datagrid({
                            url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",
                            queryParams: {
                                page: 1,rows: 10,
                                value: row.WorkOrder,
                                type: "TO"
                            },
                            autoRowHeight: true,
                            fitColumns: true,
                            singleSelect: false,
                            rownumbers: true,
                            loadMsg: '@Message.Loading',
                            height: 'auto',
                            columns: columnstype("TO"),
                            pageSize: 10,
                            pageList: [10, 20, 30, 40, 50],
                            view: detailview,
                            detailFormatter: function (index, row) {
                                //四级列表的分页
                                return '<div style="padding:2px"><table class="ddddv" data-options="singleSelect:true,striped:true,pagination:true,pageSize:10,pageList : [10,20,30,40,50]"></table></div>';
                            },
                            onExpandRow: function (index4, row) {
                                //四级列表，此时行索引为index3
                                var ddddv = $(this).datagrid('getRowDetail', index4).find('table.ddddv');
                                ddddv.datagrid({
                                    url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect/",//明细
                                    queryParams: {
                                        page: 1,rows: 10,
                                        value: row.SubSerialNo,
                                        type: "MODULE"
                                    },
                                    autoRowHeight: true,
                                    fitColumns: true,//改变横向滚动条
                                    singleSelect: false,//去掉选中效果
                                    rownumbers: true,
                                    loadMsg: '@Message.Loading',
                                    height: 'auto',
                                    columns: columnstype("TO"),
                                    pageSize: 10,
                                    pageList: [10, 20, 30, 40, 50],
                                    //四级
                                    onLoadSuccess: function () {
                                        setTimeout(function () {
                                            dddv.datagrid('fixDetailRowHeight', index4);
                                            //在加载成功时，获取父列表的明细高度，使其适应明显点开后的高度，注意此时的行索引为index3
                                            dddv.datagrid('fixRowHeight', index4);
                                            //在加载成功时，获取子明细点开后父列表的列高，防止在超过加载成功前的高度时，出现垂直方向的滑动条
                                            $('#dg').datagrid('fixDetailRowHeight', index4);
                                            //在加载成功时，获取一接列表的明细高度，使其适应前面父列表和子列表的高度变化，注意此时的行索引为index2
                                            $('#dg').datagrid('fixRowHeight', index4);
                                            //在加载成功时，获取父列表的明细点开后爷爷列表的高度，防止在超过加载成功前的高度时，出现垂直方向的滑动条
                                        }, 0);
                                    },
                                    onResize: function () {
                                        dddv.datagrid('fixDetailRowHeight', index4);
                                        $('#dg').datagrid('fixDetailRowHeight', index4);
                                    },
                                });
                                $('#dg').datagrid('fixDetailRowHeight', index4);
                            },
                            //三级
                            onLoadSuccess: function () {
                                $('#dg').datagrid('fixRowHeight', index3);
                                setTimeout(function () {
                                    ddv.datagrid('fixDetailRowHeight', index3);
                                    ddv.datagrid('fixRowHeight', index3);
                                    $('#dg').datagrid('fixDetailRowHeight', index3);
                                    $('#dg').datagrid('fixRowHeight', index3);
                                }, 0);
                            },
                            onResize: function () {
                                ddv.datagrid('fixDetailRowHeight', index3);
                                $('#dg').datagrid('fixDetailRowHeight', index3);
                            },
                        });
                        $('#dg').datagrid('fixDetailRowHeight', index3);
                    },
                    //二级
                    onCollapseRow: function (index2, row3) {
                        setTimeout(function () {
                            $('#dg').datagrid('fixDetailRowHeight', index2);
                            $('#dg').datagrid('fixRowHeight', index2);
                        }, 0);
                    },
                    onLoadSuccess: function () {
                        setTimeout(function () {
                            $('#dg').datagrid('fixDetailRowHeight', index2);
                            $('#dg').datagrid('fixRowHeight', index2);
                        }, 0);
                    },
                    onResize: function () {
                        $('#dg').datagrid('fixRowHeight', index2);
                    }
                });
                $('#dg').datagrid('fixDetailRowHeight', index2);
            }
        });

        //获取分页对象
        //var pager = $("#dg").datagrid("getPager");
        $('#dg').datagrid('getPager').pagination({
            onBeforeRefresh: function (pageNumber, pageSize) { //刷新
                console.log('before refresh : pageNumber:' + pageNumber + ',pageSize:' + pageSize);
            },
            onSelectPage: function (pageNumber, pageSize) {
                //序号连序
                var gridOpts = $('#dg').datagrid('options');
                gridOpts.pageNumber = pageNumber;
                gridOpts.pageSize = pageSize;
                var value = $("#txtSerialNo").val();
                datagridloadData(pageNumber, pageSize, value, "MODULE");
            }
        });

    });

    //请求方法
    function datagridloadData(page, rows, value, type) {
        $("#dg").datagrid('loading');
        $.ajax({
            url: "@resourceHost/@Const.WEB_AREA_REPORTS/WorkOrderRetrospect/GetWorkOrderRetrospect",
            method: 'POST',
            data: { page: page, rows: rows, value: value, type: type },
            success: function (data) {
                $('#dg').datagrid('loaded');
                //序号连序
                var gridOpts = $('#dg').datagrid('options');
                gridOpts.pageNumber = page;
                gridOpts.pageSize = rows;
                $('#dg').datagrid('loadData', data);//绑定datagrid
            }
        });
    }

</script>

YANG-Live

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Easyui—datagrid嵌套四层

关于Easyui 多层datagrid 列表数据应用场景：如查询一个省有多少城市？一个城市有多少县区？一个县区多少乡镇。用列表展示出来，并很直观感受出来效果展示<div id="divLayout" class="easyui-layout layout easyui-fluid" data-options="fit:true" style="border-top: 1px solid #95b8e7; width:100%;height:100%;"> <div st
复制链接

扫一扫