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 ...
随机推荐
- 体育游戏中的Player类
最近在做一个棒球的游戏,开始感觉还是挺酷炫的,但是其实做法挺朴实的,想象中的球员是多么智能,这样那样的,其实只是表象. 关于球员的类是游戏里非常重要的部分,这个玩意怎么写呢,可以这样写...... 棒 ...
- 【尺取】POJ 3320
POJ 3320 Jessica's Reading Problem 题意:一本书P页,第i页有ai知识点,问你至少从某一处开始连续要翻多少页才能复习完所有的知识点,不能跨页翻. 思路:<挑战程 ...
- kgcd ,fmod,fgcd
参考:NENU CS ACM模板made by tiankonguse 2.13 GCD 快速gcd: 位操作没学,真心不懂二进制,还是得学啊 code: int kgcd(){ if(!a || ...
- [LintCode] Maximum Subarray 最大子数组
Given an array of integers, find a contiguous subarray which has the largest sum. Notice The subarra ...
- webform 分页、组合查询综合使用
界面: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx ...
- 【noip 2016】 蚯蚓（50分）（earthworm）
50分小程序,写了2天- 题目在这里 一个单调队列,写的都是p=0的点,考试的时候要是弄到这些分的话--不说了-- 羡慕AC的神犇啊,54行的满分程序,而我-- #include <iostre ...
- python 使用__neg__和__iter__
__neg__ python中 __neg__ 方法对应于 符号 - 可见 str 没有__neg__,定义 strnew 好吧,无法再简化了 __iter__ 看看 list 的 __iter__: ...
- Struts2
为什么要用Struts2? 这里列举一些Servlet的缺点: 1.每写一个servlet在web.xml中都要做相应的配置.如果有多很servlet,会导致web.xml内容过于繁多. 2.这样的结 ...
- Amoeba -- 阿里巴巴工程师的开源项目之一陈思儒
http://www.kuqin.com/opensource/20081023/24026.html 个人博客 http://dbanotes.net/web/page/44 阿里巴巴分布式服务框架 ...
- 全新 Mac 安装指南（编程篇）（环境变量、Shell 终端、SSH 远程连接）
注:本文专门用于指导对计算机编程与设计(尤其是互联网产品开发与设计)感兴趣的 Mac 新用户,如何在 Mac OS X 系统上配置开发与上网环境,另有<全新 Mac 安装指南(通用篇)>作 ...