简体   繁体   English

使用javascript的aspx GridView过滤器

[英]aspx GridView filter with javascript

I'm using Asp.net with c# code, VS 2010. I have a page with a gridview which shows a members list. 我正在使用带有c#代码VS 2010的Asp.net。我有一个带有gridview的页面,其中显示了一个成员列表。 I would like to use javascript without any ajax to filter the rows in the grid as the user type. 我想使用不带任何ajax的javascript作为用户类型来过滤网格中的行。 For example if the user typed "Jo" then the rows with "John" and "Jonny" will stay and the other ones will be filtered out. 例如,如果用户键入“ Jo”,则带有“ John”和“ Jonny”的行将保留,而其他行将被过滤掉。

Thanks. 谢谢。

Here's a working example of what you need 是您需要的工作示例

function SetupFilter(textboxID, gridID, columnName) {
    $('#' + textboxID).keyup(function () {
        var index;
        var text = $("#" + textboxID).val();

        $('#' + gridID + ' tbody tr').each(function () {
            $(this).children('th').each(function () {
                if ($(this).html() == columnName)
                    index = $(this).index();
            });

            $(this).children('td').each(function () {
                if ($(this).index() == index) {
                    var tdText = $(this).children(0).html() == null ? $(this).html() : $(this).children(0).html();

                    if (tdText.indexOf(text, 0) > -1) {
                        $(this).closest('tr').show();
                    } else {
                        $(this).closest('tr').hide();
                    }
                };
            });
        });
    });
};

Then all you need to do, after you include the above code segment in your page head or startup .js file is to call the below for each textbox you want to actively filter your grid: 在页面头或启动.js文件中包含上述代码段之后,接下来要做的就是为每个要主动过滤网格的文本框调用以下代码:

$(function () { SetupFilter("myTextBox", "myGridView", "My Column Name"); });

For sure JQuery will be your friend in this case. 当然,在这种情况下,JQuery将成为您的朋友。 www.jquery.com Try out some tutorials for the general usage. www.jquery.com试用一些通用用法教程。 Then in the Init Script reference the Object, directly search for all TD's with these letters in and add ".each().remove(this);" 然后在初始化脚本引用对象中,直接搜索所有带有这些字母的TD并添加“ .each()。remove(this);”

Should work, otherwise please paste a little bit more code. 应该可以,否则请再粘贴一些代码。

LG Jonas Plitt LG乔纳斯·普利特

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM