jQuery MiniUI

标题: 分享内嵌子表格 showAllRowDetail展开显示所有行详细的需求实现 [打印本页]
作者: 479640004    时间: 2018-6-29 22:29:21     标题: 分享内嵌子表格 showAllRowDetail展开显示所有行详细的需求实现

本帖最后由 479640004 于 2018-6-29 22:39 编辑

今天碰到了一个需求是页面加载后内嵌表格需要全部展开并显示出数据，参考了一下别人实现的代码，最后自己研究了出来，分享一下希望可以帮到有同样需求的朋友。

下面是页面代码：

  1. <h1>Inline DetailGrid 内嵌子表格</h1>

  3. <div id="dept_grid" class="mini-datagrid" style="width: 700px; height: auto;"
  4.     allowresize="true"
  5.     url="../data/AjaxService.aspx?method=GetDepartments" idfield="id"
  6.     autohiderowdetail="false">
  7.     <div property="columns">
  8.         <div type="expandcolumn">#</div>
  9.         <div field="id" width="80" headeralign="center">ID</div>
  10.         <div field="name" width="320" headeralign="left">部门名称</div>
  11.     </div>
  12. </div>

  14. <div id="detailGrid_Form" style="display: none;">
  15.     <div id="employee_grid" class="mini-datagrid" style="width: 100%; height: 150px;"
  16.         url="../data/AjaxService.aspx?method=GetDepartmentEmployees">
  17.         <div property="columns">
  18.             <div field="loginname" width="120" headeralign="center" allowsort="true">
  19.                 员工帐号
  20.                     <input property="editor" class="mini-textbox" />
  21.             </div>
  22.             <div field="gender" width="100" allowsort="true" renderer="onGenderRenderer"
  23.                 align="center" headeralign="center">
  24.                 性别
  25.             </div>
  26.             <div field="age" width="100" allowsort="true">
  27.                 年龄
  28.             </div>
  29.             <div field="birthday" width="100" allowsort="true" dateformat="yyyy-MM-dd">
  30.                 出生日期
  31.             </div>
  32.             <div field="createtime" width="100" headeralign="center" dateformat="yyyy-MM-dd" allowsort="true">
  33.                 创建日期
  34.             </div>
  35.         </div>
  36.     </div>
  37. </div>
复制代码
JS代码：
[attach]11037[/attach]



首先需要对主表设置 onshowrowdetail 事件，onupdate 事件，autohiderowdetail 属性。

onshowrowdetail 事件用来实现加载行详细信息。

onupdate 事件用来让表格渲染完毕后执行主表 showAllRowDetail 显示所有行详细。（注：不能用onload事件来执行显示所有行详细方法，因为仅仅是数据加载完了表格却没有加载完，在执行getRowDetailCellEl 获取行详细DOM对象 的时候会出错）

autohiderowdetail 属性设置为 false ，这样展开详细行时就不会自动隐藏其他详细行，默认为true。


因为每行都需要显示和加载表格数据所以不用已经在HTML写好的子表，而是通过JS的方式创建一个子表并绑定到每行中。


作者: felt    时间: 2018-7-2 11:03:38

[attach]11043[/attach]
可以参考一下这个示例






欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2