"Easyui" DataGrid composite form

Purpose

The effect of the following image is achieved:

DataGrid Initialization

HTML code

$ (document). Ready (function () {DataGrid = $ (' #dataGrid '). DataGrid ({fit:true, fitcolumn S:false, Border:false, Pagination:true, IDfield: ' id ', remotesort:fals E, pagesize:20, pagelist: [A], singleselect:true, checkons Elect:true, Selectoncheck:true, Rownumbers:true, Nowrap:true, ShowPage List:false, FrozenColumns: [[{field: ' id ', title: '
                ID ', width:50, align: ' center ', hidden:true
                    }, {field: ' Yearmonth ', title: ' Month ', width:50,
                    Align: ' center '}, {field: ' Salesman ', title: ' Sales person ', Width:80, align: ' center '//checkbox:true}, {Fiel
                    D: ' 1 ', title: ' Plate ', width:80, align: ' center '
                    Checkbox:true}, {field: ' 2 ', title: ' Reseller Name ',
            width:80, align: ' center '//checkbox:true}],
                Columns: [[{title: ' First Forecast ', width:580, align: ' center ', Colspan:6}, {title: ' Second Forecast ', width:580, align: ' cen
                Ter ', Colspan:6}, {title: ' Third Forecast ', width:580,
                Align: ' center ', Colspan:6}, {title: ' Summary ', width:580, Align: 'Center ', Colspan:7},], [{field: ' Contractmoneyone ', title:
                ' Expected shipment ', width:100, align: ' center ', rowspan:1}, {
                Field: ' New ', Title: ' Total money back ', width:100, align: ' center ', Rowspan:1}, {field: ' + ', title: ' Need to be granted this month ', width:1
                XX, align: ' center ', rowspan:1}, {field: ' 14 ',
            Title: ' Cash/Accept-back ', width:100, align: ' center ', rowspan:1 }, {field: ' All ', title: ' Plan to use rebate ', width:100, align: ' cen
                Ter ', rowspan:1}, {field: ' + ', title: ' Plan to use credit ',
      WIDTH:100,          Align: ' center ', rowspan:1}, {field: ' + ', title:
                ' Expected shipment ', width:100, align: ' center ', rowspan:1}, {
                Field: ' A ', title: ' Total money back ', width:100, align: ' center ', Rowspan:1}, {field: ' All ', title: ' Need to be granted this month ', Width:
                Align: ' center ', rowspan:1}, {field: ' 24 ',
            Title: ' Cash/Accept-back ', width:100, align: ' center ', rowspan:1 }, {field: ' + ', title: ' Plan to use rebate ', width:100, align: ' CE
                Nter ', Rowspan:1}, {field: ' + ', title: ' Plan to use credit ',
     WIDTH:100,           Align: ' center ', rowspan:1}, {field: ' + ', title
                : ' Expected shipment ', width:100, align: ' center ', rowspan:1}, {
                Field: ' + ', Title: ' Total money back ', width:100, align: ' center ',  Rowspan:1}, {field: ' $ ', title: ' Need to be granted this month ', Width:
                Align: ' center ', rowspan:1}, {field: ' 34 ',
            Title: ' Cash/Accept-back ', width:100, align: ' center ', rowspan:1 }, {field: ' + ', title: ' Plan to use rebate ', width:100, align: ' C
                Enter ', Rowspan:1}, {field: ' $ ', title: ' Plan to use credit ',
    WIDTH:100,            Align: ' center ', rowspan:1},{field: ' 3 ', title:
                ' Mission of the Year ', width:80, align: ' center ', rowspan:1}, {
                Field: ' 4 ', title: ' Year completed ', width:80, align: ' center ',
                Rowspan:1}, {field: ' 5 ', title: ' Annual completion rate ', width:80, Align: ' center ', rowspan:1}, {field: ' 6 ', tit
                Le: ' mission of the Month ', width:80, align: ' center ', rowspan:1}, {
                Field: ' 7 ', title: ' Completed this month ', width:80, align: ' center ',
                Rowspan:1}, {field: ' 8 ', title: ' Completion rate of the month ', width:80, Align: 'Center ', rowspan:1}, {field: ' 9 ', title: ' Reason for difference ', width:300, align: ' center ', rowspan:1}], toolbar: ' #tool
                Bar ', 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.pag
                EX-10, top:e.pagey-5});


    }
            }
        }); });

Notes & PrecautionsThe main use of a composite form is the rowspan parameter of the DataGrid, and the colspan parameter to determine how to combine it. First list header and second list header, separated by the following partition

For example, if there is a table header spanning two rows, that is, a non-composite table header, rowspan=2; if it is the first list header, you need to note that there are several level two headers under the header, that is, set colspan=2 in the second list header, you need to indicate rowspan=1, and label their two-level header identity.