jQuery插件:jqGrid使用(一)
1. Loading Data
Load from JavaScript Array
BundleConfig.cs
using System.Web; using System.Web.Optimization; namespace Libing.jQGrid.Web { public class BundleConfig { public static void RegisterBundles(BundleCollection bundles) { bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqgrid").Include( "~/Scripts/i18n/grid.locale-cn.js", "~/Scripts/jquery.jqGrid.src.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/jquery.jqGrid/ui.jqgrid.css", "~/Content/themes/base/theme.css")); } } }
_Layout.cshtml
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>@ViewBag.Title</title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/jquery") @Scripts.Render("~/bundles/jqgrid") @RenderSection("scripts", required: false) </head> <body> <div> @RenderBody() </div> </body> </html>
LocalArrayData.cshtml
@{ ViewBag.Title = "LocalArrayData"; Layout = "~/Views/Shared/_Layout.cshtml"; } <table id="jqGrid" style="font-style:normal;"></table> <div id="jqGridPager"></div> @section scripts{ <script type="text/javascript"> var data = [ { "ProvinceID": 1, "ProvinceCode": "110000", "ProvinceName": "北京市" }, { "ProvinceID": 2, "ProvinceCode": "120000", "ProvinceName": "天津市" }, { "ProvinceID": 3, "ProvinceCode": "130000", "ProvinceName": "河北省" }, { "ProvinceID": 4, "ProvinceCode": "140000", "ProvinceName": "山西省" }, { "ProvinceID": 5, "ProvinceCode": "150000", "ProvinceName": "内蒙古" }, { "ProvinceID": 6, "ProvinceCode": "210000", "ProvinceName": "辽宁省" }, { "ProvinceID": 7, "ProvinceCode": "220000", "ProvinceName": "吉林省" }, { "ProvinceID": 8, "ProvinceCode": "230000", "ProvinceName": "黑龙江" }, { "ProvinceID": 9, "ProvinceCode": "310000", "ProvinceName": "上海市" }, { "ProvinceID": 10, "ProvinceCode": "320000", "ProvinceName": "江苏省" }, { "ProvinceID": 11, "ProvinceCode": "330000", "ProvinceName": "浙江省" }, { "ProvinceID": 12, "ProvinceCode": "340000", "ProvinceName": "安徽省" }, { "ProvinceID": 13, "ProvinceCode": "350000", "ProvinceName": "福建省" }, { "ProvinceID": 14, "ProvinceCode": "360000", "ProvinceName": "江西省" }, { "ProvinceID": 15, "ProvinceCode": "370000", "ProvinceName": "山东省" }, { "ProvinceID": 16, "ProvinceCode": "410000", "ProvinceName": "河南省" }, { "ProvinceID": 17, "ProvinceCode": "420000", "ProvinceName": "湖北省" }, { "ProvinceID": 18, "ProvinceCode": "430000", "ProvinceName": "湖南省" }, { "ProvinceID": 19, "ProvinceCode": "440000", "ProvinceName": "广东省" }, { "ProvinceID": 20, "ProvinceCode": "450000", "ProvinceName": "广 西" }, { "ProvinceID": 21, "ProvinceCode": "460000", "ProvinceName": "海南省" }, { "ProvinceID": 22, "ProvinceCode": "500000", "ProvinceName": "重庆市" }, { "ProvinceID": 23, "ProvinceCode": "510000", "ProvinceName": "四川省" }, { "ProvinceID": 24, "ProvinceCode": "520000", "ProvinceName": "贵州省" }, { "ProvinceID": 25, "ProvinceCode": "530000", "ProvinceName": "云南省" }, { "ProvinceID": 26, "ProvinceCode": "540000", "ProvinceName": "西 藏" }, { "ProvinceID": 27, "ProvinceCode": "610000", "ProvinceName": "陕西省" }, { "ProvinceID": 28, "ProvinceCode": "620000", "ProvinceName": "甘肃省" }, { "ProvinceID": 29, "ProvinceCode": "630000", "ProvinceName": "青海省" }, { "ProvinceID": 30, "ProvinceCode": "640000", "ProvinceName": "宁 夏" }, { "ProvinceID": 31, "ProvinceCode": "650000", "ProvinceName": "新 疆" }, { "ProvinceID": 32, "ProvinceCode": "710000", "ProvinceName": "台湾省" }, { "ProvinceID": 33, "ProvinceCode": "810000", "ProvinceName": "香 港" }, { "ProvinceID": 34, "ProvinceCode": "820000", "ProvinceName": "澳 门" }]; $(function () { $("#jqGrid").jqGrid({ datatype: "local", data: data, width: 700, height: 300, colNames: ["省份ID", "省份编码", "省份名称"], colModel: [ { name: "ProvinceID", width: 100 }, { name: "ProvinceCode", width: 200 }, { name: "ProvinceName", width: 200 } ], rowNum: 50 }); }); </script> }
效果
2. Functionality
2.1 Frozen Columns
FrozenColumns.cshtml
@{ ViewBag.Title = "FrozenColumns"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section scripts{ <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '/Area/GetPagedList', mtype: "GET", datatype: "json", page: 1, colModel: [ { label: 'AreaID', name: 'AreaID', width: 100, frozen: true }, { label: 'CityCode', name: 'CityCode', width: 200, frozen: true }, { label: 'AreaCode', name: 'AreaCode', width: 300 }, { label: 'AreaName', name: 'AreaName', width: 300 } ], shrinkToFit: false, // must be set with frozen columns, otherwise columns will be shrank to fit the grid width width: 550, height: 300, multiselect: true, viewrecords: true, rowNum: 10, rowList: [10, 20, 30], pager: "#jqGridPager" }); $("#jqGrid").jqGrid("setFrozenColumns"); //$("#jqGrid").jqGrid({ // url: '/Area/GetPagedList', // mtype: "GET", // datatype: "json", // page: 1, // colModel: [ // { label: 'AreaID', name: 'AreaID', width: 100, frozen: true }, // { label: 'CityCode', name: 'CityCode', width: 200, frozen: true }, // { label: 'AreaCode', name: 'AreaCode', width: 300 }, // { label: 'AreaName', name: 'AreaName', width: 300 } // ], // shrinkToFit: false, // width: 550, // height: 300, // multiselect: true, // rowNum: 10, // rowList: [10, 20, 30], // pager: "#jqGridPager" //}).jqGrid("setFrozenColumns"); }); </script> } <table id="jqGrid"></table> <div id="jqGridPager"></div>
AreaController.cs
public JsonResult GetPagedList(string sidx, string sord, int page, int rows) { int records = context.Areas.Count(); var areas = new { total = (int)Math.Ceiling((float)records / (float)rows), page = page, records = records, rows = context.Areas.OrderBy(area => area.AreaID).Skip((page - 1) * rows).Take(rows) }; return Json(areas, JsonRequestBehavior.AllowGet); }
效果
3. Selection
3.1 Get / Set selected row
GetSetSelectedRow.cshtml
@{ ViewBag.Title = "GetSetSelectedRow"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section scripts{ <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '/Province/GetPagedList', mtype: "GET", datatype: "json", page: 1, colModel: [ { label: 'Province ID', name: 'ProvinceID', width: 100, key: true }, { label: 'Province Code', name: 'ProvinceCode', width: 200 }, { label: 'Province Name', name: 'ProvinceName', width: 200 } ], width: 750, height: 300, rowNum: 10, rowList: [10, 20, 30], viewrecords: true, pager: "#jqGridPager" }); }); function getSelectedRow() { var grid = $("#jqGrid"); var rowKey = grid.jqGrid('getGridParam', "selrow"); if (rowKey) { alert("Selected row primary key is: " + rowKey); } else { alert("No rows are selected"); } } function selectRow() { jQuery('#jqGrid').jqGrid('setSelection', '3'); } </script> } <table id="jqGrid"></table> <div id="jqGridPager"></div> <div style="margin-top: 5px;"> <input type="button" value="Select row with ID 3" onclick="selectRow()" /> <input type="button" value="Get Selected Row" onclick="getSelectedRow()" /> </div>
效果
3.2 CheckBox selection
GetSetSelectedRow.cshtml
@{ ViewBag.Title = "CheckBoxSelection"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section scripts{ <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '/Province/GetPagedList', mtype: "GET", datatype: "json", page: 1, colModel: [ { label: 'Province ID', name: 'ProvinceID', width: 100, key: true }, { label: 'Province Code', name: 'ProvinceCode', width: 200 }, { label: 'Province Name', name: 'ProvinceName', width: 200 } ], width: 750, height: 300, rownumbers: true, rownumWidth: 25, multiselect: true, rowNum: 10, rowList: [10, 20, 30], viewrecords: true, pager: "#jqGridPager" }); }); function getSelectedRows() { var grid = $("#jqGrid"); var rowKey = grid.getGridParam("selrow"); if (!rowKey) { alert("No rows are selected"); } else { var selectedIDs = grid.getGridParam("selarrrow"); //var result = ""; //for (var i = 0; i < selectedIDs.length; i++) { // result += selectedIDs[i] + ","; //} var result = selectedIDs.join(","); alert(result); } } </script> } <table id="jqGrid"></table> <div id="jqGridPager"></div> <div style="margin-top: 5px;"> <input type="button" value="Get Selected Rows" onclick="getSelectedRows()" /> </div>
效果
4. Sorting
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <table id="jqGrid"></table> <div id="jqGridPager"></div> @section scripts{ <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '/Province/GetPagedSortedList', mtype: "GET", datatype: "json", page: 1, colModel: [ { label: 'ProvinceID', name: 'ProvinceID', width: 100 }, { label: 'ProvinceCode', name: 'ProvinceCode', width: 200 }, { label: 'ProvinceName', name: 'ProvinceName', width: 200 } ], width: 750, height: $(window).height() - 100, multiselect: true, rowNum: 10, rowList: [10, 20, 30], sortorder: "asc", sortname: "ProvinceID", pager: "#jqGridPager" }); }); </script> }
ProvinceController.cs
using System.Linq.Dynamic;
public JsonResult GetPagedSortedList(string sidx, string sord, int page, int rows) { int records = context.Provinces.Count(); var provinces = new { total = (int)Math.Ceiling((float)records / (float)rows), page = page, records = records, rows = context.Provinces.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows) }; return Json(provinces, JsonRequestBehavior.AllowGet); }
在上面的Controller中,DbContext添加了System.Linq.Dynamic扩展。在VS中可使用管理NuGet程序包来添加引用。
效果
5 Search
代码
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div style="margin:10px;"> ProvinceCode:<input id="txtProvinceCode" type="text" /> ProvinceName:<input id="txtProvinceName" type="text" /> <input type="button" value="Search" onclick="Search();" /> </div> <table id="jqGrid"></table> <div id="jqGridPager"></div> @section scripts{ <script type="text/javascript"> $(function () { $("#jqGrid").jqGrid({ url: '/Province/GetPagedList', mtype: "GET", datatype: "json", page: 1, colModel: [ { label: 'ProvinceID', name: 'ProvinceID', width: 100 }, { label: 'ProvinceCode', name: 'ProvinceCode', width: 200 }, { label: 'ProvinceName', name: 'ProvinceName', width: 200 } ], width: 750, height: 240, multiselect: true, rowNum: 10, rowList: [10, 20, 30], viewrecords: true, sortorder: "asc", sortname: "ProvinceID", pager: "#jqGridPager" }); }); function Search() { $("#jqGrid").jqGrid("setGridParam", { datatype: "json", url: "/Province/GetFilterPagedList", postData: { "provinceCode": $("#txtProvinceCode").val(), "provinceName": $("#txtProvinceName").val() }, autoencode: true, page: 1 }).trigger("reloadGrid"); } </script> }
public JsonResult GetPagedList(string sidx, string sord, int page, int rows) { var json = new { total = (int)Math.Ceiling((float)context.Provinces.Count() / (float)rows), page = page, records = context.Provinces.Count(), rows = context.Provinces.OrderBy(p => p.ProvinceID).Skip((page - 1) * rows).Take(rows) }; return Json(json, JsonRequestBehavior.AllowGet); } public JsonResult GetFilterPagedList(string sidx, string sord, int page, int rows, string provinceCode, string provinceName) { var provinceList = context.Provinces.Where(p => p.ProvinceCode.Contains(provinceCode) && p.ProvinceName.Contains(provinceName)); int totalRecords = provinceList.Count(); var json = new { total = (int)Math.Ceiling((float)totalRecords / (float)rows), page = page, records = totalRecords, rows = provinceList.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows) }; return Json(json, JsonRequestBehavior.AllowGet); }
效果