• [原创][提供开源下载] jGridViewBar插件 官方发布


    插件名称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 , attrmultiView) 的参数设置定义如下表(使用实例及效果按照下面的示例进行举例分析):
      参数 类型 说明 使用实例 效果
      tableCSS 字符串型 Table的CSS样式(即GridView的CssClass) "gvCSS" 指定了GridView(Table)的CssClass(Css)为gvCSS
      attr Hash型 分组常规参数设置 {参数名:参数值 , 参数名:参数值 , ...} 显示分组效果
      multiView Hash型 MultiView(分页)效果参数设置 同上 显示上部标签
      attrmultiView是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

    转载请注明出处和作者,谢谢!
    作者:JeffreySu / QQ:498977166
    博客:http://szw.cnblogs.com/

    Senparc官方教程《微信开发深度解析:微信公众号、小程序高效开发秘籍》,耗时2年精心打造的微信开发权威教程,点击这里,购买正版
    
微信开发深度解析:微信公众号、小程序高效开发秘籍

    Senparc 官方微信开发视频教程:《微信公众号+小程序快速开发》,点击这里点击观看
    Senparc 官方微信开发视频教程:《微信公众号+小程序快速开发》
  • 相关阅读:
    如何快速定位到DBGrid的某一行!!!急...
    说说设计模式~单件模式(Singleton)
    EF架构~终于自己架构了一个相对完整的EF方案
    .Net——实现IConfigurationSectionHandler接口定义处理程序处理自定义节点
    在LINQ中实现多条件联合主键LEFT JOIN
    从LINQ开始之LINQ to Objects(上)
    WPF控件模板和数据模板
    WPF的ListView控件自定义布局用法实例
    初步探讨WPF的ListView控件(涉及模板、查找子控件)
    LINQ技巧:如何通过多次调用GroupBy实现分组嵌套
  • 原文地址:https://www.cnblogs.com/szw/p/1002975.html
Copyright © 2020-2023  润新知