jquery - jQGrid 多行标题

Question

我想扩展 jQgrid 为我的 jquery mmobile 应用程序提供多个标题。

像这样的东西：

    -------------------------
   |       Main Header      |    <---------------- level 1
    -------------------------
   |   Sub1     |   Sub2    |     <---------------- level 2
    -------------------------
   |  Sub1 | Sub2 |  Sub3   |      <---------------- level 3
    -------------------------

这个怎么做？

谢谢你

Answer 1

试试下面的代码。

JS代码：

mygrid = $("#list"),
                colModel, i, cmi, tr = "<tr>", skip = 0, ths;

            mygrid.jqGrid({
                datatype:'local',
                data: mydata,
                colNames:['Inv No','Date','Client A','Client B','Amount','Tax','Total','Closed','Shipped via','Notes'],
                colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype: 'int'},
                    {name:'invdate',index:'invdate',width:80, align:'center', sorttype:'date',
                     formatter:'date', formatoptions: {newformat:'d-M-Y'}, datefmt: 'd-M-Y'},
                    {name:'name',index:'name', width:70,
                     cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (Number(rowId) < 5) { return ' colspan=2' }} },
                    {name:'nameB',index:'nameB', width:70,
                     cellattr: function(rowId, tv, rawObject, cm, rdata) {
                          if (Number(rowId) < 5) { return ' style="display:none;"' }}},
                    {name:'amount',index:'amount',width:100, formatter:'number', align:'right'},
                    {name:'tax',index:'tax',width:70, formatter:'number', align:'right'},
                    {name:'total',index:'total',width:120, formatter:'number', align:'right'},
                    {name:'closed',index:'closed',width:110,align:'center', formatter: 'checkbox',
                     edittype:'checkbox',editoptions:{value:'Yes:No',defaultValue:'Yes'}},
                    {name:'ship_via',index:'ship_via',width:120,align:'center',formatter:'select',
                     edittype:'select',editoptions:{value:'FE:FedEx;TN:TNT;IN:Intim',defaultValue:'Intime'}},
                    {name:'note',index:'note',width:100,sortable:false}
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#pager',
                gridview:true,
                rownumbers:true,
                sortname: 'invdate',
                viewrecords: true,
                sortorder: 'desc',
                caption:'Just simple local grid',
                height: '100%'
            });

工作样本：

好软

样品小提琴：

小提琴