实现select2与jqGrid联动动态重新加载数据
- select2设置
==== 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
});
补充：select2的渲染效果实现必须在html页面<select>标签加载完成后，js中定义.select2({})激活方法应尽量在底部
- jqGrid — jqGrid定义在modal框中，每次点击按钮打开modal，均根据select2对应ID值，动态加载user数据
<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显示内容对应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参数中对应的user数据
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时表示表格全选
