閲覧総計:3816  (本日:2  昨日:0)

 検索キーワードの背景をクリーム色にし、検索キーワードが本文中のどこに存在する
かがひと目でわかる様に強調表示する方法を確認した。 09/10/17

【方法】

RowDataBound.JPG
Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
    Dim SplitKeyWords As String() = TextBox1.Text.Split("  ".ToCharArray(), StringSplitOptions.RemoveEmptyEntries) ' 全角と半角のスペース
    If e.Row.RowType = DataControlRowType.DataRow Then
        For i As Integer = 0 To e.Row.Cells.Count - 1
            For j As Integer = 0 To SplitKeyWords.Length - 1
                e.Row.Cells(i).Text = e.Row.Cells(i).Text.Replace(SplitKeyWords(j), "<B Style='background-color:#fff495'>" & SplitKeyWords(j) & "</B>")
            Next
        Next
    End If
End Sub

開発環境:VWD2005 + Access2003
サーバ:ASP.NET2.0 + Access2003

【機能】GridViewの検索キーワードの背景がクリーム色になり強調され、本文中の検索キーワードがひと目で把握できる。

【稼働画面】

KeyWordEmphasize01.JPG

Accessデータベース名:MeiboDB.mdb
テーブル名:MeiboTable2

フィールド名データ型フィールドサイズ
ID (主キー)オートナンバー型長整数型
namaeテキスト型50
syussinテキスト型50

※VWD2005、ASP.NET2.0環境ではAccess2007のDBファイル形式(*.accdb)は利用できな
い模様。DBファイルは「Acces2002-2003形式(*.mdb)」で保存して利用する。

「キーワード検索」機能稼働ページの全コード
【KeyWordEmphasize01.aspx】

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        'スペースで区切られた単語のand検索を行う
        'TextBoxが空の場合は全件を表示
        AccessDataSource1.SelectParameters.Clear() 'パラメータをクリア 
        AccessDataSource1.SelectCommand = "SELECT [ID], [namae], [syussin] FROM [MeiboTable2]"
        Dim wa As String = " WHERE "
        Dim SplitKeyWords As String() = Me.TextBox1.Text.Split("  ".ToCharArray(), StringSplitOptions.RemoveEmptyEntries) ' 全角と半角のスペース
        For i As Integer = 0 To SplitKeyWords.Length - 1
            AccessDataSource1.SelectParameters.Add("KeyWord" & i, "%" & SplitKeyWords(i) & "%")
            AccessDataSource1.SelectCommand &= wa & "(namae LIKE @KeyWord" & i & " OR syussin LIKE @KeyWord" & i & ")"
            wa = " AND "
        Next
    End Sub
   
    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
        Dim SplitKeyWords As String() = TextBox1.Text.Split("  ".ToCharArray(), StringSplitOptions.RemoveEmptyEntries) ' 全角と半角のスペース
        If e.Row.RowType = DataControlRowType.DataRow Then
            For i As Integer = 0 To e.Row.Cells.Count - 1
                For j As Integer = 0 To SplitKeyWords.Length - 1
                    e.Row.Cells(i).Text = e.Row.Cells(i).Text.Replace(SplitKeyWords(j), "<B Style='background-color:#fff495'>" & SplitKeyWords(j) & "</B>")
                Next
            Next
        End If
    End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>検索キーワードの背景をクリームにし強調表示</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        検索キーワードの背景をクリームにし強調表示 09/10/17<br />
        <br />
        検索キーワード:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="検索" /><br />
        &nbsp;
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="ID"
            DataSourceID="AccessDataSource1" EmptyDataText="表示するデータ レコードがありません。" CellPadding="4" ForeColor="#333333" GridLines="Vertical" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="namae" HeaderText="namae" SortExpression="namae" />
                <asp:BoundField DataField="syussin" HeaderText="syussin" SortExpression="syussin" />
            </Columns>
            <RowStyle BackColor="#E3EAEB" />
            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
            <EditRowStyle BackColor="#7C6F57" />
        </asp:GridView>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="App_Data\MeiboDB.mdb"
            DeleteCommand="DELETE FROM `MeiboTable2` WHERE `ID` = ?"
            InsertCommand="INSERT INTO `MeiboTable2` (`ID`, `namae`, `syussin`) VALUES (?, ?, ?)"
            SelectCommand="SELECT `ID`, `namae`, `syussin` FROM `MeiboTable2`"
            UpdateCommand="UPDATE `MeiboTable2` SET `namae` = ?, `syussin` = ? WHERE `ID` = ?">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="ID" Type="Int32" />
                <asp:Parameter Name="namae" Type="String" />
                <asp:Parameter Name="syussin" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="namae" Type="String" />
                <asp:Parameter Name="syussin" Type="String" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
        </asp:AccessDataSource>
        <br />
    
    </div>
    </form>
</body>
</html>

【参考にしたページ】
  なし


  • 1 -- 1 2014-11-03 (月) 21:24:50
  • 1 -- 1 2012-07-09 (月) 09:16:00
    選択肢 投票
    参考になった 0  
    ふつう 0  
    参考にならなかった 0  

添付ファイル: fileRowDataBound.JPG 507件 [詳細] fileKeyWordEmphasize01.JPG 511件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2020-08-22 (土) 12:39:14 (718d)