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 ...

随机推荐

迷之bug
是这样的.要解决tbody滚动,而thead不动的布局问题,我把它们分别放在两个表格里,上面的只有thead,下面的只有tbody, 然后解决宽度对齐的问题,我用colgroup设置每列的宽度,用的都 ...
Terminology: Sandbox
In Comupter Secuity: from https://en.wikipedia.org/wiki/Sandbox_(computer_security) In computer secu ...
java DOM4J 读取XML
最近学习Java,在处理XML文档的时候,查阅相关资料,发现了DOM4J这个jre库,相对C#的XML处理来说,功能还算是跟得上下面展示一篇我自己写的一个XML读取测试 import java.ut ...
tornado学习笔记19 Tornado框架分析
19.1 Http服务器请求处理流程图 (1) 调用HTTPServer的bind方法,绑定Socket的监听端口号: (2) 调用HTTPServer的listen方法,初始化一个listen so ...
ts 协议解析
pes : http://wenku.baidu.com/link?url=KjcA0qXqZ1bWVQTa8i1YOmygofldSQL7Pjj-zGRw1e_6_LFmVLo5DIWF0SNwVn ...
最常见的 20 个 jQuery 面试问题及答案
jQuery 面试问题和答案 JavaScript 是客户端脚本的标准语言,而 jQuery 使得编写 JavaScript 更加简单.你可以只用写几行的jQuery 代码就能实现更多的东西. 它是最 ...
Ubuntu 14.04(amd64)安装Oracle11g XE(x64)
下载Oracle安装包下载地址：Oracle Database Express Edition 11g Release 2 for Linux x64 安装办法 1、建立oracle用户及属主 ad ...
redis 的理解
1.Redis使用 C语言开发的.Redis 约定此版本号,为偶数的版本是稳定版(如:2.4版 2.6版),奇数版是非稳定版(如:2.5版 2.7版) 2.Redis 数据库中的所有的数据都存储在内存 ...
Unity3D UGUI之ScrollView弹簧效果
unity3d版本5.3.2p4 UGUI中ScrollView包含Viewport(Content) ScrollView包含脚本.其Movement Type一共3个选项.Elastic就是弹簧效 ...
用javascript实现一个2048游戏
早就想自己写一个2048游戏了,昨晚闲着没事,终于写了一个如下图,按方向键开始玩吧. 如果觉得操作不方便,请直接打开链接玩吧: http://gujianbo.1kapp.com/2048/2048 ...

jQuery插件：jqGrid使用（一）