使用 ASMX Web Services 的 JQGrid 与 ASP.NET

Rachana BG

4.00/5 (4投票s)

2011年10月4日

CPOL

1分钟阅读

31909

在 ASP.NET 中使用 ASMX Web Services 的 JQGrid（分页、排序、添加/编辑/删除功能）

该网格是一个 Ajax 启用的 JavaScript 控件，为在 Web 上表示表格数据提供解决方案。由于该网格是一个客户端解决方案，并且通过 Ajax 回调动态加载数据，因此可以与任何服务器端技术集成。我发现许多人正在尝试在 ASP.NET 中使用 JQgrid。我也尝试通过在 Google 中搜索来实现 jqgrid 的基本功能，例如分页、排序、编辑行、添加行、删除行。最后，我创建了一个可用的示例。所以我想分享它，认为有人可能会觉得有用。在这里，我没有从头开始解释。对于 jqgrid 初学者，有很多资源（您可以在 http://www.trirand.com/blog/jqgrid/jqgrid.html 获取有关使用 jqgrid 需要参考哪些插件、基本示例和演示的信息）。我想提到一些重要的事情，我发现了一些重要的事情。我附上了我的代码。我的数据库中有一个名为“Person”的表，其结构如下：列名数据类型 PID int 主键 FirstName Nvarchar LastNAme Nvarchar 要运行该项目，请创建上述 Person 表并提供您的数据库连接字符串。

url: '/WebService.asmx/GetListOfPersons1'：此方法调用用于将数据加载到网格中。
editurl: '/WebService.asmx/EditRow'：此方法在添加新行、更新行和删除行时调用。

以下是添加/编辑/删除操作的设置。

要将数据作为对象发布到服务器，您必须将内容类型设置为“application/json”。

在删除行时，网格仅发布网格行 ID 和 oper 变量。要在服务器端删除行，我们需要一些列值，例如表的 первичный ключ。为了实现这一点，应该为删除操作完成以下设置。

onclickSubmit: function (eparams) {
                    var retarr = {};
                    var sr = jQuery("#contactsList").getGridParam('selrow');
                    rowdata = jQuery("#contactsList").getRowData(sr);
                    retarr = { PID: rowdata.PID};

jQuery.extend(jQuery.jgrid.edit, {
                closeAfterEdit: true,
                closeAfterAdd: true,
               
                ajaxEditOptions: { contentType: "application/json" },
                serializeEditData: function (postData) {
                    var postdata = { 'data': postData };
                    return JSON.stringify(postdata); ;
                }
            });
            jQuery.extend(jQuery.jgrid.del, {
                ajaxDelOptions: { contentType: "application/json" },
              
                onclickSubmit: function (eparams) {
                    var retarr = {};
                    var sr = jQuery("#contactsList").getGridParam('selrow');
                    rowdata = jQuery("#contactsList").getRowData(sr);
                    retarr = { PID: rowdata.PID};
                    
                    return retarr;
                },
                serializeDelData: function (data) {
                    var postData = { 'data': data };
                    return JSON.stringify(postData);
                }