本文体验jQuery EasyUI的datagrid在MVC中的应用.主要涉及到: ※ datagrid的基本属性和方法 ※ datagrid分页在前后台的实现 最终效果: 与视图显示对应的view model   public class Book { public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public dec…
本文主要来体验在搜索区域增加更多的搜索条件,主要包括: ※ 使用jQuery ui的datepicker显示时间,设置显示格式.样式. ※ 设置jQuery ui的onClose事件,使开始和结束时间形成约束,即选择开始时间为某天,结束时间的选择范围只能在该天以后,反之亦然. ※ 下拉框显示枚举值 本文只关注视图显示,不涉及后台逻辑.关于搜索条件的过滤,请参照"datagrid在MVC中的运用02". 关于显示时间 □ Html <!--搜索开始--> <div id…
本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表.谢谢Kevin的博文,助我打开了思路. 主表显示所有的Category,当点击主表的展开按钮,显示该Category下的所有Product. 涉及显示的2个Model 展开namespace DataGridInMVC2.Models { public class Category { public int ID { get; set; } public string Name { get; set…
※ datagrid的基本属性和方法  ※ datagrid分页在前后台的实现 最终效果:    与视图显示对应的view model   public class Book public string ItemId { get; set; } public string ProductId { get; set; } public decimal ListPrice { get; set; } public decimal UnitCost { get; set; } public strin…
本文体验与勾选有关的特性. 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.…
本文体验datagrid的排序. □ 思路 当点击datagrid的标题,视图传递给Controller的Form Data类似这样:page=1&rows=10&sort=CustomerID&order=asc.为了应对变化,把关于分页的封装成基类,其他关于排序或搜索的封装成继承该基类的子类.再把这些子类对象实例传递给服务层方法. 相关Model 展开 //显示表相关 public class Customer { public int CustomerID { get; se…
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果实现的前提: 1.给所有的列表上宽度,比如width:80 2.frozenColumns中的列必须是从左侧开始,并且是连续的 3.必须把datagrid的fitColumns属性设置为false $('#tt').datagrid({ url: 'Home/GetData', width: 380…
本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的是每个页面都能用到的,所以把分页相关的封装成基类. 与查询相关的,封装成继承基类的子类. public class PageParam { public int PageSize { get; set; } public int PageIndex { get; set; } }   public…
本文主要通过一个子datagrid来实现主次表.谢谢Kevin的博文. 代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似,这里只列出不一样的地方. 最终效果: ProductController  让子表Product返回json字符串 public ActionResult GetJsonByCategory(int? categoryId = null) { if (!categoryId.HasValue) { return new…
本文介绍在datagrid上同时添加搜索和操作区域. 仅仅是增加操作区域 □ 方法1 $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#&q…