Easyui 数据网格详细视图（DataGrid DetailView）

数据网格详细视图，如图

一、页面上引入脚本

二、写table

<body><div style="height:300px"><table id="dg" style="width:700px;height:250px"  ></table></div>
</body>

三、初始化table为datagrid，并且初始化详细视图

   <script type="text/javascript">$(function () {$('#dg').datagrid({fit: true,striped: true,   //斑马线title: "订单信息",rownumbers: true,singleSelect: true,idField: 'ID',columns: [[{ field: 'ID', title: '编号', width: 80, halign: 'center', hidden: 'true' },{ field: 'Username', title: '商户名称', width: 100, halign: 'center', },{ field: 'OrderCode', title: '订单号', width: 200, halign: 'center', },{ field: 'Date', title: '日期', width: 100, halign: 'center', formatter: DateTimeFormatter },]],toolbar: "#tool",url: "@Url.Action("Get")",pagination: true,   //是否分页pageSize: 5,pageList: [5, 10, 15, 20],sortName: 'ID',sortOrder: 'desc',view: detailview, //视图类型为详细视图detailFormatter: function (index, row) {     //返回行明细内容的格式化函数。return '<div style="padding:2px; height:50px""><table class="ddv"></table></div>';},onExpandRow: function (index, row) {     //当展开一行时触发。var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');ddv.datagrid({url: '@Url.Action("GetOrderDetail")?ID=' + row.ID,fitColumns: true,singleSelect: true,rownumbers: true,loadMsg: '',height: 'auto',columns: [[{ field: 'ID', title: '编号', width: 100 },{ field: 'ColorName', title: '颜色', width: 100 },{ field: 'Price', title: '单价', width: 100 },{ field: 'Count', title: '数量', width: 100 },{ field: 'ProName', title: '商品名称', width: 200 },{ field: 'SizeName', title: '鞋码', width: 100 }]],onResize: function () { $('#dg').datagrid('fixDetailRowHeight', index);    //fixDetailRowHeight当展开一行时触发。},  onLoadSuccess: function () {setTimeout(function () {$('#dg').datagrid('fixDetailRowHeight', index);}, 0);}});$('#dg').datagrid('fixDetailRowHeight', index);}});})</script>

四、mvc 后台获取主页面和详细页面的方法

 public override ActionResult Get(int rows, int page, Order model) {int count;var list = Bll.Search(model, true, x => x.ID,  rows,page,out count).Select(x => new { x.ID,x.OrderCode,x.CusId,Username=x.Users.Name,x.Date}).ToList();return Json(new { total = count, rows = list });        }public ActionResult GetOrderDetail(int ID) {OrderDetailBll bll = new OrderDetailBll();var list = bll.Search(x=>x.OrderID==ID).Select(x => new { x.ID,ColorName=x.Color.Name,x.Count,x.Price,ProName=x.Product.Name,SizeName=x.Size.Name }).ToList();return Json(new { total = list.Count(), rows = list },JsonRequestBehavior.AllowGet);        }

Easyui 数据网格详细视图（DataGrid DetailView）相关推荐

easyui treegrid php,jQuery EasyUI 数据网格与树插件 – Treegrid 树形网格 | 菜鸟教程
jQuery EasyUI 数据网格与树插件 - Treegrid 树形网格 jQuery EasyUI 插件扩展自 $.fn.datagrid.defaults.通过 $.fn.treegrid. ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建页脚摘要
jQuery EasyUI 数据网格 - 创建页脚摘要在本教程中,我们将向您展示如何在数据网格(datagrid)页脚显示摘要信息行. 为了显示页脚行,您应该设置 showFooter 属性为 tr ...
雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 设置排序
jQuery EasyUI 数据网格 - 设置排序本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...
jQuery EasyUI 数据网格
jQuery EasyUI 数据网格 - 转换 HTML 表格为数据网格本节将介绍jQuery EasyUI数据网格的运用,主要内容为如何将HTML表格转换为数据网格. 本实例演示如何转换表格(ta ...
雷林鹏分享：jQuery EasyUI 数据网格 - 启用行内编辑
jQuery EasyUI 数据网格 - 启用行内编辑可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 创建属性网格
jQuery EasyUI 数据网格 - 创建属性网格属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建 ...
java 数据网格,easyui数据网格
easyui中的数据网格应用 1.页面代码: class="java" name="code"> String path = request.getCon ...

Easyui 数据网格详细视图（DataGrid DetailView）

数据网格详细视图，如图

Easyui 数据网格详细视图（DataGrid DetailView）相关推荐

最新文章

热门文章