jQuery插件：jqGrid使用（一）

浏览数：23 / 时间：2015年06月09日

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