随笔分类 - jQuery
摘要：可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的语法 2、把动态内容存放到数组中，再遍历数组动态创建html元素 3、使用模版 □ 使用jQuery动态创建元素追加到jQuery对象上。 1: 2: 3: 4: 17: 18: 19: ...
阅读全文
摘要：本篇体验MVC上传文件，从表单上传过渡到jquery异步上传。 MVC最基本的上传文件是通过form表单提交方式□ 前台视图部分 □ 控制器部分[HttpMethod.Post]public ActionResult FileUpload(HttpPostedFileBase uploadFile){ if(uploadFile.ContenctLength > 0) { //获得保存路径 string filePath = Path.Combine(HttpContext.Server.MapPath("../Uploads"), ...
阅读全文
摘要：本篇体验使用$.ajax()加载部分视图。与加载部分视图相关的包括： RenderPartial和RenderAction区别 使用jquery加载部分视图01-使用$.get() □ HomeController public class HomeController : Controller { public ActionRes...
阅读全文
摘要：使用Html.RenderParital或Html.RenderAction可以在主视图中加载部分视图。 两种方法是有区别的，在"RenderPartial和RenderAction区别"中体验过。本篇体验使用jquery加载部分视图。 □ HomeControllerusing System.Web;using System.Web.Mvc;using _01.Models;namespace _01.Controllers{ public class HomeController : Controller { public ActionResult Index()...
阅读全文
摘要：本文体验datagrid单元格的格式化和样式化。 datagrid显示的DOM结构 文字 field属性对应字段. div中的内容对应单元格内容。 formatter的用法 field: 'UserStatus', title: '状态', formatter: function (value, row, index) {...
阅读全文
摘要：本文体验与勾选有关的特性。 需要加载的books.json 展开{ "total": 4, "rows": [ { "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr...
阅读全文
摘要：本文体验datagrid的排序。 □ 思路 当点击datagrid的标题，视图传递给Controller的Form Data类似这样：page=1&rows=10&sort=CustomerID&order=asc。为了应对变化，把关于分页的封装成基类，其他关于排序或搜索的封装成继承该基类的子类。再把这些子类对象实例传递给服务层方法。 相关Model 展开 //显示表相关 publ...
阅读全文
摘要：本文主要通过一个子datagrid来实现主次表。谢谢Kevin的博文。 代码部分与http://www.cnblogs.com/darrenji/p/3576258.html相似，这里只列出不一样的地方。 最终效果： ProductController 让子表Product返回json字符串 public ActionResult GetJsonByCategory(int?...
阅读全文
摘要：本文主要体验用jQuery Easyui的datagrid来实现Master-Detail主次表。谢谢Kevin的博文，助我打开了思路。 主表显示所有的Category，当点击主表的展开按钮，显示该Category下的所有Product。 涉及显示的2个Model 展开namespace DataGridInMVC2.Models{ public class Category {...
阅读全文
摘要：本文主要体验datagrid的frozenColumns属性。□ frozenColumns效果： 在frozenColumns的列将保持不动，而其他列横向滚动。 □ frozenColumns效果实现的前提： 1、给所有的列表上宽度，比如width:80 2、frozenColumns中的列必须是从左侧开始，并且是连续的 3、必须把datagrid的fitColumns属性设置为false $('#tt').datagrid({ url: 'Home/GetData', wid...
阅读全文
摘要：本文主要来体验在搜索区域增加更多的搜索条件，主要包括：※ 使用jQuery ui的datepicker显示时间，设置显示格式、样式。 ※ 设置jQuery ui的onClose事件，使开始和结束时间形成约束，即选择开始时间为某天，结束时间的选择范围只能在该天以后，反之亦然。 ※ 下拉框显示枚举值本文只关注视图显示，不涉及后台逻辑。关于搜索条件的过滤，请参照"datagrid在MVC中的运用02"。 关于显示时间□ Html 时间从： 到： 搜索 □ js部分 ...
阅读全文
摘要：本文介绍在datagrid上同时添加搜索和操作区域。 仅仅是增加操作区域□ 方法1$('#dg').datagrid({ toolbar: '#tb' }); □ 方法2$('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help'
阅读全文
摘要：本文体验datagrid显示单行或多行内容。分别用到了datagrid的getSelected,getSelections方法。 Html部分 GetSelected GetSelections 选择单行 //获取单行内容 function getSelected() { //获取选中的行 var row = $('#tt').datagrid('getSelected'); if (row) { $.messager.alert("单行结果", 'ItemId:' + row.ItemId + '\nPrice:&#
阅读全文
摘要：本文接着上一篇，来体验给datagrid加上搜索功能。主要涉及到：※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装效果图： 查询参数封装分页相关的是每个页面都能用到的，所以把分页相关的封装成基类。 与查询相关的，封装成继承基类的子类。 public class PageParam { public int PageSize { get; set; } public int PageIndex { get; set; } } public class BookParam : PagePa...
阅读全文
摘要：本文体验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 decimal UnitCost { ...
阅读全文
摘要：用了2个jquery的2个文件： □ 思考浏览页面，打开开发者工具，发现是在jquery.unobtrusive-ajax.min.js中报错了。 而在以前jquery-1.5.1.min.js和jquery.unobtrusive-ajax.min.js是不会报错的。 估计是jquery版本升级后，在新的版本中已经没有'live'方法。□ 解决方法使用jQuery M...
阅读全文
浙公网安备 33010602011771号