【easyui】datagrid复合表单

谁践踏了优雅 2022-05-26 06:08 223阅读 0赞

### 目的 ###

达到下图的效果：

![这里写图片描述][70]

### datagrid初始化 ###

html代码

$(document).ready(function () {
    
            dataGrid = $('#dataGrid').datagrid({
                fit: true,
                fitColumns: false,
                border: false,
                pagination: true,
                idField: 'id',
                remoteSort: false,
                pageSize: 20,
                pageList: [20, 30, 50, 100],
                singleSelect: true,
                checkOnSelect: true,
                selectOnCheck: true,
                rownumbers: true,
                nowrap: true,
                showPageList: false,
                frozenColumns: [[
                    {
                        field: 'id',
                        title: 'ID',
                        width: 50,
                        align: 'center',
                        hidden: true
                    }, {
                        field: 'yearMonth',
                        title: '月份',
                        width: 50,
                        align: 'center'
                    }, {
                        field: 'salesMan',
                        title: '销售人员',
                        width: 80,
                        align: 'center'
                        //checkbox : true
                    }, {
                        field: '1',
                        title: '板块',
                        width: 80,
                        align: 'center'
                        //checkbox : true
                    }, {
                        field: '2',
                        title: '经销商名称',
                        width: 80,
                        align: 'center'
                        //checkbox : true
                    }]],
                columns: [[{
                    title: '第一次预报',
                    width: 580,
                    align: 'center',
                    colspan: 6
                }, {
                    title: '第二次预报',
                    width: 580,
                    align: 'center',
                    colspan: 6
                }, {
                    title: '第三次预报',
                    width: 580,
                    align: 'center',
                    colspan: 6
                }, {
                    title: '汇总',
                    width: 580,
                    align: 'center',
                    colspan: 7
                },], [{
                    field: 'contractMoneyOne',
                    title: '预计出货额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '12',
                    title: '回款总金额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '13',
                    title: '本月需还授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '14',
                    title: '现金/承兑回款',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '15',
                    title: '计划使用返利',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '16',
                    title: '计划使用授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '21',
                    title: '预计出货额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '22',
                    title: '回款总金额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '23',
                    title: '本月需还授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '24',
                    title: '现金/承兑回款',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '25',
                    title: '计划使用返利',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '26',
                    title: '计划使用授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '31',
                    title: '预计出货额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '32',
                    title: '回款总金额',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '33',
                    title: '本月需还授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '34',
                    title: '现金/承兑回款',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '35',
                    title: '计划使用返利',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '36',
                    title: '计划使用授信',
                    width: 100,
                    align: 'center',
                    rowspan: 1
                },{
                    field: '3',
                    title: '年度任务',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '4',
                    title: '年度已完成',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '5',
                    title: '年度完成率',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '6',
                    title: '本月任务',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '7',
                    title: '本月完成',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '8',
                    title: '本月完成率',
                    width: 80,
                    align: 'center',
                    rowspan: 1
                }, {
                    field: '9',
                    title: '差异原因',
                    width: 300,
                    align: 'center',
                    rowspan: 1
                }]],
                toolbar: '#toolbar',
                onLoadSuccess: function () {
                    $(this).datagrid('clearChecked');
                    $(this).datagrid('clearSelections');
                },
    
                onRowContextMenu: function (e, rowIndex, rowData) {
                    e.preventDefault();
                    $(this).datagrid('unselectAll').datagrid('uncheckAll');
                    $(this).datagrid('selectRow', rowIndex);
    
                    if ($("#menu > div").size() > 1) {
                        $('#menu').menu('show', {
                            left: e.pageX - 10,
                            top: e.pageY - 5
                        });
                    }
                }
            });
    
    
        });

### 说明&注意事项 ###

1.  复合表单主要使用的就是datagrid的rowspan参数，和colspan参数来决定如何组合的。
2.  第一列表头和第二列表头，用下面的分隔符合分割

![这里写图片描述][70 1]

举例来说

1.  如果有横跨两行的表头，也就是非复合表头，rowspan=2；
2.  如果是第一列表头，则需要注明该表头下面有几个二级表头，也就是设置colspan=2
3.  在第二列表头中，需要注明rowspan=1，标注其二级表头的身份。

[70]: /images/20220526/a3876d276bfd4de7b0955300d83c1277.png
[70 1]: /images/20220526/e444dfdeb4534a8d90328906c6927bf7.png