jQuery外掛：jqGrid使用（一）

libingql發表於2015-03-28

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"));
        }
    }
}

View Code

　　_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 - 1) * 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 - 1) * 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 - 1) * 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 - 1) * rows).Take(rows)
    };

    return Json(json, JsonRequestBehavior.AllowGet);
}

　　效果

jQuery外掛：jqGrid使用（二）
2015-03-30
jQuery
jQuery外掛：jqGrid引入及基本屬性
2015-03-28
jQuery
jQuery學習之：jqGrid表格外掛——第一個Demo
2017-11-02
jQuery
jQuery中cookie外掛如何使用
2017-09-24
jQueryCookie
jQuery外掛
2010-10-11
jQuery
前端外掛一：jQuery Multi-Select多選外掛
2016-11-24
前端jQuery
jquery 外掛站
2013-06-18
jQuery
如何編寫一個Jquery外掛
2013-07-03
jQuery
JQuery模板外掛-jquery.tmpl
2021-09-09
jQuery
jQuery的外掛列表
2019-05-11
jQuery
JQuery蜂巢圖外掛
2018-08-01
jQuery
jQuery外掛推薦
2017-03-09
jQuery
jquery分頁外掛
2016-06-24
jQuery
jquery外掛寫法
2016-02-16
jQuery
jQuery表單外掛jQuery.form
2010-11-17
jQueryORM
jquery.cookie外掛使用簡單介紹
2017-03-05
jQueryCookie
jQuery上傳外掛Uploadify使用詳解
2013-06-28
jQuery
JQuery外掛：圖片上傳本地預覽外掛，改進案例一則。
2016-05-25
jQuery
jQuery擴充套件外掛
2018-08-22
jQuery套件
jQuery外掛擴充套件
2018-08-19
jQuery套件
jquery日曆外掛SimpleCalendar
2017-01-24
jQuery
jQuery外掛開發模式
2016-08-01
jQuery模式
jquery--uploadify 外掛
2016-07-24
jQuery
240個jquery外掛（轉）
2016-04-03
jQuery
jQuery layout 外掛屬性
2014-07-30
jQuery
200個jquery外掛
2012-09-21
jQuery
常用jquery外掛資料
2016-03-13
jQuery
jquery外掛開發方法
2009-05-07
jQuery
jquery外掛合集之分頁外掛[表單和表格]
2013-04-09
jQuery
不定義 jQuery 外掛，不要說會 jQuery
2016-05-11
jQuery
jQuery外掛Tmpl使用方法簡單介紹
2017-04-05
jQuery
jQuery上傳外掛Uploadify的使用方法
2014-11-22
jQuery
jQuery燈箱外掛lightBox使用方法
2024-03-30
jQuery
使用 jQuery UI 和 jQuery 外掛構建更好的 Web 應用程式
2012-06-14
jQueryUIWeb
深入理解jQuery外掛開發總結（一）
2018-12-10
jQuery
jQuery右鍵選單外掛jQuery ContextMenu
2012-07-05
jQueryContext
jQuery外掛--表格隔行變色
2021-09-09
jQuery
jquery複習之路---常用外掛
2021-09-09
jQuery