datagrid实现多行表头并合并

要求生成一个多行表头的数据表格

本次 解决采用了 datagrid实现其功能，运用了columns可以添加多个列数组，并进行rowspan和colspan进行单元格合并，最终实现了这个功能。

$("#efficiencyGrid").datagrid({
            data: realData,
            fitColumns: true,
            autoRowHeight: false,
            nowrap: false,
            singleSelect: false,
            columns: [
                [
                    {title: '机关部门效能考核', colspan: 13},
                    {
                        field: 'totalPoints',
                        title: '合计',
                        width: '10%',
                        align: 'center',
                        rowspan: 3,
                        editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    }
                ],
                [
                    {field: 'ck', checkbox: true, rowspan: 2},
                    {
                        field: 'efficiencyDeptName',
                        title: '工作效能考核',
                        align: 'center',
                        width: '10%',
                        rowspan: 2
                    },
                    {title: '基础业务和重点任务', colspan: 2},
                    {title: '专项任务'},
                    {title: '机关作风建设及专项工作', colspan: 7},
                    {title: '党建与全面从严治党'}
                ], [
                    {
                        field: 'chinaEarthquakeAdministrationMission',
                        title: '中国地震局任务<br>（20分）',
                        width: '10%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'annualKeyWorkTasks',
                        title: '年度重点工作任务<br>（20分）',
                        width: '10%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'annualAddNewWorkTasks',
                        title: '上级新增部署要求<br>和我局新布置工作任务<br>（20分）',
                        width: '10%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'investigationResearch',
                        title: '调查研究<br>（2分）',
                        width: '10%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'workDiscipline',
                        title: '工作纪律<br>（3分）',
                        width: '5%',
                        align: 'center',
                        editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'supervisionHandling',
                        title: '督查督办<br>（3分）',
                        width: '5%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'safeProduction',
                        title: '安全生产<br>（3分）',
                        width: '5%',
                        align: 'center',
                        editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'securityWork',
                        title: '保密工作<br>（3分）',
                        width: '5%',
                        align: 'center',
                        editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'financialManagement',
                        title: '财务管理<br>（3分）',
                        width: '5%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'earthquakeEmergency',
                        title: '地震应急<br>（3分）',
                        width: '5%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    },
                    {
                        field: 'partyBuilding',
                        title: '党建与全面从严治党<br>工作情况<br>（20分）',
                        width: '10%',
                        align: 'center', editor: "text",
                        formatter: function (value, row, index) {
                            if (!value) return '<span style="color: #888">点击填写</span>';
                            return value;
                        }
                    }/*,
                    {field: 'totalPoints', title: '合计', width: '10%', align: 'center'}*/
                ]],
            onClickCell: function (rowIndex, field, value) {
                // 每次编辑时，点击其他单元会进行失去焦点的方法，再次点击才会执行clickCell
                var editIndex;

                function endEditCell() {
                    if (editIndex == undefined) {
                        return true;
                    }
                    if ($(this).datagrid("validateRow", editIndex)) {
                        $(this).datagrid("endEdit", editIndex);
                        editIndex = undefined;
                        return true;
                    } else {
                        return false;
                    }
                }

                if (endEditCell()) {
                    $(this).datagrid("editCell", {index: rowIndex, field: field});
                    editIndex = rowIndex;
                    $("input.datagrid-editable-input").bind("blur", function () {
                        $("#efficiencyGrid").datagrid('endEdit', rowIndex);
                    }).bind("keypress", function (evt) {
                        var keyCode = evt.keyCode || evt.which || evt.charCode;
                        if (keyCode == 13) {
                            $("#efficiencyGrid").datagrid('endEdit', rowIndex);
                        }
                    }).focus();
                }

            },
        });
    };
// 扩展datagrid属性，使其可以编写单元格
        $.extend($.fn.datagrid.methods,{
            editCell: function(jq, param){
                return jq.each(function(){
                    var opts = $(this).datagrid("options");
                    var fields = $(this).datagrid("getColumnFields", true).concat($(this).datagrid("getColumnFields"));
                    for(var i = 0; i < fields.length; i++){
                        var col = $(this).datagrid("getColumnOption",fields[i]);
                        col.editor1 = col.editor;
                        if(fields[i] != param.field){
                            col.editor = null;
                        }
                    }
                    $(this).datagrid("beginEdit", param.index);
                    for(var i = 0; i < fields.length; i++){
                        var col = $(this).datagrid("getColumnOption", fields[i]);
                        col.editor = col.editor1;
                    }
                })
            }
        });

效果图

以上，仅供参考。