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 ...
随机推荐
- 【转】oracle中rowid的用法 （全面）
ROWID是数据的详细地址,通过rowid,oracle可以快速的定位某行具体的数据的位置. ROWID可以分为物理rowid和逻辑rowid两种.普通的堆表中的rowid是物理rowid,索引组织表 ...
- XmlRpc.net 入参结构体嵌套的转义操作
项目使用C#开发,需要使用XmlRpc和Linux服务器端交互,用的是XmlRpc.net. 普通的程序调用入参和出差都没有问题,今天遇到入参结构体嵌套,结果 args 入参在服务器端不能解析.抓包数 ...
- 页面制作之HTML
标签 常用属性 id class style title - <a href ="/" title="收藏">收藏</a>(用于hove ...
- Linux内核笔记——进程管理之执行体
内核版本:linux-2.6.11 在Linux中,有多种执行体(指令流.执行单位),它们是CPU调度和分配资源的基本单位,它们是内核态可见的,即内核态下,每一种执行体都有对应的唯一数据结构task_ ...
- CC countari & 分块+FFT
题意: 求一个序列中顺序的长度为3的等差数列. SOL: 对于这种计数问题都是用个数的卷积来进行统计.然而对于这个题有顺序的限制,不好直接统计,于是竟然可以分块?惊为天人... 考虑分块以后的序列: ...
- DateTable利用NPOI导出Excel 公共方法
protected void Export_Excel(DataTable dt) { string filename = "学生基本信息.xls"; ) { filename = ...
- 微信公众平台API接口
简介 微信公众平台消息接口为开发者提供了一种新的消息处理方式.微信公众平台消息接口为开发者提供与用户进行消息交互的能力.对于成功接入消息接口的微信公众账号,当用户发消息给公众号,微信公众平台服务器会使 ...
- Mac系统中配置Tomcat环境
第一步:下载Tomcat 下载地址:http://tomcat.apache.org/download-80.cgi 直接下载如图选中的即可 第二步: 下载完成后,解压,随意放入目录.如我就把它放在/ ...
- 【luogu】 P1880 石子合并
原题原题原题原题原题 先贴上错误代码... ↓错误代码↓ #include <iostream> #include <cstdio> #include <cstring& ...
- POJ2369 Permutations（置换的周期）
链接:http://poj.org/problem?id=2369 Permutations Time Limit: 1000MS Memory Limit: 65536K Total Submi ...