ASP.NET MVC 3程序(一): 如何绑定JQuery插件JQgrid
2012-09-21 10:39
561 查看
今天试用了一些JQuery的插件JQgrid,此插件能非常快捷的帮助我们建立一个CRUD功能的表单,并且具有分页,排序等一些基本功能,非常好用。
这里是JQgrid的下载地址:
http://www.trirand.com/blog/
Demo示例:
http://www.trirand.com/blog/jqgrid/jqgrid.html
下面看下实施步骤:
首先下载好JQgrid的类库之后,在Layout.cshtml中引用他,那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:
接下来我们可以开始在你需要的view文件中书写以下代码,当然你可以根据喜好来配置它的属性,JQgrid的属性非常之多,在上面的Demo示例中你可以找多更多的属性和事件。
这里我们简单介绍以下,url指的是数据源对应的Action,也就是说JQgrid将从这个Action中获取数据,并且指定需要Json数据。ColName和ColMode是你需要显示的列名及数据的表现类型。SortName为排序字段,rowList为分页显示的每页的个数选择,另外我们这里没有使用它自带的增删改查功能,如果你需要使用它们,将代码中的del:false, add:false,
edit:false, search:false 设置为True即可。
另外下面的navButtonAdd是我们添加的两个自定义按钮,分别实现了自定义的查看item和search功能。你也可以添加更多按钮实现自己想要的功能。
下面可以看看在后台的Action代码如何返回我们需要的数据(可以通过你需要的方式来得到例如Linq to sql,entity framework等等,这里我们使用linq作为示例),首先我们需要看看绑定JQgrid数据的这个Action需要接收什么样的参数:
sidx为排序字段名(这里为ID),sord为排序方式(asc,desc),page为页数,rows为每页大小(page_size)
了解参数的意义之后我们可以根据他们来编写代码,以返回合适的数据。
这里context是linq to sql生成的context,另一个值得注意的地方是OrderBy()方法,由于默认的linq orderby方法里面不接受string类型的参数,你可以写lamba表达式来做到这一点,例如 OrderBy(x => x.ID), 但是这样就不能根据输入参数来动态生成linq表达式了,由于不同的排序字段名你需要写多条linq表达式,而这里我们可以以这种方式写的的原因是通过Dynamic Linq来做到的,大家可以看看这里的资源:
http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx
推荐大家使用,很方便。
这里是JQgrid的下载地址:
http://www.trirand.com/blog/
Demo示例:
http://www.trirand.com/blog/jqgrid/jqgrid.html
下面看下实施步骤:
首先下载好JQgrid的类库之后,在Layout.cshtml中引用他,那么之后我们就不需要在每一个view中都去引用相同的类库了。这里我引用了这几个文件来帮助我们开发:
<link href="../../Scripts/JQgrid/jquery-ui-1.8.23.custom/css/ui-lightness/jquery-ui-1.8.23.custom.css" rel="stylesheet" type="text/css" /> <link href="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="../../Scripts/JQgrid/jquery.jqGrid-4.4.1/js/jquery.jqGrid.min.js" type="text/javascript"></script>
接下来我们可以开始在你需要的view文件中书写以下代码,当然你可以根据喜好来配置它的属性,JQgrid的属性非常之多,在上面的Demo示例中你可以找多更多的属性和事件。
<script type="text/javascript"> jQuery(document).ready(function () { jQuery("#list").jqGrid({ url: '/UserView/UserMaintenance', //---necessary datatype: 'json', //---necessary mtype: "GET", //---necessary //datatype: 'local', //----add //data: mydata, // ---add colNames: ['Name', 'ID', 'Active', 'Customer Group'], //----edit colModel: [ { name: 'Name', index: 'Name', width: 500, sortable: false }, { name: 'CP_CSTMR_ID', index: 'CP_CSTMR_ID', width: 100 }, { name: 'Active', index: 'Active', width: 100, sortable: false }, { name: 'Customer Group', index: 'Customer Group', width: 100, sortable: false} //----edit ], pager: '#pager', rowNum: 10, sortname: 'CP_CSTMR_ID', sortable: true, sortorder: 'asc', rowList: [10, 15, 20], viewrecords: true, caption: 'User Maintenance list', height: 230, loadtext: 'Loading Data please wait ...', postData: { name: function () { return jQuery("#name").val(); }, active: function () { return jQuery("#active option:selected").val(); } }, onSortCol: function (index, colindex, sortorder) { } // gridComplete: function() // { // $(window).resize(function(){ // var winwidth=$(window).width()*0.5; // $("#list").setGridWidth(winwidth); // }) // } }); jQuery("#list") .jqGrid('navGrid', '#pager', { del: false, add: false, edit: false, search: false }, {}, {}, {}, { multipleSearch: false }) .navButtonAdd('#pager', { caption: "Search", buttonicon: "ui-icon-search", onClickButton: function () { }, position: "last", id:"searchButton" }) .navButtonAdd('#pager', { caption: "View Detail", buttonicon: "ui-icon-detail", id: "viewdetails", onClickButton: function () { test(); }, position: "last" }) //jQuery("#list").jqGrid('filterToolbar', options); }); </Script>
这里我们简单介绍以下,url指的是数据源对应的Action,也就是说JQgrid将从这个Action中获取数据,并且指定需要Json数据。ColName和ColMode是你需要显示的列名及数据的表现类型。SortName为排序字段,rowList为分页显示的每页的个数选择,另外我们这里没有使用它自带的增删改查功能,如果你需要使用它们,将代码中的del:false, add:false,
edit:false, search:false 设置为True即可。
另外下面的navButtonAdd是我们添加的两个自定义按钮,分别实现了自定义的查看item和search功能。你也可以添加更多按钮实现自己想要的功能。
下面可以看看在后台的Action代码如何返回我们需要的数据(可以通过你需要的方式来得到例如Linq to sql,entity framework等等,这里我们使用linq作为示例),首先我们需要看看绑定JQgrid数据的这个Action需要接收什么样的参数:
public ActionResult UserMaintenance(string sidx, string sord, int page, int rows)
sidx为排序字段名(这里为ID),sord为排序方式(asc,desc),page为页数,rows为每页大小(page_size)
了解参数的意义之后我们可以根据他们来编写代码,以返回合适的数据。
STRDataContext context = new STRDataContext(); int pageIndex = Convert.ToInt32(page) - 1; int pageSize = rows; int? totalRecord = context. Customer.Count(); int totalPages = (int)Math.Ceiling((float)totalRecord / (float)pageSize); var union = from c in context.Customer join p in context.Group on c.GroupID equals p.GroupID select new { c.Name, c.ID, c.Active, p.GroupName, }; var results = from entity in union.OrderBy(sidx + " " + sord).Skip(pageIndex * pageSize).Take(pageSize) select entity; var jsonData = new { total = totalPages, page = page, records = totalRecord, rows = (from item in results select new { id = item.ID.ToString(), cell = new string[] { item.Name.ToString(), item.ID.ToString(), item.Active.ToString(), item.GroupName.ToString(), } }).ToArray() }; return Json(jsonData, JsonRequestBehavior.AllowGet);
这里context是linq to sql生成的context,另一个值得注意的地方是OrderBy()方法,由于默认的linq orderby方法里面不接受string类型的参数,你可以写lamba表达式来做到这一点,例如 OrderBy(x => x.ID), 但是这样就不能根据输入参数来动态生成linq表达式了,由于不同的排序字段名你需要写多条linq表达式,而这里我们可以以这种方式写的的原因是通过Dynamic Linq来做到的,大家可以看看这里的资源:
http://weblogs.asp.net/scottgu/archive/2008/01/07/dynamic-linq-part-1-using-the-linq-dynamic-query-library.aspx
推荐大家使用,很方便。
相关文章推荐
- ASP.NET MVC 3程序(二): 如何使用JQuery插件Overlay
- YbSoftwareFactory 代码生成插件【九】:基于JQuery、WebApi的ASP.NET MVC插件的代码生成项目主要技术解析
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
- 如何使用jQuery向asp.net Mvc传递复杂json数据
- JQuery文件上传插件ajaxFileUpload在Asp.net MVC中的使用
- 如何在 IIS6.0中部署asp.net mvc程序(转)
- asp.net core mvc中如何把二级域名绑定到特定的控制器上
- ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据
- ASP.NET MVC中jQuery与angularjs混合应用传参并绑定数据
- 如何在IIS6.0中部署asp.net mvc程序(转)
- 如何在IIS6.0中部署asp.net mvc程序
- ASP.NET MVC异步验证是如何工作的03,jquery.validate.unobtrusive.js是如何工作的
- JQuery插件中的treeview与asp.net mvc的结合使用实例(转)-附加自己的写法
- asp.net core mvc中如何把二级域名绑定到特定的控制器上
- zTree -- jQuery 树插件(后台异步获取数据-asp.net mvc模式下)
- 如何使用jQuery向asp.net Mvc传递复杂json数据
- 在IIS 5.1下如何部署ASP.NET MVC 程序
- 基于ASP.NET MVC3+ADO.NET4+EF4.1+Jquery+插件等技术下的CRM企业客户管理系统