ASP.NET中使用jQGrid_jqgridnetcore资源-CSDN文库

共26个文件

js：6个

cs：4个

config：3个

jQGrid

ASP.NET

中使用jQGrid

5星 · 超过95%的资源需积分: 10 152 浏览量 2011-12-15 20:09:48 上传评论 1 收藏 217KB RAR 举报

ASP.NET是一种广泛使用的微软开发平台，用于构建动态Web应用程序。jQGrid则是一个基于JavaScript的交互式表格插件，它允许开发者创建功能丰富的数据网格，包括排序、分页、搜索和编辑功能。在ASP.NET中集成jQGrid，可以极大地提升用户界面的交互性和数据管理的效率。要开始在ASP.NET项目中使用jQGrid，你需要在HTML页面中引入必要的CSS和JavaScript库。这通常包括jQuery核心库、jQuery UI（如果需要自定义主题）以及jQGrid的主脚本文件。例如： ```html <link rel="stylesheet" href="css/jquery-ui.css" /> <link rel="stylesheet" href="css/ui.jqgrid.css" /> <script src="js/jquery-1.12.4.min.js"></script> <script src="js/i18n/grid.locale-cn.js"></script> <script src="js/jquery.jqGrid.min.js"></script> ``` 接下来，创建一个ASP.NET服务器控件，如`<asp:HiddenField>`或`<asp:Literal>`，用来在后台生成jQGrid所需的JSON数据。这通常通过`GridView`或者自定义的数据访问层来实现。例如： ```html <asp:HiddenField ID="jqgData" runat="server" /> ``` 在代码-behind中，填充这个隐藏字段的值，生成jQGrid能理解的JSON格式： ```csharp protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { var data = GetDataFromDataSource(); // 获取数据的方法 jqgData.Value = JsonConvert.SerializeObject(data); } } ``` 接下来，编写HTML和JavaScript来设置jQGrid。在ASP.NET页面的`<head>`部分或单独的JS文件中，定义jQGrid的配置： ```html <script type="text/javascript"> $(document).ready(function () { $("#jqGrid").jqGrid({ url: "GetGridData.aspx", // 如果数据源不在隐藏字段，可以设置为处理数据的URL datatype: "json", mtype: "POST", colModel: [ { name: "Column1", index: "Column1", width: 100 }, { name: "Column2", index: "Column2", width: 150 }, // 添加更多列... ], pager: "#jqGridPager", rowNum: 10, rowList: [10, 20, 30], sortname: "Column1", sortorder: "asc", viewrecords: true, gridview: true, autoencode: true, caption: "ASP.NET中使用jQGrid示例" }); }); </script> ``` 在HTML主体部分，创建jQGrid和分页器的占位符： ```html <table id="jqGrid"></table> <div id="jqGridPager"></div> ``` 至此，一个基本的jQGrid已经设置完成。但jQGrid的功能远不止于此，它支持自定义编辑器、行操作按钮、列过滤、列固定、导出数据等多种高级特性。你可以根据项目需求，进一步配置jQGrid以实现更复杂的功能。例如，如果你需要添加编辑和删除功能，可以启用`inlineNav`或`editGridRow`方法： ```javascript $("#jqGrid").jqGrid("navGrid", "#jqGridPager", { edit: true, add: true, del: true }); ``` 同时，你可能还需要处理编辑和删除操作的回调函数，以实现数据的增删改查逻辑。 ASP.NET结合jQGrid提供了一种强大的方式来展示和管理大量数据。通过学习和掌握jQGrid的各种选项和API，开发者可以创建出高度定制化的数据网格，提升用户体验，同时也减轻了后端处理的压力。

资源推荐

资源详情

资源评论

收起资源包目录

JqGrid_ASP_NET.rar （26个子文件）

JqGrid_ASP_NET

JqGrid_ASP_NET.sln 932B

JqGrid_ASP_NET

CSS

ui.jqgrid.css 12KB

App_Data

obj

Debug

JqGrid_ASP_NET.pdb 18KB

DesignTimeResolveAssemblyReferencesInput.cache 7KB

TempPE

JqGrid_ASP_NET.csproj.FileListAbsolute.txt 470B

JqGrid_ASP_NET.dll 9KB

bin

JqGrid_ASP_NET.pdb 18KB

JqGrid_ASP_NET.dll 9KB

DataBase

Default.aspx.cs 316B

Web.config 7KB

Web.Debug.config 1KB

Default.aspx 2KB

Scripts

jquery-1.4.1.js 165KB

jquery-1.4.1-vsdoc.js 234KB

grid.locale-en.js 4KB

jquery.jqGrid.min.js 245KB

jquery-1.4.1.min.js 70KB

grid.locale-cn.js 4KB

JqGrid_ASP_NET.csproj 5KB

Web.Release.config 1KB

JqGrid_ASP_NET.csproj.user 1KB

Properties

AssemblyInfo.cs 1KB

Default.aspx.designer.cs 810B

jqGridHandler.ashx 108B

jqGridHandler.ashx.cs 6KB

JqGrid_ASP_NET.suo 12KB

F:\01.学习资料\JqGrid_ASP_NET\JqGrid_ASP_NET\JqGrid_ASP_NET\bin\JqGrid_ASP_NET.dll F:\01.学习资料\JqGrid_ASP_NET\JqGrid_ASP_NET\JqGrid_ASP_NET\bin\JqGrid_ASP_NET.pdb F:\01.学习资料\JqGrid_ASP_NET\JqGrid_ASP_NET\JqGrid_ASP_NET\obj\Debug\ResolveAssemblyReference.cache F:\01.学习资料\JqGrid_ASP_NET\JqGrid_ASP_NET\JqGrid_ASP_NET\obj\Debug\JqGrid_ASP_NET.dll F:\01.学习资料\JqGrid_ASP_NET\JqGrid_ASP_NET\JqGrid_ASP_NET\obj\Debug\JqGrid_ASP_NET.pdb

评论收藏

内容反馈