经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 软件/图像 » Visual Studio » 查看文章
easyui 扩展 datagrid 数据网格视图
来源:cnblogs  作者:上帝叫我坑队友  时间:2019/7/9 9:45:44  对本文有异议

效果如图:

js代码:

$("#tdg").datagrid({
            width: 200,
            url: "/Laboratory/ShipmentRegister/LoadData",
            queryParams: {
                auvp: 'r',
                condition: "  and State='0'  "
            },
            striped: true,
            remoteSort: false,
            singleSelect: true,
            nowrap: false,
            fitColumns: false,
            columns: [[
                //{ field: 'ck', checkbox: true },
                { field: 'JobNo', align: 'center', title: '计划单号', width: '120' },
                { field: 'CustomerName', align: 'center', title: '客户名称', width: '150' },
                { field: 'SiteName', align: 'center', title: '工地名称', width: '150' },
                { field: 'Project', align: 'center', title: '工程部位', width: '80' },
                { field: 'Cgrade', align: 'center', title: '混凝土级别', width: '75' },
                { field: 'ActSlumpName', align: 'center', title: '实测塌落度', width: '100' },
                { field: 'Volume', align: 'left', title: '生产方量', width: '60' },
            ]],
            fit: true,
            view: detailview,
            detailFormatter: function (rowIndex, rowData) {
                return '<div><table id="tt_' + rowData.Autoid + '"></table></div>';
            },
            onExpandRow: function (index, row) {
                $("#tt_" + row.Autoid).datagrid({
                    width: 'auto',
                    height: 'auto',
                    url: "/Laboratory/ShipmentRegister/LoadProdData",
                    queryParams: {
                        JobNo: row.JobNo
                    },
                    striped: true,
                    remoteSort: false,
                    singleSelect: true,
                    nowrap: false,
                    fitColumns: false,
                    columns: [[
                        { field: 'PDate', align: 'center', title: '发货时间', width: '150' },
                        { field: 'DocketNo', align: 'center', title: '送货单号', width: '150' },
                        { field: 'TruckName', align: 'center', title: '车号', width: '150' },
                        { field: 'Volume', align: 'center', title: '销售方量', width: '80' },
                        { field: 'TruckCount', align: 'center', title: '车次', width: '75' },
                        { field: 'Total', align: 'center', title: '累计方量', width: '100' }
                    ]],
                    //fit: true, //自适应大小,填充容器  如果fit为true,则视图显示不出来。所以此处把fit属性注释起来
                    onResize: function () {
                        $('#tdg').datagrid('fixDetailRowHeight', index);
                    }, onLoadSuccess: function (data) {
      //此处必须有否则第一次展开时"+"号不会跟着移动
                        setTimeout(function () {
                            $('#tdg').datagrid('fixDetailRowHeight', index);
                        },0);
                    }
                });
                $('#tdg').datagrid('fixDetailRowHeight', index);
            },
            onCollapseRow: function (index, row) {
                //alert(index);
            }
        })

当属性fit: true时,展开视图会变成如下图所示的效果:

 

 

原文链接:http://www.cnblogs.com/BestRiven/p/11153358.html

 友情链接: NPS  问卷模板