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

  效果

posted @ 2015-03-28 20:57  libingql  阅读(13400)  评论(0编辑  收藏  举报