jqGrid 2層ヘッダー


    <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>
        }, ]
    });