• 在页面中使用GridView控件，并设置其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="/Content/jGridViewBar/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.senparc.com/WebTools.xhtml/JGridViewBar","_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.senparc.com/WebTools.xhtml/JGridViewBar","_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

  
  
  

• 在页面中使用GridView控件，并设置其CssClass（任意，不和其他css标签重复即可），假设为gvCSS
• 在页面顶部引用JQuery框架，假设为query-latest.js ( <script language="JavaScript" type="text/javascript" src="/js/jquery-latest.js"></script>)
• 接下去引用jGridViewBar 插件，假设为jquery.gridviewbar-pack-2.2.0.0.js（<script language="javascript" type="text/javascript" src="/Content/jGridViewBar/jquery.gridviewbar-pack-2.2.0.0.js"></script>）
• 框架部署至此已经完成，接下去在GridView控件代码后面加上引用代码：
  
  <script language="javascript" type="text/javascript">
  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true ，multiView:true , multiViewOutWidth:"300" });
  </script>
  
  rebulidRowBar(tableCSS , attr) 的参数设置定义如下：
  tableCSS：Table的CSS样式（即GridView的CssClass），字符串型
  attr：参数设置，Hash型，其中包含了以下参数：
  headShowed：是否显示了GridView的Head ，布尔型
  footShowed：是否显示了GridView的Foot ，布尔型
  checkColum：需要归类的列（从0开始计） ，整数型
  checkColumEdit：当指定排序列处于编辑状态（即首个控件不是<span>标记环绕，而是文本框、下拉菜单、单选按钮等）时，指定控件名称
  hideCheckColum：是否需要隐藏归类列，布尔型
  barBgcolor：归总栏目的背景色 ，字符串型，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示
  hideGroup：是否可受起（隐藏）栏目，布尔型
  multiView: 是否启用分页(MultiView)效果，布尔型
  以下参数在 multiView为 true 时才有用：
  multiViewOutWidth: 采用分页效果后，表格的总宽度（出于美观考虑，提供此参数），字符串型。可设定像素（整数）或百分比数等，所有width属性支持的参数
  
  示例解析：由于下面“盟友列表”示例中：
  CSS标记为gvCSS ，所以tableCSS设为“GvCSS”；
  显示了Head，但是没有显示Foot,所以 headShowed  和 footShowed 两项分别是true和false；
  用于归类的列为“类型”，在第2列，由于从0开始计，所以checkColum为1；
  我们让归类列“类型”显示了，所以 hideCheckColum  为false；
  背景色我们将其设为这种颜色，所以barBgcolor为"#6699ff"；
  栏目我们允许他隐藏（像QQ那样），所以hideGroup为true；
  我们让他显示了MulitView（分页）效果，所以multiView为true；因为我们开启了MultiView效果，所以下面的multiViewOutWidth设置将会生效。
  同时我们指定的分页后总区域的宽度为300像素(300px)，所以multiViewOutWidth为"300"（此处注意需要是用引号。设置为“300px”也可以）。
  
  由此我们可以得到attr的参数： { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true ， multiView:true , outWidth:"300"}
  注意：必须是这样的格式：{参数名称:参数值 , 参数名称:参数值 ,...}顺序可以任意！
  
  因此最终调用代码为：rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:truefalsebarBgcolor:"#6699ff" , hideGroup:true  multiView:true , multiViewOutWidth:"300" });
  
  
• 除此以外还有一种调用方法，即在头部添加以下Javascript代码：
  
  $(document).ready(function(){  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:false, barBgcolor:"#6699ff" , hideGroup:true ，multiView:true , multiViewOutWidth:"300"});});
  
  如果出于效率考虑，建议使用第一种方法，如果出于代码工整和维护方便考虑，建议使用上面这种。
  
  
  
• 在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

  
  
  

• 在页面中使用GridView控件，并设置其CssClass（任意，不和其他css标签重复即可），假设为gvCSS
• 在页面顶部引用JQuery框架，假设为query-latest.js ( <script language="JavaScript" type="text/javascript" src="/Content/jGridViewBar/jquery-latest.js"></script>)
• 接下去引用jGridViewBar插件，假设为jquery.gridviewbar-pack-1.2.0.0.js（<script language="javascript" type="text/javascript" src="/Content/jGridViewBar/jquery.gridviewbar-pack-1.2.0.0.js"></script>）
• 框架部署至此已经完成，接下去在GridView控件代码后面加上引用代码：
  
  <script language="javascript" type="text/javascript">
  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true ，multiView:true , multiViewOutWidth:"300" });
  </script>
  
  rebulidRowBar(tableCSS , attr) 的参数设置定义如下：
  tableCSS：Table的CSS样式（即GridView的CssClass），字符串型
  attr：参数设置，Hash型，其中包含了以下参数：
  headShowed：是否显示了GridView的Head ，布尔型
  footShowed：是否显示了GridView的Foot ，布尔型
  checkColum：需要归类的列（从0开始计） ，整数型
  hideCheckColum：是否需要隐藏归类列，布尔型
  barBgcolor：归总栏目的背景色 ，字符串型，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示
  hideGroup：是否可受起（隐藏）栏目，布尔型
  multiView: 是否启用分页(MultiView)效果，布尔型
  以下参数在 multiView为 true 时才有用：
  multiViewOutWidth: 采用分页效果后，表格的总宽度（出于美观考虑，提供此参数），字符串型。可设定像素（整数）或百分比数等，所有width属性支持的参数
  
  示例解析：由于下面“盟友列表”示例中：
  CSS标记为gvCSS ，所以tableCSS设为“GvCSS”；
  显示了Head，但是没有显示Foot,所以 headShowed  和 footShowed 两项分别是true和false；
  用于归类的列为“类型”，在第2列，由于从0开始计，所以checkColum为1；
  我们让归类列“类型”隐藏了，所以 hideCheckColum  为true；
  背景色我们将其设为这种颜色，所以barBgcolor为"#6699ff"；
  栏目我们允许他隐藏（像QQ那样），所以hideGroup为true；
  我们让他显示了MulitView（分页）效果，所以multiView为true；因为我们开启了MultiView效果，所以下面的multiViewOutWidth设置将会生效。
  同时我们指定的分页后总区域的宽度为300像素(300px)，所以multiViewOutWidth为"300"（此处注意需要是用引号。设置为“300px”也可以）。
  
  由此我们可以得到attr的参数： { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true ， multiView:true , outWidth:"300"}
  注意：必须是这样的格式：{参数名称:参数值 , 参数名称:参数值 ,...}顺序可以任意！
  
  因此最终调用代码为：rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true  multiView:true , multiViewOutWidth:"300" });
  
  
  
• 除此以外还有一种调用方法，即在头部添加以下Javascript代码：
  
  $(document).ready(function(){  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true ，multiView:true , multiViewOutWidth:"300"});});
  
  如果出于效率考虑，建议使用第一种方法，如果出于代码工整和维护方便考虑，建议使用上面这种。

• 在页面中使用GridView控件，并设置其CssClass（任意，不和其他css标签重复即可），假设为gvCSS
• 在页面顶部引用JQuery框架，假设为query-latest.js ( <script language="JavaScript" type="text/javascript" src="/js/jquery-latest.js"></script>)
• 接下去引用jGridViewBar插件，假设为jquery.gridviewbar-pack-1.2.0.0.js（<script language="javascript" type="text/javascript" src="/js/jquery.gridviewbar-pack-1.2.0.0.js"></script>）
• 框架部署至此已经完成，接下去在GridView控件代码后面加上引用代码：
  
  <script language="javascript" type="text/javascript">
  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true });
  </script>
  
  rebulidRowBar(tableCSS , attr) 的参数设置定义如下：
  tableCSS：Table的CSS样式（即GridView的CssClass），字符串型
  attr：参数设置，Hash型，其中包含了以下参数：
  headShowed：是否显示了GridView的Head ，布尔型
  footShowed：是否显示了GridView的Foot ，布尔型
  checkColum：需要归类的列（从0开始计） ，整数型
  hideCheckColum：是否需要隐藏归类列，布尔型
  barBgcolor：归总栏目的背景色 ，字符串型，可以使用十六进制“#6699ff”格式，或者“red”,“blue”等英文表示
  hideGroup：是否可受起（隐藏）栏目，布尔型
  
  
  
  由于下面“盟友列表”示例中：
  CSS标记为gvCSS ，所以tableCSS设为“GvCSS”；
  显示了Head，但是没有显示Foot,所以 headShowed  和 footShowed 两项分别是true和false；
  用于归类的列为“类型”，在第2列，由于从0开始计，所以checkColum为1；
  我们让归类列“类型”隐藏了，所以 hideCheckColum  为true；
  背景色我们将其设为这种颜色，所以barBgcolor为"#6699ff"；
  栏目我们允许他隐藏（像QQ那样），所以hideGroup为true。
  由此我们可以得到attr的参数： { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true }
  注意：必须是这样的格式：{参数名称:参数值 , 参数名称:参数值 ,...}顺序可以任意！
  
  因此最终调用代码为：rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true });
  
  
  
• 除此以外还有一种调用方法，即在头部添加以下Javascript代码：
  
  $(document).ready(function(){  rebulidRowBar( "gvCSS", { headShowed:true , footShowed:false , checkColum:1 , hideCheckColum:true, barBgcolor:"#6699ff" , hideGroup:true });});
  
  如果出于效率考虑，建议使用第一种方法，如果出于代码工整和维护方便考虑，建议使用上面这种。

1. 在页面中使用GridView控件，并设置其CssClass（任意，不和其他css标签重复即可），假设为gvCSS
2. 在页面顶部引用JQuery框架，假设为query-latest.js ( <script language="JavaScript" type="text/javascript" src="/Content/jGridViewBar/jquery-latest.js"></script>)
3. 接下去引用jGridViewBar插件，假设为jquery.gridviewbar-pack-1.0.0.0.js（<script language="javascript" type="text/javascript" src="/Content/jGridViewBar/jquery.gridviewbar-pack-1.0.0.0.js"></script>）
4. 框架部署至此已经完成，接下去在GridView控件代码后面加上引用代码：
   
   <script language="javascript" type="text/javascript">rebulidRowBar(true,false,1,"gvCSS "); </script>
    
   rebulidRowBar(headShowed , footShowed , checkColum ,  tableCSS) 的参数设置定义如下：
   headShowed：是否显示了GridView的Head ，布尔型
   footShowed：是否显示了GridView的Foot ，布尔型
   checkColum：需要归类的列（从0开始计） ，整数型
   tableCSS：Table的CSS样式（即GridView的CssClass），字符串型
5. 由于下面“盟友列表”示例中，显示了Head，但是没有显示Foot,所以 headShowed  和 footShowed 两项分别是true和false 。用于归类的列为“类型”，在第2列，由于从0开始计，所以为1，CSS标记为gvCSS ，因此最终调用代码为：rebulidRowBar(true,false,1,"gvCSS ");
6. 除此以外还有一种调用方法，即在头部添加以下Javascript代码：
   
   $(document).ready(function(){  rebulidRowBar(true,false,1,"GvCSS"); });
   
   如果出于效率考虑，建议使用第一种方法，如果出于代码工整和维护方便考虑，建议使用上面这种。

注：
·指定的排序列必须是含有之Label标签的列（即生成HTML网页后，为<span>标签环绕）。如果确实需要，这个地方将在以后的版本中提供更多的灵活性.
·如果不是GridView控件，只是静态的Table，只要符合GridView生成后的格式，同样可以使用本插件！