datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)
本文主要通过一个子datagrid来实现主次表。谢谢Kevin的博文。
代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似,这里只列出不一样的地方。
最终效果:
ProductController 让子表Product返回json字符串
public ActionResult GetJsonByCategory(int? categoryId = null)
{
if (!categoryId.HasValue)
{
return new EmptyResult();
}
var service = new Service();
var products = service.LoadProductsByCategory((int)categoryId);
//把Products集合对象实例序列化成json字符串
string str = JsonSerializeHelper.SerializeToJson(products);
return Content(str);
}
/Category/Index视图
展开@{
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>
}
datagrid在MVC中的运用08-实现Master-Detail(使用子datagrid)的更多相关文章
- datagrid在MVC中的运用01-基本属性并实现分页
本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...
- datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框
本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...
- datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)
本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...
- datagrid在MVC中的运用03-选择单行或多行
本文体验datagrid显示单行或多行内容.分别用到了datagrid的getSelected,getSelections方法. Html部分 <a href="#" cla ...
- jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页
※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view model public class Book public strin ...
- datagrid在MVC中的运用10-勾选
本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...
- datagrid在MVC中的运用09-实现排序
本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- datagrid在MVC中的运用02-结合搜索
本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...
随机推荐
- 经典面试题:n个数字(0,1,…,n-1)形成一个圆圈
题目: n个数字(0,1,…,n-1)形成一个圆圈,从数字0开始, 每次从这个圆圈中删除第m个数字(第一个为当前数字本身,第二个为当前数字的下一个数字). 当一个数字删除后,从被删除数字的下一个继续删 ...
- [转载]Visual Studio 各版本下载
文件名称 文件大小 百度网盘下载 微软官方下载 Visual Studio 2015 Enterprise - 企业版 - 简体中文 3.89GB http://pan.baidu.com/s/1bn ...
- VS 2015 序列号/密钥/企业版/专业版
专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV
- CSharp中的?.运算符
在编译chromiumFX工程时候,编译失败,无法正常工作.是运算符 (?.)的错误,经过查找,该运算符 参考NULL 条件运算符(C# 和 Visual Basic) 用于在执行成员访问 (?.) ...
- ASP.NET:MVC中文件上传与地址变化处理
目录 文件的上传和路径处理必须解决下面列出的实际问题: 1.重复文件处理 2.单独文件上传 3.编辑器中文件上传 4.处理文章中的图片路径 5.处理上传地址的变化 一.上传文件和重复文件处理 文件处理 ...
- phpstorm 输入法中文不同步 phpstorm 输入法不跟随光标解决办法
win7系统新安装的phpstorm2017.2版本,试了很多输入法,要么是不显示候选次,要么是输入法候选词总是在屏幕右下角,没有跟随光标移动.百度很久,重要找到解决方案. 就是替换phpstorm安 ...
- thinkphp图像的裁剪、缩放、加水印
ThinkPHP 图片处理函数,需要文字水印字体,可在windows下 控制面板 > 大图标(右上角) > 字体 找到需要的字体 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
- V-by-one
一:v-by-one技术产生背景 LVDS已经在业界盛行多年,近来电视解析度和播放格式的进展已经导致频宽需求大幅增加,具有60Hz和120Hz甚至240Hz更新频率的电视已经在商店内 贩售.2 ...
- ACM训练计划建议(转)
ACM训练计划建议 From:freecode# Date:2015/5/20 前言: 老师要我们整理一份训练计划给下一届的学弟学妹们,整理出来了,费了不少笔墨,就也将它放到博客园上供大家参考. 菜 ...
- 深度学习基础系列(十)| Global Average Pooling是否可以替代全连接层?
Global Average Pooling(简称GAP,全局池化层)技术最早提出是在这篇论文(第3.2节)中,被认为是可以替代全连接层的一种新技术.在keras发布的经典模型中,可以看到不少模型甚至 ...