1. 程式人生 > >操作gridview,選中行時改變背景色且checkbox被選中,隔行變色,全選變色

操作gridview,選中行時改變背景色且checkbox被選中,隔行變色,全選變色

 css:
<style type="text/css">
    .checked { background: #c0c0ff; }
    .odd { background: #72FE95; }
    .even { background: #B8E2EF; }
    .current { background: #FFDD75; }
  </style>
aspx頁面
  <asp:GridView ID="gvShow" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#93BEE2"
            BorderColor="#93BEE2"  Width="364px" 
            OnRowDataBound="gvShow_RowDataBound">
            <Columns>
              <asp:TemplateField>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckAll" runat="server" Text="全選" ToolTip="按一次全選,再按一次取消全選"/>
                </HeaderTemplate>
                <HeaderStyle  Width="50px"/>
                <ItemTemplate>
                    <asp:CheckBox runat="server" ID="ckbChose"/>
                </ItemTemplate>
                    <ItemStyle  Width="30px" CssClass="txt"/>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="部門">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblDep" Text='<%# Eval("PE_DEPA")%>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle Width="100px" CssClass="txt" />
                </asp:TemplateField>
                <asp:TemplateField HeaderText="人員工號">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblCode" Text='<%# Eval("PE_ID") %>'></asp:Label>
                    </ItemTemplate>
                    <ItemStyle  Width="120px" CssClass="txt"/>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="人員名稱">
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblName" Text='<%# Eval("PE_NAME") %>' Width="100px"></asp:Label>
                    </ItemTemplate>
                    <ItemStyle  CssClass="txt"/>
                </asp:TemplateField>
            </Columns>
             <EmptyDataTemplate>
                            <table  align="center"  cellpadding="0" cellspacing="1" width="364px" >
                                <tr style="background-color:#93BEE2">
                                    <td style= "height:25px; width:30px;" ><b>選擇</b></td>
                                    <td style=" height:25px;"><b>部門</b></td>
                                    <td style=" height:25px; width:120px;" ><b>人員工號</b></td>
                                    <td style=" height:25px;" ><b>人員名稱</b></td>
                                </tr>
                                <tr>
                                    <td  colspan ="7" align ="center" style=" height:25px;" ><asp:Label runat="server" ID="lblEmptyData" ForeColor="red" Text="暫且沒有記錄資訊!" ></asp:Label></td>
                                </tr>
                            </table>
             </EmptyDataTemplate>
            <HeaderStyle BackColor="#93BEE2"></HeaderStyle>
        </asp:GridView>

js:

<script type="text/javascript">
     var table = "<%=gvShow.ClientID %>";
     var oldBg;
     function SelectAll(ele) {
         t = document.getElementById(table);
         for (i = 1; i < t.rows.length; i++) {
             t.rows[i].cells[0].children[0].checked = ele.checked;
             if (t.rows[i].cells[0].children[0].checked) {
                 t.rows[i].className = "checked";
             }
             else {
                 t.rows[i].className = t.rows[i].getAttribute("oldClass");
             }
         }
     }

     function CheckTr(tr, evt) {
         ele = evt.target || event.srcElement;
         if (ele.tagName && ele.tagName != "INPUT")
             tr.cells[0].children[0].checked = !tr.cells[0].children[0].checked;
         if (tr.cells[0].children[0].checked) {
             oldBg = tr.className = "checked";

         }
         else {
             oldBg = tr.className = tr.getAttribute("oldClass");
         }
     }
  </script>


後臺:

 //滑鼠移動事件加單擊事件
        protected void gvShow_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                CheckBox h = e.Row.FindControl("CheckAll") as CheckBox;
                h.Attributes.Add("onclick", "SelectAll(this)");
            }
            else if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes.Add("onclick", "CheckTr(this,event)");
                //e.Row.Attributes.Add("class", e.Row.RowIndex % 2 == 0 ? "odd" : "even");
                //e.Row.Attributes.Add("oldClass", e.Row.RowIndex % 2 == 0 ? "odd" : "even");
                e.Row.Attributes.Add("onmouseover", "oldBg=this.className;this.className='current'");
                e.Row.Attributes.Add("onmouseout", "this.className=oldBg;");
                e.Row.Attributes["style"] = "Cursor:hand";
            }

        }

相關推薦

操作gridview中行改變景色checkbox選中變色變色

 css:<style type="text/css"> .checked { background: #c0c0ff; } .odd { background: #72FE95; } .even { background: #B8E2E

eazyUI 修改datagrid中行默認景色

cte clas 背景 div pre color 默認 sel datagrid <style> .datagrid-row-selected { background: #D1EEEE; co

js換色+/全部demo

cell blue scale itl val let text demo 測試數據 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf

關於實現點表格一行中任意一行即選中該行相關複同時改變景色的問題

js程式碼 /* * 點選tr即可勾選當前行復選框 * zhouxy * */ function checkTr(tr) { var tds = tr.childNodes; for(var j = 0; j < tds.length; j++) {

JTable中新增元件後改變當選中景色

在JTable中新增元件後,當我們選中某一行時,我們會發現其他欄的背景色會變為table設定的選中背景色,而帶有元件的那一欄背景色卻不變 這時,我們需要在TableCellRenderer中新增一個填充方法 下面以JLable元件為例: import java.awt.C

使用openpyxl的styles實現寫入值景色

背景顏色 文件名 excel 列表 data append 考試 app ubd 所用文件、數據和上一節代碼中用的一致 本次直接貼代碼 from openpyxl.styles import fillsfrom openpyxl import load_workbookcl

選中改變相對應的包裹複框的元素樣式

  首先 有這樣的一個效果: 即選中複選框的時候,相對應的li將改變背景色等樣式,完整的實現效果主要程式碼如下   原始html檔案 <div class="check"> <h5>症狀(可多選)</h5>

LigerUI 設定中行顏色改變與設定水平滾動條不顯示

 .l-grid-body { position: relative; width:100%;     top: 0px;     left: 0px;     overflow: none;

iOS 按鈕點改變景色

- (void)viewDidLoad {     [superviewDidLoad]; // Do any additional setup after loading the view. UIButton *btn = [[UIButtonalloc] i

Android 按壓狀態改變景色

stat oid select col cto drawable XML min mine Android 按壓狀態改變背景色 <selector xmlns:android="http://schemas.android.com/apk/res/android"&g

SecureCR 改變景色和文字顏色

global ESS img bold linu 文件 info 快捷 就是 1.打開SecureCR鏈接Linux服務器,Options->Session Options->Emulation->Terminal 選擇Linux (相應的服務器系統)AN

分享一個算法計算能在任何景色上清晰顯示的前景色

gray marker link media cef edit ref 相關 spa 原文:分享一個算法,計算能在任何背景色上清晰顯示的前景色 版權聲明:本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉

####【attr(“checked”true)】;【必須用removeAttr(“checked”)不能用attr("checked",false)》這傢伙或有“第二次失敗”問題】

####全選【attr(“checked”,true)】;全不選【必須用removeAttr(“checked”),不能用attr("checked",false)》這傢伙或有“第二次全選失敗”問題】 ====》用的jquery。 ====》第二次全選失敗”問題,找到這個:https://blo

computed 計算屬性改變景色

html: <template> <div> <button @click="changeColor =! changeColor">cha

個人js學習例項-點按鈕實現按鈕景色變化以及相對應的div變化

效果: 程式碼: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>

C#的winform中MDI 父窗體改變景色

MdiClient ctlMDI; // Loop through all of the form's controls looking // for the control of type MdiClient. foreach (Control ctl in this.Controls) { tr

菜鳥學android——webview改變景色出現閃屏

將webview設定為背景透明後出現閃屏: webview.setbackground(Color.TRANSPARENT); 關閉硬體加速就可以解決問題了: webview.setLayerType(WebView.LAYER_TYPE_SOFTWARE, null);

imagecreatetruecolor()與imagecreate()生成影象景色

resource imagecreatetruecolor ( int $x_size , int $y_size ) 返回一個影象識別符號,代表了一幅大小為 x_size 和 y_size 的黑色影象。   resource imagecreate ( int $x

用Bootstrap建立表格並初始化一行景色

初始化載入資料,並預設新增一行背景色 程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

[Android]ListView滾動itemview景色變成黑色的解決方式

在使用listView的過程中,偶然也會遇到一些小問題,比如在listview中除錯背景色的過程中會遇到這樣或那樣的問題.比如我指定某行高亮之後, 然後就讓我遇到了一個比較經典的issue,在拖動的