datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)
2014-03-02 09:19
381 查看
本文主要通过一个子datagrid来实现主次表。谢谢Kevin的博文。
代码部分与/content/3832194.html相似,这里只列出不一样的地方。
最终效果:
展开@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<table id="tt"></table>
@section scripts
{
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/datagrid-detailview.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
initData();
});
function initData(params) {
$('#tt').datagrid({
url: '@Url.Action("GetData","Category")',
width: 600,
height: 400,
title: 'Category列表',
iconCls: 'icon-save',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1
{ field: 'ID', title: '编号'},
{ field: 'Name', title: '类别名称'},
{ field: 'Description', title: '描述', width: 600 }
]],
queryParams: params, //搜索json对象
view: detailview,
detailFormatter: function(index, row) {
return '<div id="ddv-' + index + '" style="padding:5px;"></div>';
},
onExpandRow: function(index, row) {
$('#ddv-' + index).datagrid({
url: '@Url.Action("GetJsonByCategory","Product", new {categoryId = "_id_"})'.replace("_id_", row.ID),
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'CategoryID', title: '类别编号' },
{ field: 'ProductID', title: '产品编号' },
{ field: 'ProductName', title: '产品名称' },
{ field: 'QuantityPerUnit', title: '单元数量' },
{ field: 'UnitPrice', title: '价格' },
{ field: 'UnitsInStock', title: '库存数量' },
{ field: 'UnitOnOrder', title: '订购数量' }
]],
onResize: function() {
$('#DataGrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function() {
setTimeout(function() {
$('#DataGrid').datagrid('fixDetailRowHeight', index);
},0);
}
});
$('#DataGrid').datagrid('fixDetailRowHeight', index);
}
});
}
</script>
}[/code]
代码部分与/content/3832194.html相似,这里只列出不一样的地方。
最终效果:
展开@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
<link href="~/Content/themes/icon.css" rel="stylesheet" />
<table id="tt"></table>
@section scripts
{
<script src="~/Scripts/jquery.easyui.min.js"></script>
<script src="~/Scripts/datagrid-detailview.js"></script>
<script src="~/Scripts/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function() {
initData();
});
function initData(params) {
$('#tt').datagrid({
url: '@Url.Action("GetData","Category")',
width: 600,
height: 400,
title: 'Category列表',
iconCls: 'icon-save',
fitColumns: true,
rownumbers: true, //是否加行号
pagination: true, //是否显式分页
pageSize: 15, //页容量,必须和pageList对应起来,否则会报错
pageNumber: 2, //默认显示第几页
pageList: [15, 30, 45],//分页中下拉选项的数值
columns: [[
//book.ItemId, book.ProductId, book.ListPrice, book.UnitCost, book.Status, book.Attr1
{ field: 'ID', title: '编号'},
{ field: 'Name', title: '类别名称'},
{ field: 'Description', title: '描述', width: 600 }
]],
queryParams: params, //搜索json对象
view: detailview,
detailFormatter: function(index, row) {
return '<div id="ddv-' + index + '" style="padding:5px;"></div>';
},
onExpandRow: function(index, row) {
$('#ddv-' + index).datagrid({
url: '@Url.Action("GetJsonByCategory","Product", new {categoryId = "_id_"})'.replace("_id_", row.ID),
fitColumns: true,
singleSelect: true,
rownumbers: true,
loadMsg: '',
height: 'auto',
columns: [[
{ field: 'CategoryID', title: '类别编号' },
{ field: 'ProductID', title: '产品编号' },
{ field: 'ProductName', title: '产品名称' },
{ field: 'QuantityPerUnit', title: '单元数量' },
{ field: 'UnitPrice', title: '价格' },
{ field: 'UnitsInStock', title: '库存数量' },
{ field: 'UnitOnOrder', title: '订购数量' }
]],
onResize: function() {
$('#DataGrid').datagrid('fixDetailRowHeight', index);
},
onLoadSuccess: function() {
setTimeout(function() {
$('#DataGrid').datagrid('fixDetailRowHeight', index);
},0);
}
});
$('#DataGrid').datagrid('fixDetailRowHeight', index);
}
});
}
</script>
}[/code]
相关文章推荐
- 使用silverlight 实现DataGrid主从结构展示(MasterDetail)
- datagrid在MVC中的运用01-基本属性并实现分页
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
- datagrid在MVC中的运用09-实现排序
- Android的Master/Detail风格界面中实现自定义ListView的单选
- [02] 使用 MVC 5 的 EF6 Code First 入门 系列:实现基本的CRUD功能
- 使用ajax.net实现datagrid的客户端分页
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- MVC使用T4模板生成其他类的具体实现学习笔记2
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- MVC实现有关时间的进度条,使用jQuery ui的progressbar
- MVC 中使用 SignalR 实现推送功能
- 使用html+ajax+formdata+SpringMVC实现单个文件,和多个文件上传功能
- 在 Asp.NET MVC 中使用 SignalR 实现推送功能
- 使用spring实现一个MVC
- 使用RenderMethod 委托实现DataGrid表头合并
- ASP.NET MVC 中使用Spring.NET实现简单的属性注入
- ASP.NET MVC使用HTML辅助器实现分页
- Scott Mitchell 的ASP.NET 2.0数据操作教程之十:使用 GridView 和DetailView实现的主/从报表
- 使用ASP.NET MVC 4 Async Action+jQuery实现消息通知机制的实现代码