本文主要通过一个子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)的更多相关文章

  1. datagrid在MVC中的运用01-基本属性并实现分页

    本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view ...

  2. datagrid在MVC中的运用05-加入时间搜索条件,枚举填充下拉框

    本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间 ...

  3. datagrid在MVC中的运用07-实现Master-Detail(使用PartialView)

    本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该C ...

  4. datagrid在MVC中的运用03-选择单行或多行

    本文体验datagrid显示单行或多行内容.分别用到了datagrid的getSelected,getSelections方法. Html部分 <a href="#" cla ...

  5. jQuery EasyUI DataGrid在MVC中的运用-基本属性并实现分页

    ※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public strin ...

  6. datagrid在MVC中的运用10-勾选

    本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": ...

  7. datagrid在MVC中的运用09-实现排序

    本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=Custo ...

  8. datagrid在MVC中的运用06-固定连续列

    本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...

  9. datagrid在MVC中的运用02-结合搜索

    本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...

随机推荐

  1. gtk+学习笔记(四)

    今天看了下单选按钮的设置,实现起来还是挺简单的,就是自己太不熟练 radio=gtk_radio_button_new_with_label(NULL,"a"); //第一次创建单 ...

  2. 矩阵链乘(UVa 442)

    结构体 struct matrix 用来保存矩阵的行和列: map<string,matrix> 用来保存矩阵名和相应的行列数: stack<string> 用来保存表达式中遇 ...

  3. Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out)

    Action(8):Error-26608:HTTP Status-Code=504(Gateway Time-out) 若出现如下图问题, 1.在Vuser Generator中的Tools---& ...

  4. 8-3 4Values Whose Sum is Zero 和为0的四个值

    给定四个n元素集合 ABCD   要求分别从中取一个元素 abcd   使得他们的合为0   问有多少中取法 map果然炸了 #include<bits/stdc++.h> using n ...

  5. Ubuntu16.04下Hive的安装与配置

    一.系统环境 os : Ubuntu 16.04 LTS 64bit jdk : 1.8.0_161 hadoop : 2.6.4mysql : 5.7.21 hive : 2.1.0 在配置hive ...

  6. hdoj1232 畅通工程(并查集)

    题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1232 思路 使用并查集求解. 代码 #include <iostream> #includ ...

  7. Ionic入门六:按钮

    1.基本使用 按钮是移动app不可或缺的一部分,不同风格的app,需要的不同按钮的样式. 默认情况下,按钮显示样式为:display: inline-block. <button class=& ...

  8. 预备作业02:体会做中学(Learning By Doing)

    1.很惭愧,我并没有什么技能能强过大家. 2...... 3.我觉得培养一个技能,必须要通过勤勉的练习,认真的学习,还有不断地结合实践. 4.我觉得我学习<程序设计与数据结构>之后应该对程 ...

  9. C#语言-NPOI.dll导入Excel功能的实现

    前言:刚工作那会,公司有一套完善的MVC框架体系,每当有导入EXCEL功能要实现的时候,都会借用框架里自带的导入方法,一般三下五除二就完成了,快是快,可总是稀里糊涂的,心里很没有底.前几天,在另一个原 ...

  10. 超实用 Git 使用方式介绍

    都说程序员若是不知道 GitHub 就不是一个合格的程序员,其实这话说的过分了,不知道就学嘛,今天我们就来说说 Git 和 GitHub 到底是什么. 我们在开发软件的时候,常常是需要多人协作完成,这 ...