【easyui】datagrid复合表单

目的

达到下图的效果：

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. 第一列表头和第二列表头，用下面的分隔符合分割

举例来说

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