實(shí)現(xiàn)select2與jqGrid聯(lián)動動態(tài)重新加載數(shù)據(jù)

1. select2設(shè)置

==== html ====
<select id="sel" class="select2"></select>

==== js ====
var selData = [
     {id: 1, text: 'ER'},
     {id: 2, text: ‘LP'},
     {id: 3, text: ‘LT'},
];
$("#sel").select2({
     data: selData
});

補(bǔ)充：select2的渲染效果實(shí)現(xiàn)必須在html頁面<select>標(biāo)簽加載完成后，js中定義.select2({})激活方法應(yīng)盡量在底部

2. jqGrid — jqGrid定義在modal框中，每次點(diǎn)擊按鈕打開modal，均根據(jù)select2對應(yīng)ID值，動態(tài)加載user數(shù)據(jù)

 <div class="jqGrid-wrapper"> 
   <table id="grid-table"></table> 
   <div id="grid-pager"></div> 
 </div>

var textModal = $(".getUserModal");    //整個modal的ID
var jqGridTable = $("#grid-table");
var appId = $("#sel option:selected").val(); //獲取select2顯示內(nèi)容對應(yīng)ID
textModal.modal('show');
textModal.on('shown.bs.modal',function () {
    jqGridTable.jqGrid({
    url: 接口URL,
    datatype: "json",
        mtype:'POST',
        styleUI:'Bootstrap',
        colModel: [
            { label: 'id', name: 'id', width: 40, align:"center",hidden:true,title:false},
            { label: 'Name', name: 'name', width: 70,align:"center",title:false}
        ],
        jsonReader:{
            root:"data.contentApproval”,     //獲取返回json參數(shù)中對應(yīng)的user數(shù)據(jù)
            repeatitems : false
       },
        viewrecords: true,
        width: 450,
        height: 230,
        rowNum: 10,
        rownumWidth: 20,
        multiselect: true,
        autowidth:true,
        pager: "#grid-pager"
    });
});
jqGridTab.jqGrid('setGridParam',{
    url: 接口URL(同上),
    datatype : 'json',
    postData:{
    "appId":appId
    },
 }).trigger('reloadGrid');

PS:

JQuery : gt(index)選擇器

$("tr:gt(3)").css("background-color", "yellow");
選取 index +1之后的元素 ，index 值從 0 開始，index=0時表示表格全選