备案控制台
开发者社区 开发与运维 文章 正文

22jqGrid - 多级表格2

2023-10-24 20
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 22jqGrid - 多级表格2

这个例子展示了用一个表格来作为多级表格。

HTML代码举例

<html>
  <head>
    <title>jqGrid 实例</title>
  </head>
  <body>
    ···代码省略···
    <table id="listsg11"></table> 
    <div id="pagersg11"></div>
    ···代码省略···
  </body>
</html>

javascript代码举例

$(function(){
  pageInit();
});
function pageInit(){
  jQuery("#listsg11").jqGrid(
      {
        url : ctx+'/JSONData',
        datatype : "json",
        height : 190,
        colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
        colModel : [ 
                     {name : 'id',index : 'id',  width : 55}, 
                     {name : 'invdate',index : 'invdate',width : 90}, 
                     {name : 'name',index : 'name',width : 100}, 
                     {name : 'amount',index : 'amount',width : 80,align : "right"}, 
                     {name : 'tax',index : 'tax',width : 80,align : "right"}, 
                     {name : 'total',index : 'total',width : 80,align : "right"}, 
                     {name : 'note',index : 'note',width : 150,sortable : false} 
                   ],
        rowNum : 8,
        rowList : [ 8, 10, 20, 30 ],
        pager : '#pagersg11',
        sortname : 'id',
        viewrecords : true,
        sortorder : "desc",
        multiselect : false,
        subGrid : true,
        caption : "Grid as Subgrid",
        subGridRowExpanded : function(subgrid_id, row_id) {
          // we pass two parameters 
          // subgrid_id is a id of the div tag created whitin a table data 
          // the id of this elemenet is a combination of the "sg_" + id of the row 
          // the row_id is the id of the row 
          // If we wan to pass additinal parameters to the url we can use 
          // a method getRowData(row_id) - which returns associative array in type name-value
          // here we can easy construct the flowing
          var subgrid_table_id, pager_id;
          subgrid_table_id = subgrid_id + "_t";
          pager_id = "p_" + subgrid_table_id;
          $("#" + subgrid_id).html(
              "<table id='" + subgrid_table_id
                  + "' class='scroll'></table><div id='"
                  + pager_id + "' class='scroll'></div>");
          jQuery("#" + subgrid_table_id).jqGrid(
              {
                url : ctx+"/SubGrid?q=2&id=" + row_id,
                datatype : "json",
                colNames : [ 'No', 'Item', 'Qty', 'Unit','Line Total' ],
                colModel : [ 
                             {name : "num",  index : "num",width : 80,key : true}, 
                             {name : "item",index : "item",  width : 130}, 
                             {name : "qty",index : "qty",width : 70,align : "right"}, 
                             {name : "unit",index : "unit",width : 70,align : "right"}, 
                             {name : "total",index : "total",width : 70,align : "right",sortable : false} 
                           ],
                rowNum : 20,
                pager : pager_id,
                sortname : 'num',
                sortorder : "asc",
                height : '100%'
              });
          jQuery("#" + subgrid_table_id).jqGrid('navGrid',
              "#" + pager_id, {
                edit : false,
                add : false,
                del : false
              });
        },
        subGridRowColapsed : function(subgrid_id, row_id) {
          // this function is called before removing the data 
          //var subgrid_table_id; 
          //subgrid_table_id = subgrid_id+"_t"; 
          //jQuery("#"+subgrid_table_id).remove();
        }
      });
  jQuery("#listsg11").jqGrid('navGrid', '#pagersg11', {
    add : false,
    edit : false,
    del : false
  });
}

Master java servlet代码举例

public class JSONData extends HttpServlet {
  private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JSONData() {
        super();
        // TODO Auto-generated constructor stub
    }
  @Override
  protected void doGet(HttpServletRequest req, HttpServletResponse resp)
      throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(req,resp);
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    String page = request.getParameter("page");
    String jsondata = "{}";
    if("1".equals(page)){
      jsondata = "{\"page\":\"1\"," +
          "      \"total\":2," +
          "      \"records\":\"13\"," +
          "      \"rows\":" +
          "          [" +
          "            {" +
          "              \"id\":\"13\"," +
          "              \"cell\":" +
          "                  [\"13\",\"2007-10-06\",\"Client 3\",\"1000.00\",\"0.00\",\"1000.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"12\"," +
          "              \"cell\":" +
          "                  [\"12\",\"2007-10-06\",\"Client 2\",\"700.00\",\"140.00\",\"840.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"11\"," +
          "              \"cell\":" +
          "                  [\"11\",\"2007-10-06\",\"Client 1\",\"600.00\",\"120.00\",\"720.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"10\"," +
          "              \"cell\":" +
          "                  [\"10\",\"2007-10-06\",\"Client 2\",\"100.00\",\"20.00\",\"120.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"9\"," +
          "              \"cell\":" +
          "                  [\"9\",\"2007-10-06\",\"Client 1\",\"200.00\",\"40.00\",\"240.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"8\"," +
          "              \"cell\":" +
          "                  [\"8\",\"2007-10-06\",\"Client 3\",\"200.00\",\"0.00\",\"200.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"7\"," +
          "              \"cell\":" +
          "                  [\"7\",\"2007-10-05\",\"Client 2\",\"120.00\",\"12.00\",\"134.00\",null]" +
          "            }," +
          "            {" +
          "              \"id\":\"6\"," +
          "              \"cell\":" +
          "                  [\"6\",\"2007-10-05\",\"Client 1\",\"50.00\",\"10.00\",\"60.00\",\"\"]" +
          "            }," +
          "            {" +
          "              \"id\":\"5\"," +
          "              \"cell\":" +
          "                  [\"5\",\"2007-10-05\",\"Client 3\",\"100.00\",\"0.00\",\"100.00\",\"no tax at all\"]" +
          "            }," +
          "            {" +
          "              \"id\":\"4\"," +
          "              \"cell\":" +
          "                  [\"4\",\"2007-10-04\",\"Client 3\",\"150.00\",\"0.00\",\"150.00\",\"no tax\"]" +
          "            }" +
          "          ]," +
          "      \"userdata\":{\"amount\":3220,\"tax\":342,\"total\":3564,\"name\":\"Totals:\"}" +
          "    }";
    }else{
      jsondata = "{" +
          "    \"page\":\"2\"," +
          "    \"total\":2," +
          "    \"records\":\"13\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"3\"," +
          "        \"cell\":[\"3\",\"2007-10-02\",\"Client 2\",\"300.00\",\"60.00\",\"360.00\",\"note invoice 3 & and amp test\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"2007-10-03\",\"Client 1\",\"200.00\",\"40.00\",\"240.00\",\"note 2\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"2007-10-01\",\"Client 1\",\"100.00\",\"20.00\",\"120.00\",\"note 1\"]" +
          "      }" +
          "    ]," +
          "    \"userdata\":{\"amount\":600,\"tax\":120,\"total\":720,\"name\":\"Totals:\"}}";
    }
    response.getWriter().write(jsondata);
  }
}

Detail java servlet代码举例

public class SubGrid extends HttpServlet {
  private static final long serialVersionUID = 1L;
    /**
     * @see HttpServlet#HttpServlet()
     */
    public SubGrid() {
        super();
        // TODO Auto-generated constructor stub
    }
  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    doPost(request,response);
  }
  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // TODO Auto-generated method stub
    String id = request.getParameter("id");
    int iId = Integer.parseInt(id);
    String jsondata = "{}";
    switch (iId) {
    case 13:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 13\",\"1.00\",\"1000.00\",\"1 000.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 12:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"400.00\",\"400.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 4\",\"1.00\",\"300.00\",\"300.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 11:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"4\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"2.00\",\"100.00\",\"200.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"3.00\",\"50.00\",\"150.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"3\"," +
          "        \"cell\":[\"3\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"4\"," +
          "        \"cell\":[\"4\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 10:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 4\",\"1.00\",\"70.00\",\"70.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 5\",\"3.00\",\"10.00\",\"30.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 9:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 3\",\"1.00\",\"60.00\",\"60.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 6\",\"1.00\",\"140.00\",\"140.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 8:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"3\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"120.00\",\"120.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"3\"," +
          "        \"cell\":[\"3\",\"item 3\",\"1.00\",\"30.00\",\"30.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 7:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 5\",\"2.00\",\"10.00\",\"20.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 6:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 4\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 5:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"1\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 4:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"1.00\",\"50.00\",\"50.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 3:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 3\",\"1.00\",\"100.00\",\"100.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 4\",\"1.00\",\"200.00\",\"200.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 2:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"2.00\",\"20.00\",\"40.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"4.00\",\"40.00\",\"160.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    case 1:
      jsondata = "{" +
          "    \"page\":\"1\"," +
          "    \"total\":1," +
          "    \"records\":\"2\"," +
          "    \"rows\":[" +
          "      {" +
          "        \"id\":\"1\"," +
          "        \"cell\":[\"1\",\"item 1\",\"1.00\",\"20.00\",\"20.00\"]" +
          "      }," +
          "      {" +
          "        \"id\":\"2\"," +
          "        \"cell\":[\"2\",\"item 2\",\"2.00\",\"40.00\",\"80.00\"]" +
          "      }" +
          "    ]" +
          "  }";
      break;
    default:
      break;
    }
    response.getWriter().write(jsondata);
  }
}
文章标签：
Java
JavaScript
前端开发
阿甘兄
目录
相关文章
不念那年晚春
|
7月前
|
数据库
ElementUI动态树，数据表格以及分页的实现
ElementUI动态树，数据表格以及分页的实现
不念那年晚春
18 0
阿甘兄
|
7月前
|
JavaScript 前端开发 Java
72jqGrid 分组表头 - 有合并列的样式
72jqGrid 分组表头 - 有合并列的样式
阿甘兄
36 0
阿甘兄
|
7月前
|
JSON JavaScript 前端开发
77jqGrid - 带有汇总页脚的分组
77jqGrid - 带有汇总页脚的分组
阿甘兄
20 0
蒋川@卡拉云
|
前端开发 JavaScript API
在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格
在 Vue 中，表格组件是使用频率及复杂度排名第一的组件，前端经常需要根据后台返回的数据动态渲染表格，比如动态表格如何生成，因为表格的列并不是固定的，在未知表格具体有哪些列的场景下，前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理，比如第一列是日期，需要把相同的日期进行合并，这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云 ，卡拉云是新一代低代码开发工具，可一键接入常见数据库及 API ，无需懂前端，仅需拖拽即
蒋川@卡拉云
2543 0
bug天选之子
|
8月前
elementui表格自定义表头的两种方法
这篇文章主要是总结了elementui-table表格怎么自定义表头，两种方式需求不一样，大家还有啥好的方法或者遇到的bug评论区留言大家一起解决。
bug天选之子
353 0
你挚爱的强哥
|
6天前
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
你挚爱的强哥
20 0
elementUI 写一个表头列名、表体单元格样式、翻页器相对较为动态的表格el-table
朱琳均
|
5月前
ElementUI之动态树+数据表格+分页-＞动态树,动态表格
ElementUI之动态树+数据表格+分页-＞动态树,动态表格
朱琳均
21 0
阿甘兄
|
7月前
|
JavaScript 前端开发 Java
21jqGrid - 多级表格1
21jqGrid - 多级表格1
阿甘兄
23 0
阿甘兄
|
7月前
|
JavaScript 前端开发 Java
62jqGrid - 多级排序
62jqGrid - 多级排序
阿甘兄
29 0
阿甘兄
|
7月前
|
前端开发 JavaScript Java
70jqGrid - 一次性加载多级表格数据
70jqGrid - 一次性加载多级表格数据
阿甘兄
21 0