<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>