实现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">
          <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');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值