ASP.NET MVC and jqGrid 学习笔记 1-基本配置
新建一个mvc项目后
默认scripts文件夹里的内容如下：
下面把jqgrid的东西加入项目中:
- 复制jquery.jqGrid.src.js到Scripts文件夹
- 复制grid.locale-cn.js到Scripts文件夹
- 复制ui.jqgrid.css到Content文件夹
- 显示所有文件
- 把刚才添加的文件包含到项目中
添加一个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版本相关的组件如下：
- grid.locale-cn.js
- grid.locale-en.js
- jquery-1.8.3-vsdoc.js
- jquery-1.8.3.js
- jquery-1.8.3.min.js
- jquery-ui-1.9.2.js
- jquery-ui-1.9.2.min.js
- jquery.jqGrid.min.js
- jquery.jqGrid.src.js
- ui.jqgrid.css