實(shí)現(xiàn)select2與jqGrid聯(lián)動(dòng)動(dòng)態(tài)重新加載數(shù)據(jù)
- 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)盡量在底部
- jqGrid — jqGrid定義在modal框中，每次點(diǎn)擊按鈕打開modal珊肃，均根據(jù)select2對(duì)應(yīng)ID值婆芦，動(dòng)態(tài)加載user數(shù)據(jù)
<div class="jqGrid-wrapper">
<table id="grid-table"></table>
<div id="grid-pager"></div>
</div>
var textModal = $(".getUserModal"); //整個(gè)modal的ID
var jqGridTable = $("#grid-table");
var appId = $("#sel option:selected").val(); //獲取select2顯示內(nèi)容對(duì)應(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ù)中對(duì)應(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時(shí)表示表格全選
