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 - ) * 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 - ) * 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 - ) * 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 - ) * rows).Take(rows)
}; return Json(json, JsonRequestBehavior.AllowGet);
}
效果
jQuery插件：jqGrid使用（一）的更多相关文章
- js插件---jqGrid插件如何使用
js插件---jqGrid插件如何使用 一.总结 一句话总结:jqdrid还是依赖加js初始化的方式,很多时候插件的问题一般都是引入的css和js的问题,jqgrid里面遇到的问题就是下载包有一些js ...
- 自己写jquery插件之模版插件高级篇(一)
需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- BootStrap_04之jQuery插件（导航、轮播）、以及Less
1.列偏移与列排序: ①列偏移:控制列出现的位置,某列偏移后,后序列会随之偏移--只能右偏移: col-lg/md/sm/xs-offset-*; ②列排序:控制某一列的位置,该列可以左(pull)右 ...
- 锋利的jQuery--编写jQuery插件(读书笔记五)[完结篇]
1.表单验证插件Validation 2.表单插件Form 3.动态事件绑定插件livequery 可以为后来的元素绑定事件 类似于jQuery中的live()方法 4.jQuer ...
- 2016年6月份那些最实用的 jQuery 插件专辑
jQuery 是一个快速.流行的 JavaScript 库,jQuery 用于文档处理.事件处理.动画和 Ajax 交互非常简单,学习曲线也很平坦.2016年6月的 jQuery 插件专辑里,我们选择 ...
- 教你开发jQuery插件（转）
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原文: ...
- Lazy Load, 延迟加载图片的 jQuery 插件.
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- jquery插件扩展的学习
jquery插件的学习可以点击这里 举个例子 //首先先来一个插件 (function($){ $.fn.extent({ bigfont:function(){ return this.css('f ...
随机推荐
- CI框架之HOOKS使用流程及原理
Ci框架中Hooks可以理解:在框架的执行流程过程中,允许开发者在固定的某些时间点上(如:调用控制器前,调用控制器后等时间点上),调用其他函数来扩充CI框架执行流程的一种方法.技术上来就是通过 ...
- hdu3549还是网络流
最后一次训练模板(比较熟练了) 接下来训练网络流的建图 #include <cstdio> #define INF 2147483647 int n,m,ans,x,y,z,M,h,t,T ...
- 【贪心】HDU 1257
HDU 1257 最少拦截系统 题意:中文题不解释. 思路:网上有说贪心有说DP,想法就是开一个数组存每个拦截系统当前最高能拦截的导弹高度.输入每个导弹高度的时候就开始处理,遍历每一个拦截系统,一旦最 ...
- Torch Problems: require some packages doesn't work
I've recently got a problem. require 'cutorch' doesn't work. But it was ok yesterday, although I hav ...
- 仿【Emmet】转【HTML】功能
一.定义正则表达式: var whitespace = "[\\x20\\t\\r\\n\\f]*", nvarcharEncoding = whitespace + " ...
- Xcode 升级后，常常遇到的遇到的警告、错误，解决方法(转)
从sdk3.2.5升级到sdk 7.1中间废弃了很多的方法,还有一些逻辑关系更加严谨了.1,警告:“xoxoxoxo” is deprecated解决办法:查看xoxoxoxo的这个方法的文档,替换 ...
- android——数据库版本升/降级问题
数据库版本升级 在开发android应用程序的时候,一般由于在我们开发的时候我们不知道以后会后什么新功能,也有可能增加业务逻辑(也就是更新),可想而知我们原来的数据库结构可能不适用已更新的应用,那么应 ...
- 爬虫初探(2)之requests
关于请求网络,requests这个库是爬虫经常用到的一个第三方库. import requests url = 'http://www.baidu.com' #这里用get方法用来请求网页,其他还有p ...
- Eclipse搭建c环境（CDT）二
Eclipse 编辑c程序环境的搭建主要为其安装CDT插件即可 Eclipse搭建CDT步骤如下: 1.首先配置好java环境,为后续运行eclipse做准备 (略) 2.下载并安装eclipse(这 ...
- 非常全面的SQL Server巡检脚本来自sqlskills团队的Glenn Berry 大牛
非常全面的SQL Server巡检脚本来自sqlskills团队的Glenn Berry 大牛 Glenn Berry 大牛会对这个脚本持续更新 -- SQL Server 2012 Diagnost ...