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 ...
随机推荐
- 常用.NET库使用总结
Json.NET 获取类实例对应的jtoken:JObject.FromObject() 获取数组实例对应的jtoken:JArray.FromObject() Json.NET将枚举转换为int R ...
- python基本图像操作与处理
# -*- coding: utf-8 -*- from PIL import Image from pylab import * #添加中文支持 from matplotlib.font_manag ...
- C#_取随机字符
1.多位数字字母组成,每位取值0-9A-Z /// <summary> /// 获取下一个顺序码根据上一个(数字字母组合) /// </summary> /// <par ...
- 代码－－>发呆
代码,敲着敲着,就发呆了. 其实安安静静敲代码,是一种享受.开着不快不慢的音乐,徜徉在代码的世界里,忘记了时间的存在. 原本备忘录中提醒我13点看书,一小时又一小时的延后,已经不记得自己按了多少次一小 ...
- 【luogu】 P1880 石子合并
原题原题原题原题原题 先贴上错误代码... ↓错误代码↓ #include <iostream> #include <cstdio> #include <cstring& ...
- android之volley学习
Volley是android的平台通信库,一个新的网络通信框架.Volley 的特点:适合数据量小,通信频繁的网络操作. 获取Volley git 工具使用:git clone https://and ...
- C++迪杰斯特拉算法求最短路径
一:算法历史 迪杰斯特拉算法是由荷兰计算机科学家狄克斯特拉于1959 年提出的,因此又叫狄克斯特拉算法.是从一个顶点到其余各顶点的最短路径算法,解决的是有向图中最短路径问题.迪杰斯特拉算法主要特点是以 ...
- 关于[super dealloc]
销毁一个对象时,需要重写系统的dealloc方法来释放当前类所拥有的对象,在dealloc方法中需要先释放当前类中所有的对象,然后再调用[super dealloc]释放父类中所拥有的对象.如先调用[ ...
- fwrite写入文件不成功bug
文件写入了,只是从头覆盖了!因为在fwrite():前面 文件位置指针是是SEEK_SET,即首位置.在fwrite(fileHeader, 1, 10, file); 前面加上一行fseek(fil ...
- C++类型转换函数
1.什么是类型转换函数 类型转换函数的作用是将一个类的对象转换成另一类型的数据. class testclass { private: int r; int m; public : testclass ...