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 ...
随机推荐
- pyqt 发射接收信号
翻页控件: 一.定义并发射信号: #!/usr/bin/python # #coding=utf-8 # __author__='' from PyQt4.QtCore import * from P ...
- Spark 资源池简介
在一个application内部,不同线程提交的Job默认按照FIFO顺序来执行,假设线程1先提交了一个job1,线程2后提交了一个job2,那么默认情况下,job2必须等待job1执行完毕后才能执行 ...
- 51nod算法马拉松15
智力彻底没有了...看来再也拿不到奖金了QAQ... A B君的游戏 因为数据是9B1L,所以我们可以hash试一下数据... #include<cstdio> #include<c ...
- Thinkphp3.2.3使用Ajax一定注意 数据返回
Thinkphp3.2.3使用Ajax一定注意 数据返回 $data = 'ok'; $this->ajaxReturn($data); 不能直接 echo $data;
- C#输出文字对齐，空格位数对齐
Align String with Space This example shows how to align strings with spaces. The example formats tex ...
- JAVA实现AES 解密报错Input length must be multiple of 16 when decrypting with padded cipher
加密代码 /**解密 * @param content 待解密内容 * @param password 解密密钥 * @return */ public static byte[] decrypt(b ...
- HTML/CS3相关面试题目
一.HTML/CS3基本面试题目. 1. 常用那几种浏览器测试? 1.1浏览器:IE,Chrome(谷歌),FireFox(火狐),Safari(苹果计算机的最新操作系统Mac OS X中的浏览器,使 ...
- phpcms v9常用方法
1.联动菜单根据地区id显示地区名称的方法: 显示效果: 四川 >> 攀枝花 >> 仁和区 [字段名字为 area] {get_linkage($info['area'],1, ...
- Ubuntu 安装Theano
参考:http://deeplearning.net/software/theano/install_ubuntu.html 编译安装python3.4:http://blog.aboutc.net/ ...
- 如何解决Maple的应用在数学中
对任意数学和技术学科的研究员.教师和学生而言,Maple是一个必备的工具.通过Maple,教师将复杂数学问题注入生命,学生的精力集中在概念理解上而不是如何使用工具上,研究员可以开发更复杂的算法或模型. ...