当前位置: 代码迷 >> Web前端 >> jqGrid与Struts2的组合应用(八) ―― 奇妙的subGrid子表格
  详细解决方案

jqGrid与Struts2的组合应用(八) ―― 奇妙的subGrid子表格

热度:82   发布时间:2013-01-23 10:44:49.0
jqGrid与Struts2的结合应用(八) ―― 奇妙的subGrid子表格

jqGrid的一项高级功能就是嵌套子表格,使用起来也非常简单。使用的方式有两种:

  • 使用普通的subGrid子表格;
  • 使用一个完整jqGrid作为子表格;

显然第二种方式更加通用,功能更加强大,因此我主要使用第二种方式。至于第一种方式,可以具体参考官方文档(http://www.trirand.com/jqgridwiki/doku.php?id=wiki:subgrid )。

使用完整jqGrid作为子表格 

使用子表格,涉及到jqGrid的三个选项:

  • subGrid :首先必须将jqGrid的subGrid选项设置为true,默认为false;当此项设为true的时候,Grid表格的最左边将会添加一列,里面有一个“+”图标,用于展开子格;
  • subGridRowExpanded :当点击“+”展开子表格时,将触发此选项定义的事件方法;
  • subGridRowColapsed :当点击“-”收起子表格时,将触发此选项定义的事件方法;

注1 :subGridRowExpanded定义的事件方法函数将会得到两个参数:

  • subgrid_id :子表格的id;当子表格展开的时候,在主表格中会创建一个div元素用来容纳子表格,subgrid_id就是这个div的id。
  • row_id :主表格中所要展开子表格的行的id。


注2 :在subGridRowExpanded定义的事件方法函数中,即可根据以上两个参数,创建新的jqGrid对象,其中的options选项可参考主表格的jqGrid选项来运用。可以理解为在主表格中在嵌套一个新的jqGrid对象。当然,在subGridRowExpanded定义的事件函数中,也不一定非得嵌套一个新的jqGrid到主表格,可以将其放置于任何自己希望的位置,甚至做些别的操作,根本不去里理会子表格,比如使用$.ajax()向Server发送ajax请求,并根据返回的json,做些自定义的操作。

注3 :应当注意subGridRowColapsed的拼写并太符合规范,但却不得不遵循这个拼写。哈哈~

注4 :相对于subGridRowExpanded必须定义事件函数来完成操作,subGridRowColapsed不用刻意定义对应的事件函数;因为当行收起的时候,上面提到的那个动态创建用来容纳子表格的div,其里面的内容将会被自动移除(removed)。

注一不是很懂 subgrid_id 不一定是这个名字也可以?

在弹出的子表框中设置

$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); 

设置滚动条

subGridOptions: { "plusicon" : "ui-icon-triangle-1-e", "minusicon" : "ui-icon-triangle-1-s", 

"openicon" : "ui-icon-arrowreturn-1-e", "reloadOnExpand" : false,"selectOnExpand" : true},

将加号设置一下 默认是“+”

  相关解决方案