DataGrid的拖動+浮動提示

呵呵，好久沒更新了。

前兩個星期，都在試著將DataGrid變成可以拖動，並可以添加多表頭的樣子。拖動的可以了，多表頭用最笨的辦法也實現了，但是多表頭並可以拖動卻沒有實現，比如，添加二級表頭后，只有第一行表頭可以拖動，第二行卻不行。但是其間，我也是獲益頗多。

1.      可以將一些鼠標等事件用JavaScript寫到一個.htc的文件，然后使用下列方法(BEHAVIOR)調用：

(1) 方法一：

<asp:DataGrid ID="DataGrid1" runat="server" Style="behavior: url(draggrid.htc)">

</asp:DataGrid>

(2)方法二：

<style type="text/css">

        .MoveDgd { BEHAVIOR: url(movegrid.htc)}

</style>

<asp:DataGrid ID="dgdMain" CssClass="MoveDgd" runat="server">

2.      鼠標移動到單元格上方時出現浮動提示：由于DataGrid可以拖動了，所以單元格的寬度就是個問題了。目標是：當單元格內的字符寬度(不是長度Length哦)大于單元格的寬度時，隱藏多余的字符，并且使用省略號代替，而且，當鼠標移動到DataGrid的某個單元格的上方時，如果單元格內的字符寬度(不是長度Length哦)大于單元格的寬度，則將完整內容作為提示顯示出來。

(1) 在网上查找相關資料，發現原來使用CSS樣式就可以實現了。

<style type="text/css">

        . TextOver { text-overflow:ellipsis; overflow:hidden; white-space: nowrap; padding:2px; width:80% }

</style>

其中，TextOver為自定義的標識符。

這句是說當字符串的寬度超過單元格寬度的80%的時候，就以省略號顯示多出部分。

然后在申明DataGrid的時候指定該樣式：

<asp:DataGrid ID="DataGrid1" runat="server" CssClass="TextOver">

</asp:DataGrid>

(2) 這個方法對英文字母和數字都可以達到要求，但是對漢字就不能達到預期的效果，于是繼續上网淘寶，發現了一段javascript可以實現：

<script language="javascript">

function changeTitle(obj)

        {

            if(obj.offsetWidth > obj.parentElement.offsetWidth)

            {

                obj.title = obj.innerText;

            }

            else

            {

                obj.title = "";

            }

    }

</script>

 但是，方法中判斷obj.offsetWidth > obj.parentElement.offsetWidth，但是直接使用的話，obj就是td了，那么obj.parentElement當然就是table了，所以這個條件總是不成立的，也就不會顯示提示咯。

 于是，我拼命的找資料，該怎么得到這些字符串的寬度，可惜的是，我奮斗了好久，都沒有找到任何可行的方法，沒辦法，看來這樣子是行不通的，只好換個方法。

         所以我得在td的外面加一層標簽<div></div>這樣的話，當td中的字符串寬度超過td的寬度的時候，就能夠顯示提示了。試了下，居然通過。

        首先，在DataGrid的ItemDataBound()事件中為表頭外的所有單元格添加CssClass樣式TextOver：

      protected void dgdMain_ItemDataBound(object sender, DataGridItemEventArgs e)

          {

               if (e.Item.ItemType == ListItemType.Header)

               {

 

               }

               else

               {

                    for (int i = 0; i < e.Item.Cells.Count; i++)

                    {

                         e.Item.Cells[i].Attributes.Add("class", "TextOver");

                    }

               }

     }

    然后，在填充DataGrid的時候，為td添加Div層：

  public void FillDBGridFromDataSet(ref DataGrid DBGTemp, DataSet dstADO)

          {

              for (int intRow = 0; intRow <= dstADO.Tables[0].Rows.Count - 1; intRow++)

              {

                  for (int intCol = 0; intCol <= DBGTemp.Columns.Count - 1; intCol++)

                  {

    string[] strDBFieldNameWithCellType = DBGTemp.Columns[intCol].FooterText.Split('/u 000F ');

    string strDBFieldName = strDBFieldNameWithCellType[0];//欄位名稱

    string strCellType = strDBFieldNameWithCellType[1];   //欄位型態

    string strFieldType = strDBFieldNameWithCellType[2];  //按鈕型態 LinkButton || PushButton

    int intDec = Int32.Parse(strDBFieldNameWithCellType[3]);//幣別小數位

    if (strCellType == "1")      //CheckBox

    {

    }

    else if (strCellType == "3")      //DataTime

    {

         …….

    }

    else if (strCellType == "4")      //Numeric

    {

       ………

    }

    else if (strCellType == "5")     //5.String 型態

    {

        if (FindDBColumn(dstADO, strDBFieldName))

        {

                           DBGTemp.Items[intRow].Cells[intCol].Text = dstADO.Tables[0].Rows[intRow][strDBFieldName].ToString();

/***************************************************************************************

 * Desc：在單元格<td></td>中添加一層<div></div>標簽

 * 目的：注冊onmouseover的事件，

 *       用以判斷單元格內字符串的寬度是否大于td的寬度(隱藏多余的字符並以...表示，並顯示浮動提示)

****************************************************************************************/

                            string strDivStart = "<div style=/"white-space: nowrap;/" title=/"/" οnmοuseοver=/"changeTitle(this)/">";

                            string strDivEnd = "</div>";

                            string strTd = DBGTemp.Items[intRow].Cells[intCol].Text;

                            DBGTemp.Items[intRow].Cells[intCol].Controls.Add(new LiteralControl(strDivStart + strTd + strDivEnd));

                        }

                    }

                    else if (strCellType == "6")                         //6.COMBOBOX型態

                    {

                        ………

                    }

                    else if (strCellType == "7")                         //Currency型態

                    {

                        ………

                    }

                    else if (strCellType == "8")                       //LinkButton

                    {

                        ………

                    }

                    else if (strCellType == "9")                      //PushButton

                    {

                        ………

                    }

                }

            }

   }

呵呵，又學了一招，原來MicroSoft給我們提供了這么多類可以使用，比如，我現在用到的添加標簽：

 string strDivStart = "<div style=/"white-space: nowrap;/" title=/"/" οnmοuseοver=/"changeTitle(this)/">";

                            string strDivEnd = "</div>";

                            string strTd = DBGTemp.Items[intRow].Cells[intCol].Text;

                            DBGTemp.Items[intRow].Cells[intCol].Controls.Add(new LiteralControl(strDivStart + strTd + strDivEnd));

這里，用到的是LiteralControl類，它表示 HTML 元素、文本和 ASP.NET 页中不需要在服务器上处理的任何其他字符串。

3.      先就這么多吧，周末愉快！