jquery.jqgrid 重新加载表格数据

〇、目的

select下拉框选择选择某选项之后，DataGrid数据表格也能随之变动。

一、使用的技术

1.后 Java、Spring MVC

2.前 JQuery-select2，jquery.jqgrid

二、代码-前

下拉框
<#form:select id="contractId" path="contractId" items="${contractList}" itemLabel="contractCode" itemValue="id" blankOption="true" class="form-control" />

 DataGrid配置
 1 $("#DataGrid的ID").dataGrid({

    data: ${products},//json格式
    datatype: "local", // 设置本地数据
    autoGridHeight: function(){return 'auto'}, // 设置自动高度
    
    // 设置数据表格列
    columnModel: [
            {header:'状态', name:'status', editable:true, hidden:true}, 
            ......

三、代码-后

Spring MVC中的方法
 1 　　 /**
     * 返回数据
     */
    @RequestMapping("fullProduct")
    @ResponseBody
    public List<PurProductC> fullProduct(@Param("contractId")String contractId){　　　　　　　　//conractId为选择下拉框选项后传递过来的参数，以此查询表格数据
        ContractC contract = new ContractC();
        contract.setId(contractId);
        ContractC c = contractCService.get(contract);
        List<PurProductC> products = new ArrayList<PurProductC>();
        //塞入数据至list
        return products;
    }

四、解决方案

$(function(){  
    $("#contractId").select2();
    
    $("#contractId").on("select2:select",function(){　　　　　　　　　　　　//下拉框选中事件
        var param = $(this).val();　　　　　　　　　　　　　　　　　　　　　　　//获取下拉框选中的值
        $.ajax({
            type:"POST",
            url:"${ctx}/purchase/purchaseC/fullProduct",
            data:{contractId:$(this).val()},
            async:false,
            success : function(result) {
                // 重新加载数据
                $('#DataGrid的ID').jqGrid('clearGridData');　　　　//先清空，再加载
                $("#DataGrid的ID").jqGrid('setGridParam', {
                    datatype:"local",
                    data:result　　                                      //result为ajax请求成功后后台返回的products
                }).trigger("reloadGrid");
            }
        });
    });
});