客户端可在asp.net中搜索Gridview [英] Client side searchable Gridview in asp.net

问题描述

我想要客户端可搜索的网格视图。当我按下文本框中的任何字符时，网格视图需要显示从该字符开始的数据。

感谢你

Hi,
I want client side searchable grid view. when i press any character in text box then grid view need to show data which is started from that character.
Thank u

推荐答案

<input type='text' onkeyup='Filter(this);'/>

function Fliter (Obj) {
    var grid=document.getElementById('gridID');
        var terms = Obj.value;
        var cellNr = this.filterCellIndex;//your  grid cellindex
        var ele;
        for (var r = 1; r < grid.rows.length; r++) {
            ele = grid.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g, "");
            if (ele.toLowerCase().indexOf(terms) >= 0)
                grid.rows[r].style.display = '';
            else grid.rows[r].style.display = 'none';
        }
    };

AutoComplete是一个ASP.NET AJAX扩展程序，可以附加到任何TextBox控件，并将其关联使用弹出式窗口控制以显示以在文本框中键入的前缀开头的单词。以下是物业清单：

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox. Here is the property list:

<ajaxToolkit:AutoCompleteExtender

    runat="server"

    ID="autoComplete1"

    TargetControlID="myTextBox"

    ServiceMethod="GetCompletionList"

    ServicePath="AutoComplete.asmx"

    MinimumPrefixLength="2"

    CompletionInterval="1000"

    EnableCaching="true"

    CompletionSetCount="20"

    CompletionListCssClass="autocomplete_completionListElement"

    CompletionListItemCssClass="autocomplete_listItem"

    CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"

    DelimiterCharacters=";, :"

    ShowOnlyCurrentWordInCompletionListItem="true">
        <Animations>
            <OnShow> ... </OnShow>
            <OnHide> ... </OnHide>
        </Animations>
</ajaxToolkit:AutoCompleteExtender>

之后在Sanjay K. Gupta的代码中进行了一些修改，它将搜索整个网格。

After some modification in Sanjay K. Gupta's Code it will search the whole grid.

// Searching in whole grid
function Filter(txtbox, GridViewId) {
                var grid = document.getElementById(GridViewId);
                var terms = txtbox.value;
                var isExists = false;
                var ele;
                for (var r = 1; r < grid.rows.length; r++) {
                    isExists = false;
                    for (var j = 0; j < grid.rows[0].cells.length; j++) {
                        ele = grid.rows[r].cells[j].innerHTML;
                        if (ele.toLowerCase().indexOf(terms.toLowerCase()) >= 0)
                            isExists = true;
                    }
                    if (!isExists)
                        grid.rows[r].style.display = 'none';
                    else
                        grid.rows[r].style.display = '';


            }

这篇关于客户端可在asp.net中搜索Gridview的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！