EasyUI DataGrid DetailView（数据表格详细展示带子表格）

Mark一下EASY UI 的数据表格详细展示使用记录。

第一步：创建页面布局

这一步主要是引用Easy UI的JS，除了easyui.min.js还有datagrid-detailview.js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="datagrid-detailview.js">
<script type="text/javascript" src="datagrid-detailview.js"></script>
</head>
<body>
<table id="categorytt"></table>
</body>
</html>

第二步：JQuery动态加载父子表格

思路是：

1.先载入父类表格 detailFormatter：function(rowIndex, rowData){｝先定义一个空表格
2.用数据表格详细展示自带的onExpandRow：function(index,row){｝加载子类

注意：

-加载子类成功后要调用$(‘#categorytt’).datagrid(‘fixDetailRowHeight’,index);修饰父类表格的行高

<script type="text/javascript"> //显示父表格$(function(){$('#categorytt').datagrid({ title:'类别列表', remoteSort:false, singleSelect:true,height:'auto',loadMsg:'加载中，请稍后...',nowrap:false, fitColumns:true, url:'${pageContext.request.contextPath}/back/front_manage/categoryAction_getBackCategory', //查询父类的URLcolumns:[[              {field:'categoryName',title:'类别名称',width:250,align:'right',sortable:true}, {field:'categorySn',title:'类别Sn',width:100,sortable:true}, ]], view: detailview, detailFormatter: function(rowIndex, rowData){ return '<table class="subCategory"></table>'; },onExpandRow: function(index,row){var subCategory = $(this).datagrid('getRowDetail',index).find('table.subCategory');//找到该父类Formatter的子类表格subCategory.datagrid({url:'${pageContext.request.contextPath}/back/front_manage/categoryAction_getBackCategory?categorySn='+row.categorySn,//查询子类的URL，我这里是根据父行的Sn查询fitColumns:true,singleSelect:true,rownumbers:true,loadMsg:'加载中，请稍后...',height:'auto',columns:[[{field:'subCategoryName',title:'子类名称',width:250,align:'right',sortable:true}, {field:'subCategorySn',title:'子类Sn',width:100,sortable:true}, ]],onResize:function(){$('#categorytt').datagrid('fixDetailRowHeight',index);},onLoadSuccess:function(){$('#categorytt').datagrid('fixDetailRowHeight',index);}});$('#categorytt').datagrid('fixDetailRowHeight',index);}}); })</script>

EasyUI DataGrid DetailView（数据表格详细展示带子表格）相关推荐

easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
【EasyUI】DataGrid DetailView（数据表格详细展示）
效果图: 第一步:创建一个HTML页面 <head> <script type="text/javascript" src="datagrid-deta ...
【EasyUI DataGrid DetailView】表格嵌套子表格
一.功能描述在做项目的时候,要求能够对某一行的数据进行折叠显示,用来查看该行的详细信息.拟通过采用easyui的detailview创建表格分组,大致的效果图如下所示: 二.使用方法本篇博客承接以 ...
easyui—DataGrid（数据表格）
目录一.DataGrid(数据表格) 一.DataGrid(数据表格) DataGrid以表格形式展示数据,并提供了丰富的选择.排序.分组和编辑数据的功能支持.DataGrid的设计用于缩短开发时间 ...
Easyui datagrid detailview使用简介
一.easyui 的 detailview又叫subgrid其实也就类似于分组表格的意思,先见效果图二.下面说下使用方法 1.页面引入样式 <link rel="stylesheet ...
Easyui datagrid detailview使用
easyui 的 detailview又叫subgrid其实也就类似于分组表格的意思,先见效果图二.下面说下使用方法 1.页面引入样式 <link rel="stylesheet&q ...
jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
EasyUI datagrid detailview
全部展开: var me = this; setTimeout(function () { //延时触发easyui datagrid detailviewclick事件, 不用计时器无法展开,不 ...
ThinkPHP+jQuery EasyUI Datagrid查询数据的简单处理
ThinkPHP和jQuery EasyUI这两个都是不错的框架,现在要把它两个整合到一块,做个简单的Ajax调用查询. 在ThinkPHP模板中引入EasyUI的相关文件,然后设置按钮3的调用: & ...

EasyUI DataGrid DetailView（数据表格详细展示带子表格）

EasyUI DataGrid DetailView（数据表格详细展示带子表格）相关推荐

最新文章

热门文章