实现select2与jqGrid联动动态重新加载数据

1.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页面标签加载完成后,js中定义.select2({})激活方法应尽量在底部
2.jqGrid — jqGrid定义在modal框中,每次点击按钮打开modal,均根据select2对应ID值,动态加载user数据
html:

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

js:

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}
        ],
        postData:{
                    "appId":appId
                },
        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');

你可能感兴趣的:(WEB前端)