〇、目的

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

一、使用的技术

1.后 Java、Spring MVC

2.前 JQuery-select2,jquery.jqgrid

二、代码-前

  1. 1 下拉框
  2. 2 <#form:select id="contractId" path="contractId" items="${contractList}" itemLabel="contractCode" itemValue="id" blankOption="true" class="form-control" />
  1. DataGrid配置
    1
    $("#DataGrid的ID").dataGrid({
  2. 2
  3. 3 data: ${products},//json格式
  4. 4 datatype: "local", // 设置本地数据
  5. 5 autoGridHeight: function(){return \'auto\'}, // 设置自动高度
  6. 6
  7. 7 // 设置数据表格列
  8. 8 columnModel: [
  9. 9 {header:\'状态\', name:\'status\', editable:true, hidden:true},
  10. 10 ......

三、代码-后

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

四、解决方案

  1. 1 $(function(){
  2. 2 $("#contractId").select2();
  3. 3
  4. 4 $("#contractId").on("select2:select",function(){            //下拉框选中事件
  5. 5 var param = $(this).val();                       //获取下拉框选中的值
  6. 6 $.ajax({
  7. 7 type:"POST",
  8. 8 url:"${ctx}/purchase/purchaseC/fullProduct",
  9. 9 data:{contractId:$(this).val()},
  10. 10 async:false,
  11. 11 success : function(result) {
  12. 13 // 重新加载数据
  13. 14 $(\'#DataGrid的ID\').jqGrid(\'clearGridData\');    //先清空,再加载
  14. 15 $("#DataGrid的ID").jqGrid(\'setGridParam\', {
  15. 16 datatype:"local",
  16. 17 data:result   //result为ajax请求成功后后台返回的products
  17. 18 }).trigger("reloadGrid");
  18. 19 }
  19. 20 });
  20. 21 });
  21. 22 });

 

版权声明:本文为Drajun原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/Drajun/p/10647848.html