Gridview与客户端过滤 [英] Gridview with client side filtering

问题描述

嘿大家，



我有一个gridview，在标题中我有文本框组件用于过滤gridview中的数据。

设置AutoPostback和OnTextChanged事件。因此，当我输入文本并按TAB时，将执行事件并且我的gridview显示已过滤的数据。我的数据源是一个DataView对象。



我想要的是，在文本框中键入文本时，只显示带有filtertext的行（DataView.RowFilter已设置）所以我没有TAB。



我创建了一个ASHX。我可以从缓存中获取数据。我可以使用RowFilter创建一个DataView，但是如何更新我的Gridview？



我尝试了什么：



我尝试使用onkeyup事件，但它通过__dopostback javascript调用执行了TextChanged事件。

在这种情况下，网格完全重新加载，可以在尽管gridview在一个UpdatePanel

Hey everyone,

I have a gridview and in the header I have textbox components used for filtering the data in the gridview.
AutoPostback and OnTextChanged events are set. So when I enter text and press TAB the event is executed and my gridview shows filtered data. My datasource is a DataView object.

What I want is that while typing the text in a textbox the rows with the filtertext are only shown (DataView.RowFilter is set) so I don't have to TAB.

I have created an ASHX. I can get my data from the Cache. I can create a DataView with the RowFilter, but how to update my Gridview?

What I have tried:

I tried with onkeyup event, but it executed TextChanged event by an __dopostback javascript call.
In that case the grid is fully reloaded and that can be seen on the page despite the gridview is in an UpdatePanel

推荐答案

如果你试图将服务器端控件与客户端功能结合起来，事情会变得更复杂。 GridView是一个服务器端数据控件，提供您可以利用的服务器端功能。如果你想在客户端（JavaScript）中操作GridView中的数据，那么你将不得不学习JavaScript来操作DOM（HTML元素）。您可以尝试查看jQuery，因为它提供了可用于操作DOM的选择器，它还提供了AJAX API，使您能够异步地与服务器数据进行通信。但请注意，如果您不熟悉客户端脚本，这可能需要您花费大量时间和精力。



您可以使用其他选项煮熟的客户端网格，可以完成网格所需的所有基本功能。一个很好的例子是使用Bootstrap DataTables。请参阅此演示文稿： DataTables示例 - 单个列搜索（文本输入）[^]

Things will get more complicated if you try to combine server-side controls with client-side functionality. GridView is a server-side data control which provides server-side capabilities that you can take advantage of. If you want manipulate the data in GridView at the client (JavaScript) then you'll have to learn JavaScript to manipulate the DOM (HTML elements). You could try looking at jQuery as it provides selectors that you can use to manipulate the DOM and it also provides AJAX APIs that enables you to communicate with your server data asynchronously. But be aware that this may take you alot of time and effort if you are not familiar with client-side scripting.

You other option would be to use a pre-cooked client-side grid that does all the basic things you need for your grid. One good example is using Bootstrap DataTables. See this for demo: DataTables example - Individual column searching (text inputs)[^]

这篇关于Gridview与客户端过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！