天天看點

jqGrid 兩層表頭

<div class="panel-body">
        <table id="list"></table>
        <div id="pager"></div>
    </div>
           
<script language="JavaScript">
    jQuery("#list").jqGrid({

        url : 'DisasterInformation/json/all',//元件建立完成之後請求資料的url
        datatype : "json",//請求資料傳回的類型。可選json,xml,txt

        autowidth : true,
        shrinkToFit : true,
        height : ,
        autoScroll : false,

        colNames : [ '序号', '線路', '區間', '線别', '時', '分', '時', '分', '姓名', '類型' ], //jqGrid的列顯示名字

        colModel : [ //jqGrid每一列的配置資訊。包括名字,索引,寬度,對齊方式.....
        {
            name : 'myrn',index : 'myrn',width : ,sortable : false,align : "left"

        }, {
            name : 'section.railway.name',index :'section.railway.name',width : ,align : "left"
        }, {
            name : 'section.name',index : 'section.name',width : ,align : "left"
        }, {
            name : 'lineClass',index : 'lineClass',width : ,
        }, {
            name : 'mainTrackBreakHour',index : 'mainTrackBreakHour',width : ,align : "left"
        }, {
            name : 'mainTrackBreakMin',index : 'mainTrackBreakMin',width : ,
        }, {
            name : 'regionalBreakHour',index : 'regionalBreakHour',width : ,align : "left"

        }, {
            name : 'regionalBreakMin',index : 'regionalBreakMin',width : ,align : "left"

        }, {
            name : 'discoverPerson',index : 'discoverPerson',width : ,align : "left"
        }, {
            name : 'discoverPersonType',index : 'discoverPersonType',width : ,
        }, ],

        rowNum : ,//一頁顯示多少條  傳背景 
        rowList : [ , ,  ],//可供使用者選擇一頁顯示多少條
        pager : '#pager',//表格頁腳的占位符(一般是div)的id
        sortname : 'id',//初始化的時候排序的字段  預設的排序列 傳背景 
        sortorder : "desc",//排序方式,可選desc,asc
        mtype : "post",//向背景請求資料的ajax的類型。可選post,get
        viewrecords : true,
        jsonReader : {
            root : "content", //資料
            page : "", //*目前頁,這樣才能實作翻頁*
            total : "totalPages", //  總頁數
            records : "totalElements",//從伺服器端傳回的記錄數
            repeatitems : false,
            id : "id"
        },
        gridComplete : function() { // 資料加載完成後 執行的操作
            var ids = jQuery("#list").jqGrid('getDataIDs');
            for (var i = ; i < ids.length; i++) {

                jQuery("#list").jqGrid('setRowData', ids[i], {
                    myrn : i + ,

                });
            }//end for
        },//end  gridComplete

        caption : ""//表格的标題名字
    });


    jQuery("#list").jqGrid('navGrid', '#pager', {
        edit : false,
        add : false,
        del : false,
        search : false
    });

jQuery("#list").jqGrid('setGroupHeaders', {
        useColSpanStyle : true, //沒有表頭的列是否與表頭列位置的空單元格合并  
        groupHeaders : [
        //合并 startColumnName(開始列),以discoverDate列開始; numberOfColumns(合并幾列),合并3列; titleText(合并後父列名),合并後父列名為'發現時間' 
        {
            startColumnName : 'mainTrackBreakHour', // 對應colModel中的name
            numberOfColumns : ,//合并列數
            titleText : '中斷時間(正線)'
        }, {
            startColumnName : 'regionalBreakHour',
            numberOfColumns : ,
            titleText : '中斷時間(站專支)'
        }, {
            startColumnName : 'discoverPerson',
            numberOfColumns : ,
            titleText : '發現人'
        }, ]
    });
</script>