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

Posted 2022-11-07 華廣一條魚

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">
          <table id="grid-table"></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');