JQuery 應(yīng)用 JQuery.groupTable.js
更新時間：2010年12月15日 21:23:12 作者：
在以往的項目中，數(shù)據(jù)瀏覽用的都table 的形式展現(xiàn)。如下圖1， 這是一個很常見的表格。通常對分類的字段先進行排序。為了讓分類表現(xiàn)的更直觀。
我寫了個JQUERY 的插件。來實現(xiàn)分組的效果。
圖2. 這是一個簡單的分組效果，根據(jù)表的第一列“Department" 來分組
圖3， 也可以對多個列來分組，根據(jù)第一列”Department" 和第四列 ”Gender“ 來分組。分組前，先對要選擇的列進行排序，這在提取數(shù)據(jù)的時候可以完成，
就沒有在客戶端再去實現(xiàn)。
圖4. 可以設(shè)置參數(shù) collapse=1. 讓表格先收縮起來。 它的默認(rèn)值是0;
通過寫這個JQuery 控件，深刻體會到它的強大。整個代碼不到100行。
在ASP.NET 里面。 gridView 默認(rèn)顯示的時候，不會加上TBODY 標(biāo)記。 為了讓GridView 的類容顯示在TBODY,在Page load 里面可以加上下面的代碼
GridView1.UseAccessibleHeader=true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
GridView1.FooterRow.TableSection = TableRowSection.TableFooter;
這樣就可以用JQuery.groupTable 來處理 gridview 生成的table 了。
歡迎大家多提意見。
您可能感興趣的文章:
- 基于jquery實現(xiàn)的類似百度搜索的輸入框自動完成功能
- input 輸入框獲得/失去焦點時隱藏/顯示文字(jquery版)
- jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
- jquery實現(xiàn)input輸入框?qū)崟r輸入觸發(fā)事件代碼
- js與jquery實時監(jiān)聽輸入框值的oninput與onpropertychange方法
- Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）
- Bootstrap每天必學(xué)之下拉菜單
- Bootstrap每天必學(xué)之導(dǎo)航條
- 基于Bootstrap使用jQuery實現(xiàn)輸入框組input-group的添加與刪除
相關(guān)文章
本文給大家分享一款貼近用戶體驗的Jquery日期、時間選擇插件，需要的朋友可以參考下2015-08-08
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
這篇文章主要介紹了jQuery+Ajax實現(xiàn)無刷新操作，分享了采用Ashx+jQuery Ajax實現(xiàn)“無刷新登錄”的例子，感興趣的小伙伴們可以參考一下2016-01-01
jQuery實現(xiàn)ToolTip元素定位顯示功能示例
這篇文章主要介紹了jQuery實現(xiàn)ToolTip元素定位顯示功能,結(jié)合實例形式分析了jQuery針對頁面元素屬性的動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件使用的簡單教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了jQuery中insertBefore()方法用法,實例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個指定的元素集合前面的使用技巧,需要的朋友可以參考下2015-01-01
Expandable "Detail" Table Rows
Expandable "Detail" Table Rows...2007-08-08
這篇文章主要介紹了jQuery條件分頁代替離線查詢，通過代碼實例讓讀者更深入了解該功能的操作，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
項目中應(yīng)用jQuery解析讀取XML語言配置文件來實現(xiàn)語言的調(diào)度。這是jQuery解析讀取XML文件功能的測試源碼，現(xiàn)拿出來分享。2009-10-10
這篇文章主要介紹了jQuery獲得指定元素坐標(biāo)的方法,涉及offset().left及offset().top屬性獲取元素坐標(biāo)的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04