雲淡風清

最近因為現上的需求，需要將查詢的資料以類似SQL Group By 的方式如下圖的方式來呈獻出來

傷腦筋的是，Gridview <-- 實在是跟它不熟>"<， 不是很懂得UI控製 來達到同樣的效果

只好拜一下google大神找看看相關的討論，也請教了一些先進

其中有不少的做法可以達到這個效果，但是身為科技始終來自於隋性的我

選擇了比較簡單一點的處理方式，利用jQuery來做後續處理

在這也要感謝小喵分享自己的經驗，讓我得以減少摸索的時間來處理這樣的需求

Gridview 在 client 的原始碼裡，會以table的方式來呈獻

實作的部份，詳情可以參考小喵的[jQuery]寫個RowSpan的fn

下面就針對GridView的設定差異上，來做一些處理、說明

 在小喵大的實作當中，為了要讓jQuery 能對相同欄位做處理，所以在要合併的欄位tag上面

皆定義了dt=XX 的 屬性，讓後續jQuery處理的時候，能利用dt來做為判定條件

不過傷腦筋的事情就出現了，GridView裡面是要如何能讓client 的<td>當中，增加dt=xx 的屬性!?

試了試些方法，好像都達不到 ~"~ ，最後只好換個方式，採用下面的方法去實作：

01 <asp:GridView ID="GridView1" runat="server" >
04     <Columns>
05         <asp:TemplateField HeaderText="編輯" ItemStyle-CssClass="edit">
06             <ItemTemplate>
07                 <asp:Button runat="server" Text="Edit" />
08             </ItemTemplate>
09         </asp:TemplateField>
10         <asp:BoundField DataField="column1" HeaderText="欄位1" />
11         <asp:BoundField DataField="column2" HeaderText="欄位2" />
12     </Columns>
13 </asp:GridView>

為了讓jQuery能識別出點做合併的欄位，所以GridView 要合併的欄位上面，增加ItemStyle-CssClass=XXX的屬性

這個設定會讓GridView在client 顯示時，原始碼產生為<td class='edit'>  

這樣一來，只需再將jQuery稍做修改如下：

1 <script type="text/javascript">
2    $(document).ready(function() ...{
3        $('td[class=edit]').rowspan();    
4    });    
5 </script>

轉個彎，修改jQuery的方法，改為尋找所有td的class為edit 的object

即可完成，欄位合併的功能了，快速又方便的做法

更新一：

後來經討論，要替GridView在Client 端顯示<TD> 中增加自定屬性

可以在GridView的 RowDataBound 的事件中，去coding

當GridView再產生Row的時候，依據需求，增加自定屬性在指定的Cell(欄)即可

1     Protected Sub GridView1_RowDataBound() Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
2
3         e.Row.Cells(0).Attributes.Add("dt", "xxxx")
4
5     End Sub