愛比的新手筆記

滑鼠移入時，效果有２種，一種是整列HighLight，一種是只有該格HighLight
我先在繼承來的GridView加上一些屬性：

        public bool HighLightByCell { get; set; }
        public bool HighLightByRow { get; set; }
        public Color HighLight { get; set; }
        public Color AlternatingHighLight { get; set; }

以上屬性前都加這３行，因為只想用程式控制：

        [Browsable(false)]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)]
        [EditorBrowsable(EditorBrowsableState.Never)]

再加上處理呼叫JS字串的Method：

      private string HighLightScript(Color BaseColor)
        {
            if ((this.HighLightByCell || this.HighLightByRow)//有要highlight row或cell
                && (!BaseColor.IsEmpty || !this.HighLight.IsEmpty))//有設基本色或highlight色
            {
                #region 計算HighLight顏色
                Color HClr = HighLight;http://www.dotblogs.com.tw/abbee/archive/2010/09/29/17984.aspx
                Color HClr2 = AlternatingHighLight;
                Int16 i = 50;//rgb都加亮
                if (HClr.IsEmpty)
                { HClr = 另寫Method改BaseColor顏色,各位可以自己寫}
                if (HClr2.IsEmpty)
                {//優先取用: AlternatingHighLight, AlternatingRowStyle.BackColor, HClr
                    if (!this.AlternatingRowStyle.BackColor.IsEmpty)
                    { HClr2 = 改this.AlternatingRowStyle.BackColor顏色}
                    else { HClr2 = HClr; }
                }
                Color Oclr = this.AlternatingRowStyle.BackColor.IsEmpty ? BaseColor : this.AlternatingRowStyle.BackColor;
                #endregion

                this.Attributes["evenColor"] = ColorToHexStr(BaseColor);//顏色記在屬性裡, 還原顏色用
                 //ColorToHexStr是把顏色RGB轉16進位字傳出的Method
                this.Attributes["oddColor"] = ColorToHexStr(Oclr);
                //$.setHighlight是寫在js檔的function
                return String.Format("$.setHighlight('{0}','{1}','{2}','{3}');"
                                    , this.ClientID
                                    , ColorToHexStr(HClr)
                                    , ColorToHexStr(HClr2)
                                    , this.HighLightByRow.ToString().ToLower()
                                    );
            }
            return string.Empty;
        }

表頭表尾要排除，所以不能讓GridView產生的表頭表尾都叫<TR>： 

       private void SetHeader()
        {
            if (this.ShowHeader && this.HeaderRow != null)//產生th
            { this.HeaderRow.TableSection = TableRowSection.TableHeader; }
        }

        private void SetFooter()
        {
            if (this.ShowFooter && this.FooterRow != null)//產生tfoot
            { this.FooterRow.TableSection = TableRowSection.TableFooter; }
        }

 在GridView一載入時要加入JS檔：  

      protected override void OnLoad(EventArgs e)
        {
            #region 作Script
            String PageReady = "$(function () {{{0}}});";
            Color OClr = this.RowStyle.BackColor;//抓個別row的顏色
            if (OClr.IsEmpty) { OClr = this.BackColor; }//沒設定的話直接抓底色

            String ReadyToDo =  HighLightScript(OClr);//將所有效果語法串起來,目前只有一種效果
            //ScriptManager.RegisterStartupScript用在updatepanel內才不會失效
            if (ReadyToDo != string.Empty)//有Script要執行的話
            { ScriptManager.RegisterStartupScript(this, this.GetType(), this.ClientID + "_Default", String.Format(PageReady, ReadyToDo), true); }//命名以ID加"_Default"，因為同元件可能加很多不同Script
            #endregion

            SetHeader();
            SetFooter();
            base.OnLoad(e);
        }

再來是我寫好的js：(要先載入JQuery哦)台灣是獨立國家
傳入參數依序為：table的 id, 偶數行顏色, 單數行顏色, 是否對整列改色

$.setHighlight = function(tableid, evenHighColor, oddHighColor, ByRow) {
    var grid = $("#" + tableid);
    var chgColor = function(obj, evenClr, oddClr) { //滑鼠進出都是要改td顏色,提出來寫
        var chgobj = $(obj);
        var rowidx = $("#" + tableid + " tbody tr:visible").index(chgobj.parent()); //看第幾列
        var color = "";
        //判斷單偶數決定是顏色
        if (rowidx & 1) color = oddClr;
        else color = evenClr;

        if (ByRow) chgobj = chgobj.parent().children(); //改一整列的顏色

        chgobj.css("background-color", color);
    };

    var trid = '#' + tableid + ' tbody tr td';
    $(trid).mouseover(

    function() { // 指定滑鼠移入時
        chgColor(this, evenHighColor, oddHighColor);
    });

    $(trid).mouseout(

    function() { // 指定滑鼠移出時
        chgColor(this, grid.attr('evenColor'), grid.attr('oddColor'));
    });
};

 

Taiwan is a country. 臺灣是我的國家