C# JQuery GridView 控件

JQuery GridView control

提问by sarsnake

Does anything like this exist?

这样的东西存在吗？

What I am looking for is a control that is going to be client-side, with the Edit, Cancel row capabilities of a GridView.

我正在寻找的是一个将成为客户端的控件，具有 GridView 的编辑、取消行功能。

I wish to use it to collect the data from the user and then save on the server after the user is done entering data.

我希望用它来收集用户的数据，然后在用户完成输入数据后保存在服务器上。

EDITED:

编辑：

Thanks for all the recommendations. One thing that I would like to ask all of you before I delve and spend time on learning these frameworks.

感谢您的所有建议。在我深入研究并花时间学习这些框架之前，我想问你们所有人的一件事。

All of you seem to use ASP.net MVC and mention that these toolkits are good with this. I am however, using ASP.net web forms. Do these frameworks play well with old flavour of ASP.net?

你们所有人似乎都使用 ASP.net MVC 并提到这些工具包对此很好。但是，我使用 ASP.net Web 表单。这些框架与旧版 ASP.net 兼容吗？

采纳答案by Craig Stuntz

Yes. jqGridworks well. Try the demos. We use it with ASP.NET MVC.

是的。jqGrid运行良好。尝试演示。我们将它与 ASP.NET MVC 一起使用。

Update:In your updated question, you asked about using frameworks such as jQuery with WebForms. Can you do this? Sure. Would you want to? That's a more difficult question. In WebForms, you generallylet WebForms generate JavaScript for you. That's why you have UpdatePanel and the like. On one hand, this is easy, because you can focus your coding attention on C#, and you can use grid components which don't require you to write any JavaScript at all to make them work. On the other hand, you're limited to what the generated code can do. Yes, you can write JavaScript manually, even in WebForms, but you have to work around some of the things the framework does, like changing IDs on controls. Yes, you can write event handlers in C#, but this requires the use of postbacks, which do not fit naturally in HTTP, with consequences that are visible to the end-user.

更新：在您更新的问题中，您询问了如何在 WebForms 中使用 jQuery 等框架。你能做这个吗？当然。你愿意吗？这是一个更难的问题。在 WebForms 中，您通常让 WebForms 为您生成 JavaScript。这就是为什么你有 UpdatePanel 之类的。一方面，这很容易，因为您可以将编码注意力集中在 C# 上，并且您可以使用完全不需要编写任何 JavaScript 的网格组件来使它们工作。另一方面，您仅限于生成的代码可以做什么。是的，您可以手动编写 JavaScript，甚至在 WebForms 中，但您必须解决框架所做的一些事情，例如更改控件上的 ID。是的，您可以在 C# 中编写事件处理程序，但这需要使用回发，这在 HTTP 中不自然，其后果对最终用户可见。

It is common to use jQuery with ASP.NET MVC in no small part because it ships with the framework. But even before that happened, it was still very common to use the two together because jQuery makes it very easy to do things which are otherwise not directly supported within ASP.NET MVC, like making controls on a page interact with each other. Yes, this means you have to write JavaScript, but as long as you're OK with that, you get the huge advantage that you can write any kind of interaction you want to without having to postback to the server.

在 ASP.NET MVC 中使用 jQuery 很常见，因为它随框架一起提供。但即使在这之前，将两者结合使用仍然很常见，因为 jQuery 可以很容易地完成 ASP.NET MVC 中不直接支持的事情，例如使页面上的控件相互交互。是的，这意味着您必须编写 JavaScript，但只要您同意，您就可以获得巨大的优势，您可以编写任何类型的交互，而无需回发到服务器。

If you are just looking for a good grid control for WebForms, then I would suggest using a control designed for WebForms, rather than a grid designed for jQuery. The reason is that the code you will write will fit more naturally within the idioms of WebForms.

如果您只是在为 WebForms 寻找一个好的网格控件，那么我建议使用为 WebForms 设计的控件，而不是为 jQuery 设计的网格。原因是您将编写的代码将更自然地适合 WebForms 的习惯用法。

If you just want to learn jQuery, well, that's a really good idea, because the framework is interesting, useful, and well-designed, but I'm not sure that a great control is the best place to start. A better place to start might be adding visual flair to some of your existing pages. It is easier to start with known HTML and manipulate it with jQuery than it is to be generating new HTML and learning jQuery at the same time.

如果您只是想学习 jQuery，那么这是一个非常好的主意，因为该框架很有趣、有用且设计精良，但我不确定出色的控件是否是最好的起点。更好的起点可能是为您现有的一些页面添加视觉风格。从已知的 HTML 开始并使用 jQuery 操作它比生成新的 HTML 和同时学习 jQuery 更容易。

回答by Nathan Fisher

How about the jQuery grid view plugin

jQuery 网格视图插件怎么样

回答by Tracker1

From your comment (on Craig's mention of jqGrid), you're either going to want to go with jqGrid, FlexiGrid or another client-side alternative, and wire it up server-side yourself, or you will be better off with a non-jquery based commercial ajax grid component.

根据您的评论（在 Craig 提到 jqGrid 时），您要么想要使用 jqGrid、FlexiGrid 或其他客户端替代方案，并自己将其连接到服务器端，要么使用非-基于 jquery 的商业 ajax 网格组件。

If you are using MVC (as Craig Mentions), jqGrid is a pretty nice fit. It's fairly easy to wire the jqGrid events to JsonResult controller actions in MVC.

如果您使用 MVC（如 Craig Mentions），jqGrid 非常适合。在 MVC 中将 jqGrid 事件连接到 JsonResult 控制器操作是相当容易的。

回答by Jeff Sternal

Client-side frameworks

客户端框架

In addition to jqGrid, there are several other javascript framework Grids that I've been playing with recently:

除了 jqGrid，还有其他几个我最近在玩的 javascript 框架 Grids：

1. Flexigrid: jQuery-based, no editing features yet, but planned.

2. Ext's GridPanel: Ext js is another javascript framework which interfaces with jQuery.

3. YUI's DataTable: The Yahoo User Interface (YUI) is yet another framework with an editable Grid control.

1. Flexigrid：基于 jQuery，尚无编辑功能，但已在计划中。

2. Ext 的 GridPanel：Ext js 是另一个与 jQuery 接口的 javascript 框架。

3. YUI 的数据表：雅虎用户界面 (YUI) 是另一个具有可编辑网格控件的框架。

These are all client-side components: they operate in the user's browser, disconnected from your server code. Like Tracker1 and several others wrote, you'll have to either write Ajax methods yourself to wire the client-side grid to the server or you can try to take advantage of existing wrappers, such as:

这些都是客户端组件：它们在用户的浏览器中运行，与您的服务器代码断开连接。就像 Tracker1 和其他几个人写的那样，您必须自己编写 Ajax 方法来将客户端网格连接到服务器，或者您可以尝试利用现有的包装器，例如：

Server-side options

服务器端选项

1. Coolite's Ext wrappers for .NET

2. One of the in-progress YUI .NET wrapper libraries (YuiDotNet or Yui.NET). I don't think either of these implements a wrapper for the DataTable yet, but they may show you the way to do so.

1. Coolite 用于 .NET 的 Ext 包装器

2. 正在进行的 YUI .NET 包装库之一（YuiDotNet 或 Yui.NET）。我认为这些都没有实现 DataTable 的包装器，但它们可能会向您展示这样做的方法。

Connecting the client and the server

连接客户端和服务器

If you haven't worked with a lot of Ajax or done much with these javascript frameworks, be prepared for a bit of a learning curve: as you begin to use them, you'll need to constantly bear in mind what's happening on the server and what's happening on the client (and when!).

如果您没有使用过很多 Ajax 或对这些 javascript 框架做过很多工作，请准备好接受一些学习曲线：当您开始使用它们时，您需要时刻牢记服务器上发生的事情以及客户端发生了什么（以及何时！）。

If you use one of the straight javascript libraries I listed above, as opposed to a .NET wrapper, you'd have to write a server-side method to handle data submission and expose it to the client using your choice of technology (MVC's JsonResult controller actions, establishing WebMethods / ScriptMethods, etc.).

如果您使用我上面列出的直接 javascript 库之一，而不是 .NET 包装器，则必须编写服务器端方法来处理数据提交并使用您选择的技术（MVC 的 JsonResult控制器动作、建立 WebMethods / ScriptMethods 等）。

Related Stack Overflow Questions

相关堆栈溢出问题

Using ExtJS in ASP.NETand Returning data from ASP.net to an ExtJS Grid- these are focused on Ext's controls, but the answers contain a lot of good general information about connecting the new generation of javascript framework controls to server applications.

在 ASP.NET 中使用 ExtJS和将数据从 ASP.net 返回到 ExtJS 网格- 这些都集中在 Ext 的控件上，但答案包含很多关于将新一代 javascript 框架控件连接到服务器应用程序的很好的一般信息。

Good Asp.Net excel-like Grid control- you may also be interested in the answers to this question, particularly since it sounds like you want solid editing capabilities.

良好的 Asp.Net 类 excel 网格控件- 您可能也对这个问题的答案感兴趣，特别是因为听起来您想要可靠的编辑功能。

回答by Jeff Sternal

Here is an example that was done with WebForms:

这是使用 WebForms 完成的示例：

http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html

http://praveen1305.blogspot.com/2009/05/jqgrid-with-asp-net-web-forms.html

回答by Jeff Sternal

i have found an example using DataTable and JQgrid at http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html

我在http://arahuman.blogspot.com/2009/06/jqgrid-using-mvc-json-and-datatable.html找到了一个使用 DataTable 和 JQgrid 的例子

回答by Olav Botterli

You can try out my free WebGrid DataGridwhich uses JQuery and is JQuery ThemeRoller-Ready

您可以试用我的免费WebGrid DataGrid，它使用 JQuery 并且是 JQuery ThemeRoller-Ready

回答by David Robbins

I currently use DataTables. This allows you to create an html table and apply filters for multiple columns, multi-column sorts, paging, etc. You have the option for client side maipulation of a html table or receiving the data from an AJAX source.

我目前使用DataTables。这允许您创建一个 html 表并为多列、多列排序、分页等应用过滤器。您可以选择对 html 表进行客户端处理或从 AJAX 源接收数据。

It also has an API for dynamically adding rows, displaying columns dynamically, and grouping.

它还具有用于动态添加行、动态显示列和分组的 API。

回答by tabalin

jsGrid is a lightweight GridView jQuery plugin js-grid.com

jsGrid 是一个轻量级的 GridView jQuery 插件js-grid.com

It's pretty customizable and can be used with any dataSource.

它非常可定制，可以与任何数据源一起使用。