插件名称：
jGridViewBar主要用途：对ASP.NET 的 GridView 指定列进行分类，并可以单独“开/关”（有点像QQ中用户组的效果），还可以自己定制栏目颜色、是否隐藏等属性。(即使不是GridView，比如DataGrid或者静态的Table，只要符合GridView生成的静态HTML代码格式，都能使用jGridViewBar！)
最新版本：V2.3.0.0
效果示例：http://www.senparc.com/WebTools.xhtml/JGridViewBar使用说明：
- 在页面中使用GridView/DataGrid控件，并设置其CssClass（任意，不和其他css标签重复即可），假设为gvCSS
- 在页面顶部引用JQuery框架，假设为query-latest.js ( <script language="JavaScript" type="text/javascript" src="/js/jquery-latest.js"></script>)
- 接下去引用jGridViewBar 插件，假设为jquery.gridviewbar-pack-latest.js（<script language="javascript" type="text/javascript" src="/js/jquery.gridviewbar-pack-latest.js"></script>）
- 框架部署至此已经完成，接下去在GridView控件代码后面加上引用代码：
<script language="javascript" type="text/javascript">
rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true } , { showMultiView:true , multiViewOutWidth:"500px" , showDiyMultiViewTip:true , diyTipAttr:[ ["自定义1","URL1","_blank"],["自定义2","URL2","_self"] ] });
</script>
rebulidRowBar(tableCSS , attr ，multiView) 的参数设置定义如下表（使用实例及效果按照下面的示例进行举例分析）：
| 参数 |
类型 |
说明 |
使用实例 |
效果 |
| tableCSS |
字符串型 |
Table的CSS样式（即GridView的CssClass） |
"gvCSS" |
指定了GridView(Table)的CssClass(Css)为gvCSS |
| attr |
Hash型 |
分组常规参数设置 |
{参数名:参数值 , 参数名:参数值 , ...} |
显示分组效果 |
| multiView |
Hash型 |
MultiView（分页）效果参数设置 |
同上 |
显示上部标签 |
|
|
|
|
|
| attr和multiView是Hash类型，其中又包含了以下具体参数类型 |
| 参数名 |
所属参数 |
|
|
|
|
| headShowed |
attr |
布尔型 |
是否显示了GridView的Head（必须与GridView的实际设置一致） |
headShowed:true |
GridView(<Table>)显示了Head(<th>) |
| footShowed |
attr |
布尔型 |
是否显示了GridView的Foot（必须与GridView的实际设置一致） |
footShowed:false |
GridView(<Table>)没有显示了Foot(<th>) |
| checkColum |
attr |
整数型 |
需要归类的列（从0开始计） |
checkColum:1 |
用于归类的列为“类型”，在第2列，由于从0开始计，所以为1 |
| hideCheckColum |
attr |
布尔型 |
是否需要隐藏归类（分组）列 |
hideCheckColum:false |
我们让归类列“类型”显示了，即没有隐藏(hide)，所以为false |
| barBgcolor |
attr |
字符串型 |
归总栏目的背景色，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示 |
barBgcolor:"#6699ff" |
背景色我们将其设为这种颜色，即"#6699ff" |
| hideGroup |
attr |
布尔型 |
是否可收起（隐藏）栏目 |
hideGroup:true |
每一组可以由其所属栏控制显示或隐藏 |
因此以上attr参数应当表示为：
{ headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true } |
|
|
|
|
|
|
|
| showMultiView |
multiView |
布尔型 |
是否启用分页(MultiView)效果（仅当此参数为true时，以下multiView类参数才会生效） |
showMultiView:true |
我们开启了分页(MultiView)效果，所以此处为true |
| multiViewOutWidth |
multiView |
字符串型 |
采用分页效果后，表格的总宽度（出于美观考虑，提供此参数），字符串型。可设定像素（整数）或百分比数等，所有width属性支持的参数 |
multiViewOutWidth:"500px" |
分页之后表格总宽度为500px |
| showDiyMultiViewTip |
multiView |
布尔型 |
是否使用自定义标签（仅当此参数为true时，以下diyTipAttr参数才会生效） |
showDiyMultiViewTip:true |
我们开启了“自定义标签”（即“自定义1”“自定义2”这两个） |
| diyTipAttr |
multiView |
二维数组 |
自定义标签的链接类型，包活了标题文字、链接URL和打开链接的窗口三项参数，这三个参数共同组成一个一维数组，由如此若干个一个维数组组成diyTipAttr二维数组，以,分隔 |
diyTipAttr:[
["自定义1", "URL1","_blank"],
["自定义2","URL2","_self"]
] |
对应了“自定义1”“自定义2”两个自定义标签 |
diyTipAttr 中包含了任意个固定格式的一维数组，每一个一维数组分别对应一个自定义标签，格式为：
[标签标题 , 链接URL ,打开窗口]
都为字符串型 |
以“自定义1”为例：
标签标题："自定义1"
链接URL："URL1"（任意url，为直观起见，此处简写为"URL1"）
打开窗口："_blank"
所以格式为：["自定义1","URL1" ,"_blank"]
注意：
此处“打开窗口”参数可以为任意<a>标签中Target参数接受的字符串。
因此此处可以为"_blank""_self"这样的内置定义（注意前面的"_"），也可以是"main"之类的框架目标 |
|
|
|
|
|
|
因此以上multiView参数应当表示为：
{ showMultiView:true , multiViewOutWidth:"500px" , showDiyMultiViewTip:true ,
diyTipAttr:[ ["自定义1","URL1","_blank"],["自定义2","URL2","_self"] ] } |
|
|
|
|
|
|
|
因此最终调用代码为(为了便于阅读，已经分解，使用时可以写在一行内,并取消//注释)：
rebulidRowBar(
//tableCSS
"gvCSS",
//attr
{
headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true
} ,
//multiView
{
showMultiView:true , multiViewOutWidth:"500px" , showDiyMultiViewTip:true ,
diyTipAttr:[
["自定义1","http://www.senparc.com/WebTools.xhtml/JGridViewBar","_blank"],
["自定义2","http://www.cnblogs.com/szw/archive/2007/12/17/1002975.html","_self"]
]
}
);
|
- 除此以外还有一种调用方法，即在头部添加以下Javascript代码：
$(document).ready(function(){ rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true } , { showMultiView:true , multiViewOutWidth:"500px" , showDiyMultiViewTip:true , diyTipAttr:[ ["自定义1","http://www.senparc.com/WebTools.xhtml/JGridViewBar","_blank"],["自定义2","http://www.cnblogs.com/szw/archive/2007/12/17/1002975.html","_self"] ] }); );
如果出于效率考虑，建议使用第一种方法，如果出于代码工整和维护方便考虑，建议使用上面这种。
- 在V2.2.0.0版本之后，“指定排序列”提供了更多的兼容对象，除了之前的<span>标签环绕对象，还新增了文本框（单行/多行）、单选按钮、下拉菜单等，以适应不同环境的需要，特别是GridView的编辑状态。
但是各标签之间，遵循了一个优先规则，见下表：
| ASP.NET标签 |
HTML代码中的标签 |
优先等级 |
优先规则 |
| Label |
<span> |
1（最优先） |
只要“指定排序列”中存在优先等级高的控件（标签），优先对该标签进行判断，等级较低的全部忽略，跟所处位置无关。
比如，“指定排序列”中同时存在了Label和DropDownList，由于Label等级更高，所以按照Label中的内容作为分组依据。 |
| TextBox（单行） |
<input type="text"> |
2 |
| TextBox（多行） |
<textarea> |
3 |
| DropDownList |
<option> |
4 |
| RadioButton(List) |
<input type="radio"> |
5 |
注：
·指定的排序列必须是含有之Label标签的列（即生成HTML网页后，为<span>标签环绕）。如果确实需要，这个地方将在以后的版本中提供更多的灵活性。特别提示：“指定排序”列必须为“模板列”，不能使用自动绑定列！
·如果不是GridView控件，只是静态的Table，只要符合GridView生成后的格式，同样可以使用本插件！
有任何问题请联系作者 SZW(
TNT2) ,QQ:63408537/498977166(技术专用QQ),Email:szw2003@163.com
http://www.senparc.com/ ，期待您的优秀建议或意见。
PS：由于做这个插件的时候才看了2天JQuery，肯定还会有许多有待改进的地方，希望大家指出！[下载]JQuery框架下载：
jquery-latest.js （此文件只是本站目前使用，不保证是最新版本的，最新框架请到www.jquery.com下载！）
jGridViewBar下载:V2.3.0.0完整版（
开源，供研究探讨用）：
jquery.gridviewbar-2.3.0.0.js 压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：
jquery.gridviewbar-pack-2.3.0.0.js 发布日期：2007/9/23（哇，不知不觉都已经是2个多月前做的东西了）
更新记录:
增加了MulitView分页功能中的“自定义标签”功能，用户可以自己定义任意个自定义标签，用以打开其他窗口。
------------------------
V2.2.0.0完整版（开源，供研究探讨用）：
jquery.gridviewbar-2.2.0.0.js 压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：
jquery.gridviewbar-pack-2.2.0.0.js 发布日期：2007/9/22
更新记录:
增强了“指定排序列”的兼容性，现在除了<span>标签环绕对象，还新增了文本框（单行/多行）、单选按钮、下拉菜单等，以适应不同环境的需要，特别是GridView的编辑状态。目前还不支持CheckBox。
------------------------
V2.1.0.0完整版（开源，供研究探讨用）：
jquery.gridviewbar-2.1.0.0.js 压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：
jquery.gridviewbar-pack-2.1.0.0.js 发布日期：2007/9/21
更新记录:
在分类的基础上，增加了ASP.NET2.0的MultiView（分页）的效果。有了这个功能，用户不必每次都回传到服务器由服务器处理分类，一切操作都在客户端完成，高效省时！
------------------------
V2.0.0.0完整版（开源，供研究探讨用）：
jquery.gridviewbar-2.0.0.0.js 压缩版（加密并压缩，小于1/4的体积，供网上实际使用）：
jquery.gridviewbar-pack-2.0.0.0.js 发布日期：2007/9/20
更新记录:
为了适应更多参数的需要，把一些属性都归入了hash型的参数，这样扩展性就大大增强了
同时增加了一些功能：
·用户可自行设定是否隐藏指定排序列
·用户可自行设定归总栏目的背景色（陆续还会有前景色等设置项目推出）
·用户可自行设定是否可以收起（隐藏）栏目，像QQ用户组那样
--------------------------
V1.1.0.0完整版（开源，供研究探讨用）：
jquery.gridviewbar-1.1.0.0.js 压缩版（加密并压缩，1/3的体积，供网上实际使用）：
jquery.gridviewbar-pack-1.1.0.0.js 发布日期：2007/9/19
更新记录:
对“指定分类”列进行了隐藏，保证美观和一定的灵活性
修正了当Foot显示时,不能正常隐藏的bug
------------------------
V1.0.0.0完整版（开源，供研究探讨用）：jquery.gridviewbar-1.0.0.0.js 压缩版（加密并压缩，1/3的体积，供网上实际使用）：
jquery.gridviewbar-pack-1.0.0.0.js 发布日期：2007/9/19
更新记录:
对ASP.NET 的 GridView 指定列进行分类，并可以单独“开/关”（有点像QQ中用户组的效果） 2007/9/19 V1.1.0.0
posted on 2007-12-17 18:55
SZW 阅读(2946)
评论(9) 编辑 收藏 所属分类:
原创,
ASP.NET