ASP.NET MVC and jqGrid 学习笔记 1-基本配置

新建一个mvc项目后

默认scripts文件夹里的内容如下：

下面把jqgrid的东西加入项目中:

  1. 复制jquery.jqGrid.src.js到Scripts文件夹
  2. 复制grid.locale-cn.js到Scripts文件夹
  3. 复制ui.jqgrid.css到Content文件夹
  4. 显示所有文件
  5. 把刚才添加的文件包含到项目中

添加一个Controller：

添加一个View（先不用母版页）

内容如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <div>
        
    </div>
</body>
</html>

更改后如下：

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery-ui-1.8.24.js"></script>
    <script type="text/javascript" src="~/Scripts/grid.locale-cn.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery.jqGrid.src.js"></script>

    <link href="~/Content/themes/base/jquery-ui.css" type="text/css" rel="stylesheet" />
    <link href="~/Content/ui.jqgrid.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript">
        $(function () {
            jQuery("#grid").jqGrid({
                data: [
                    { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                    { id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
                    { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
                ],
                datatype: "local", height: 250, colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
                colModel: [{ name: 'id', index: 'id', width: 60, sorttype: "int" },
                    { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                    { name: 'name', index: 'name', width: 100 },
                    { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                    { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                    { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                    { name: 'note', index: 'note', width: 150, sortable: false }],
                multiselect: true, caption: "Manipulating Array Data"
            });
        });
</script>
</head>
<body>
    <div>
        <table id="grid"></table>
        <div id="pager"></div>
    </div>
</body>
</html>

运行吧，如果看到这个提示（具体原因有时间再研究），

刷新一下页面。

以上是不用母版页的方式。

使用母版页的方法：

在App_Start文件夹里的BundleConfig.cs里加入以下代码：

 bundles.Add(new ScriptBundle("~/bundles/jqueryjqgrid").Include(
                     "~/Scripts/jquery.jqGrid.src.js",//V4.4.3
                   //"~/Scripts/jquery.jqGrid.min.js",//V4.4.3-min 注意bundles里不能用min版本！！！
                   "~/Scripts/grid.locale-cn.js"));
            bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/site.css",
              "~/Content/ui.jqgrid.css"));

更改_Layout.cshtml母版页：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")
    @Scripts.Render("~/bundles/jqueryjqgrid")
</head>
<body>
    @RenderBody()

   @* @Scripts.Render("~/bundles/jquery")*@
    @RenderSection("scripts", required: false)
</body>
</html>

 

千万记得把里面的jquery给注释掉！

添加一个View：

View内容如下：

@{
    ViewBag.Title = "muban";
}

<h2>muban</h2>

更改为：

@{
    ViewBag.Title = "muban";
}

<h2>muban</h2>
<script type="text/javascript">
    $(function () {
        jQuery("#grid").jqGrid({
            data: [
                { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
                { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
                { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
            ],
            datatype: "local", height: 250, colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
            colModel: [{ name: 'id', index: 'id', width: 60, sorttype: "int" },
                { name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
                { name: 'name', index: 'name', width: 100 },
                { name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float" },
                { name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
                { name: 'total', index: 'total', width: 80, align: "right", sorttype: "float" },
                { name: 'note', index: 'note', width: 150, sortable: false }],
            multiselect: true, caption: "Manipulating Array Data"
        });
    });
</script>

<table id="grid"></table>
<div id="pager"></div>

 运行

 收工！

附注：如果用了jquery-1.9.1版本，则jqgrid不会显示出来，因为在jquery-1.9.1版本中去掉了对browser的检测。

所以目前我使用的与jqgrid-4.4.3版本相关的组件如下：

  1. grid.locale-cn.js
  2. grid.locale-en.js
  3. jquery-1.8.3-vsdoc.js
  4. jquery-1.8.3.js
  5. jquery-1.8.3.min.js
  6. jquery-ui-1.9.2.js
  7. jquery-ui-1.9.2.min.js
  8. jquery.jqGrid.min.js
  9. jquery.jqGrid.src.js
  10. ui.jqgrid.css
posted @ 2013-12-15 23:40  ibg  阅读(578)  评论(0)  编辑  收藏  举报