〇、目的
select下拉框選擇選擇某選項之后,DataGrid數據表格也能隨之變動。
一、使用的技術
1.后 Java、Spring MVC
2.前 JQuery-select2,jquery.jqgrid
二、代碼-前
1 下拉框 2 <#form:select id="contractId" path="contractId" items="${contractList}" itemLabel="contractCode" itemValue="id" blankOption="true" class="form-control" />
DataGrid配置
1 $("#DataGrid的ID").dataGrid({ 2 3 data: ${products},//json格式 4 datatype: "local", // 設置本地數據 5 autoGridHeight: function(){return 'auto'}, // 設置自動高度 6 7 // 設置數據表格列 8 columnModel: [ 9 {header:'狀態', name:'status', editable:true, hidden:true}, 10 ......
三、代碼-后
Spring MVC中的方法
1 /** 2 * 返回數據 3 */ 4 @RequestMapping("fullProduct") 6 @ResponseBody 7 public List<PurProductC> fullProduct(@Param("contractId")String contractId){ //conractId為選擇下拉框選項后傳遞過來的參數,以此查詢表格數據 8 ContractC contract = new ContractC(); 9 contract.setId(contractId); 10 ContractC c = contractCService.get(contract); 11 List<PurProductC> products = new ArrayList<PurProductC>(); 12 //塞入數據至list 13 return products; 14 }
四、解決方案
1 $(function(){ 2 $("#contractId").select2(); 3 4 $("#contractId").on("select2:select",function(){ //下拉框選中事件 5 var param = $(this).val(); //獲取下拉框選中的值 6 $.ajax({ 7 type:"POST", 8 url:"${ctx}/purchase/purchaseC/fullProduct", 9 data:{contractId:$(this).val()}, 10 async:false, 11 success : function(result) { 13 // 重新加載數據 14 $('#DataGrid的ID').jqGrid('clearGridData'); //先清空,再加載 15 $("#DataGrid的ID").jqGrid('setGridParam', { 16 datatype:"local", 17 data:result //result為ajax請求成功后后台返回的products 18 }).trigger("reloadGrid"); 19 } 20 }); 21 }); 22 });