jqGrid 2層ヘッダー
9688 ワード
<div class="panel-body">
id="list">
<div id="pager">div>
div>
"JavaScript"</span>>
jQuery(<span class="hljs-string">"#list"</span>).jqGrid({
url : <span class="hljs-string">'DisasterInformation/json/all'</span>,<span class="hljs-comment">// url</span>
datatype : <span class="hljs-string">"json"</span>,<span class="hljs-comment">// 。 json,xml,txt</span>
autowidth : <span class="hljs-keyword">true</span>,
shrinkToFit : <span class="hljs-keyword">true</span>,
height : <span class="hljs-number">350</span>,
autoScroll : <span class="hljs-keyword">false</span>,
colNames : [ <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span>, <span class="hljs-string">' '</span> ], <span class="hljs-comment">//jqGrid </span>
colModel : [ <span class="hljs-comment">//jqGrid 。 , , , .....</span>
{
name : <span class="hljs-string">'myrn'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'myrn'</span>,width : <span class="hljs-number">40</span>,sortable : <span class="hljs-keyword">false</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'section.railway.name'</span>,<span class="hljs-keyword">index</span> :<span class="hljs-string">'section.railway.name'</span>,width : <span class="hljs-number">40</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'section.name'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'section.name'</span>,width : <span class="hljs-number">60</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'lineClass'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'lineClass'</span>,width : <span class="hljs-number">40</span>,
}, {
name : <span class="hljs-string">'mainTrackBreakHour'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'mainTrackBreakHour'</span>,width : <span class="hljs-number">50</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'mainTrackBreakMin'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'mainTrackBreakMin'</span>,width : <span class="hljs-number">50</span>,
}, {
name : <span class="hljs-string">'regionalBreakHour'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'regionalBreakHour'</span>,width : <span class="hljs-number">50</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'regionalBreakMin'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'regionalBreakMin'</span>,width : <span class="hljs-number">50</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'discoverPerson'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'discoverPerson'</span>,width : <span class="hljs-number">40</span>,align : <span class="hljs-string">"left"</span>
}, {
name : <span class="hljs-string">'discoverPersonType'</span>,<span class="hljs-keyword">index</span> : <span class="hljs-string">'discoverPersonType'</span>,width : <span class="hljs-number">40</span>,
}, ],
rowNum : <span class="hljs-number">10</span>,<span class="hljs-comment">// </span>
rowList : [ <span class="hljs-number">10</span>, <span class="hljs-number">20</span>, <span class="hljs-number">30</span> ],<span class="hljs-comment">// </span>
pager : <span class="hljs-string">'#pager'</span>,<span class="hljs-comment">// ( div) id</span>
sortname : <span class="hljs-string">'id'</span>,<span class="hljs-comment">// </span>
sortorder : <span class="hljs-string">"desc"</span>,<span class="hljs-comment">// , desc,asc</span>
mtype : <span class="hljs-string">"post"</span>,<span class="hljs-comment">// ajax 。 post,get</span>
viewrecords : <span class="hljs-keyword">true</span>,
jsonReader : {
root : <span class="hljs-string">"content"</span>, <span class="hljs-comment">// </span>
page : <span class="hljs-string">""</span>, <span class="hljs-comment">//* , *</span>
total : <span class="hljs-string">"totalPages"</span>, <span class="hljs-comment">// </span>
records : <span class="hljs-string">"totalElements"</span>,<span class="hljs-comment">// </span>
repeatitems : <span class="hljs-keyword">false</span>,
id : <span class="hljs-string">"id"</span>
},
gridComplete : function() { <span class="hljs-comment">// </span>
var ids = jQuery(<span class="hljs-string">"#list"</span>).jqGrid(<span class="hljs-string">'getDataIDs'</span>);
<span class="hljs-keyword">for</span> (var i = <span class="hljs-number">0</span>; i < ids.length; i++) {
jQuery(<span class="hljs-string">"#list"</span>).jqGrid(<span class="hljs-string">'setRowData'</span>, ids[i], {
myrn : i + <span class="hljs-number">1</span>,
});
}<span class="hljs-comment">//end for</span>
},<span class="hljs-comment">//end gridComplete</span>
caption : <span class="hljs-string">""</span><span class="hljs-comment">// </span>
});
jQuery(<span class="hljs-string">"#list"</span>).jqGrid(<span class="hljs-string">'navGrid'</span>, <span class="hljs-string">'#pager'</span>, {
<span class="hljs-keyword">edit</span> : <span class="hljs-keyword">false</span>,
add : <span class="hljs-keyword">false</span>,
del : <span class="hljs-keyword">false</span>,
search : <span class="hljs-keyword">false</span>
});
jQuery(<span class="hljs-string">"#list"</span>).jqGrid(<span class="hljs-string">'setGroupHeaders'</span>, {
useColSpanStyle : <span class="hljs-keyword">true</span>, <span class="hljs-comment">// </span>
groupHeaders : [
<span class="hljs-comment">// startColumnName( ), discoverDate ; numberOfColumns( ), 3 ; titleText( ), ' ' </span>
{
startColumnName : <span class="hljs-string">'mainTrackBreakHour'</span>, <span class="hljs-comment">// colModel name</span>
numberOfColumns : <span class="hljs-number">2</span>,<span class="hljs-comment">// </span>
titleText : <span class="hljs-string">' ( )'</span>
}, {
startColumnName : <span class="hljs-string">'regionalBreakHour'</span>,
numberOfColumns : <span class="hljs-number">2</span>,
titleText : <span class="hljs-string">' ( )'</span>
}, {
startColumnName : <span class="hljs-string">'discoverPerson'</span>,
numberOfColumns : <span class="hljs-number">2</span>,
titleText : <span class="hljs-string">' '</span>
}, ]
});