jQuery外掛：jqGrid使用（一）

libingql發表於2015-03-28
jQuery

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

　　效果

相關文章