思享工具箱

玩转jquery插件之flexigrid 【转】

摘要：
我使用了两个著名的插件：*可伸缩的列*可调整的高度*可按标题排序*酷的外观*可以转换公共表*可以连接到ajax数据源（仅以xml格式）*分页功能*显示/隐藏列*为外部访问提供API*更多。。。谷歌集团简介：Kevin Kietel的php版本：

http://blog.csdn.net/anshao/archive/2009/08/12/4435167.aspx

用插件来做规律性很强的数据展现是个不错的选择，jquery插件家族中这类插件通常叫做table或者grid，本人用过两个有名的插件:jqgrid和flexgrid，自己也曾经在使用jquery之前尝试过自己写grid插件，这篇文章将就flexgrid插件的使用和改造展开。
非常囧的是flexgrid的homepage居然无法访问了，不过没关系，Google group上已经有了相关的讨论，且非常活跃，访问地址为：http://groups.google.com/group/flexigrid?hl=en

  • 1.flexigrid特性介绍

    来看看jquery官网有关该插件的介绍官网列举的Features：
    * 列可伸缩
    * 高度可调整
    * 可按照表头排序
    * 很酷的外观风格
    * 能够转换一个普通的表格
    * 可以连接到一个ajax方式的数据源（仅是xml格式）
    * 分页功能
    * 显示/隐藏 列
    * 提供可供外部访问的API
    * 更多更多…
    Google group 上的介绍：轻量级但功能丰富的data grid插件，支持列伸缩和排序功能，可采用ajax的方式连接到一个xml的数据源来获取所需数据，和Ext Grid非常相似，但它是纯jquery的，这使得它更加小巧，并遵循jquery插件一贯的少量配置特性

  • 2.怎样获取flexigrid？

    既然官网已经无法访问，那就去其他途经吧，在上面提到的jquery站点和Google group站点都可以找到下载链接，如果仍然无法搞定，那么pm我吧：）
    3.我想观看一下Demo先
    嗯，不错的习惯，毕竟同类插件已经挺多的了，也不乏jqgrid这样的强悍者，还是货比三家先吧。Google group上提供的各个后台语言版本的Demo：
    php 版本的 by Kevin Kietel: http://sanderkorvemaker.nl/test/flexigrid/
    CodeIgniter 版本的 by Armorfist: http://flexigrid.eyeviewdesign.com/
    ASP 版本的 by Synergiq: http://jamesowers.co.uk/asp-tutorials/57/flexigrid-with-asp/
    Ruby on Rails 版本的 by Nick Fessel: http://www.nickfessel.com/index.php?post=17

  • 4.使用步骤：

    a.下载jquery.js（最新1.2.6版本）和flexigrid.js（jquery官网上提供的较旧，而官网又无法访问，我自己用的是$Date: 2008-07-14 00:09:43 +0800 (Tue, 14 Jul 2008) $版本的），并在需要使用的页面顺序引入，（还需要引入相关的样式文件和图片文件）。
    b.安装过程。首先在需要使用的DOM标签中加入代码：

    1. <tableid="yourgrid_id"></table>

    在onload事件或者jquery的$(function(){…})方法中加入下列初始化代码：

    1. $("#top_ten").flexigrid({
    2.  url: "getData.php",
    3.  dataType: 'xml',
    4.  colModel : [{display: '编号', name : 'id', width : 65, sortable : true, align: 'center'},
    5.  {display: '内容提要', name : 'summary', width : 180, sortable : true, align: 'left'},
    6.  {display: '内容类别', name : 'contentType', width : 60, sortable : true, align: 'left'},
    7.  {display: '字段名', name : 'arriveRate', width : 90, sortable : true, align: 'left'},
    8.  {display: '字段名', name : 'hitRate', width : 90, sortable : true, align: 'left'},
    9.  {display: '字段名', name : 'fitRate', width : 90, sortable : true, align: 'left'}],
    10.  sortname: "pushCount",sortorder: "desc",usepager: false,title: '表头名称',
    11.  useRp: false,rp: 10,showTableToggleBtn: true,width: 650,height: 270
    12.  });
  • 5.上面这样做之后，前端就部署完毕了，但参数极其取值需要说明一下，完整的参数及说明如下（当前值为默认值）：

    height: 200, //flexigrid插件的高度，单位为px
    ‘auto’, //宽度值，auto表示根据每列的宽度自动计算
    striped: true, //是否显示斑纹效果，默认是奇偶交互的形式
    novstripe: false,
    min 30, //列的最小宽度
    minheight: 80, //列的最小高度
    resizable: true, //是否可伸缩
    url: false, //ajax方式对应的url地址
    method: ‘POST’, // 数据发送方式
    dataType: ‘xml’, // 数据加载的类型
    errormsg: ‘Connection Error’,//错误提升信息
    usepager: false, //是否分页
    nowrap: true, //是否不换行
    page: 1, //默认当前页
    total: 1, //总页面数
    useRp: true, //是否可以动态设置每页显示的结果数
    rp: 15, // 每页默认的结果数
    rpOptions: [10,15,20,25,40],//可选择设定的每页结果数
    title: false,//是否包含标题
    pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式
    procmsg: ‘Processing, please wait …’,//正在处理的提示信息
    query: ”,//搜索查询的条件
    qtype: ”,//搜索查询的类别
    nomsg: ‘No items’,//无结果的提示信息
    minColToggle: 1, //minimum allowed column to be hidden
    showToggleBtn: true, //show or hide column toggle popup
    hideOnSubmit: true,//隐藏提交
    autoload: true,//自动加载
    blockOpacity: 0.5,//透明度设置
    onToggleCol: false,//当在行之间转换时
    onChangeSort: false,//当改变排序时
    onSuccess: false,//成功后执行
    onSubmit: false // 调用自定义的计算函数

6.处理数据的后台脚本
flexigrid需要数据支持，其数据是通过ajax方式传送到客户端来进行处理的，格式为xml，在作者给定的demo中包含了一个php格式的处理脚本post.php，其中包含了数据库的操作，在此需要进行相应的修改。
另外，需要注意，提供的数据个数和格式需要和4中指定的列数对应上。当然，这里的数据是会被解析成html内容，也就是说，你可以向客户端传送光秃秃的数据，也可以稍微“包装”一下，比如：数据或者：
甚至是图片什么的，总之可以自定义，加点JavaScript事件也无妨，反正jquery特别适合做这样的处理。这就为后续处理埋下了伏笔，这些内容将在后面讲到，要不然对不起标题中的“玩转”二字。

到这里，基本的用法算是完成了，一些个性化的设置和处理可以在读懂代码和配置项之后施行，也可以看看源码，结构挺不错的，注意几个扩展事件如reload，还有，计算的入口方法populate，可以进行相应的修改，简化很多繁琐的时间，不过要谨慎。

之前写到：玩转jquery插件之flexigrid（一）如何获取并使用flexigrid？挺受欢迎，后来倒是一直有在从事flexigrid的应用，但的确有些忙，一些整理和保密（一些应用中涉及机密的内容要去掉）工作也感觉会挺繁琐，只好慢慢来吧。
谈到改造，先说一下我们一般都会有哪些比较典型的应用吧，比如在数据上的点击增加点事件，比如加一个筛选记录的操作入口，比如编辑某条记录等等，这些至少是我工作中实实在在的需求。那么在这里，限于篇幅和个人精力，我们做三个方面的改造。
a).增加按钮事件
b).显示某个时间区间内的数据，且可以选择时间区间
c).根据输入的条件筛选数据

对于需求a，我们对按钮事件的期望当然是去完成某项操作，在这里讨论的是和服务端有交互的事件，在flexigrid的一些高级例子中，给出了“增加”和“删除”按钮，但未给出交互示例，其实作者意图也是告诉我们该增加怎样的按钮，按钮放在哪里，按钮该干什么事情等等，都是可以让我们自定义的。如对于“增加”和“删除”按钮事件，我们可以这里来处理：
首先在flexigrid的定义中增加这样的设置，

  1. buttons : [
  2.                 {name: '添加版本', bclass: 'add', onpress : versionMan},
  3.                 {name: '删除版本', bclass: 'delete', onpress : versionMan},
  4.                 {separator: true}
  5. ],

表示要给flexigrid增加两个按钮，名为“增加”和“删除”，分别用“add”和“delete”的class来修饰，且都调用了一个名为versionMan的函数，并且按钮直接启用了分隔符。
至于versionMan函数，完全可以自定义要做的事情。如在示例中我这样进行了定义（主要是看看结构，可以根据自己的需求进行更改）：

  1. functionversionMan(com,grid){
  2.         if(com == "添加版本"){
  3.             type = "insert";
  4.             //mask(); 给弹出的div加入遮罩效果
  5.             //_initVal();初始化弹出div的函数调用，这里均可自定义
  6.             $("#edit_versionDiv").css("top",(document.documentElement.scrollTop+260)+"px").show();
  7.         }
  8.         else if(com == "删除版本"){
  9.             if($('.trSelected',grid).length==0){
  10.                 alert("请先选中要删除的版本");return false;
  11.             }
  12.             if(confirm('删除 ' + $('.trSelected',grid).length + ' 版本?')){
  13.                 var versionArr=$(".trSelected td:eq(2) div:first-child",grid);
  14.                 var versionStr = newArray();
  15.                 for(var i=0; i<versionArr.length;i++){
  16.                     versionStr.push($(versionArr[i]).text());
  17.                 }
  18.                 $.ajax({
  19.                     type: "POST",
  20.                     url:  "del_version.php",
  21.                     data: "ids="+versionStr.join(","),
  22.                     success: function(msg){
  23.                         if(msg=="success"){
  24.                             $("#version_man").flexReload({});
  25.                         }
  26.                         else alert("有错误发生");
  27.                     },
  28.                     error: function(msg){
  29.                         alert(msg);
  30.                     }
  31.                 });
  32.             }
  33.         }
  34.     };

上面的示例中需要注意的是：使用ajax方法调用一个php脚本并传入参数，从而执行了需要的操作，php脚本的写法并没有什么不同，就像普通的处理即可，然后$(”#version_man”).flexReload({});这里表示重新调用了flexigrid控件。
除了上面这种通过定义的接口增加按钮和事件的方式，我们还可以采用完全自定义的方式来达到同样的效果，如可以这样来进行：

  1. functionset_exeBtn(id){
  2.     if($("#"+id).parent().siblings(".pDiv").children(".pDiv2").children("div:last").contents("input").length == 0){
  3.         var str = '<div class="btnseparator"></div><div style="float:right"><input type="button" onclick="updateS
  4. tate(\''+id+'\')" value="执行" /></div>';
  5.         $("#"+id).parent().siblings(".pDiv").children(".pDiv2").append(str);
  6.     }
  7. };

然后在flexigrid初始化参数中设置：onSuccess:function(){set_exeBtn(”gridtable”);}，这表示flexigrid加载完成后执行set_exeBtn函数，该函数向flexigrid的右下角加入了一个名为“执行”的按钮，并且为该按钮定义了事件updateState，该事件的定义如下：

  1. functionupdateState(id){
  2. //最后
  3.         $("#"+id+" tr td:last-child div:first-child").each(function(){
  4.             var op = $(this).text();
  5.             if(op == "无操作")return;
  6.             else{
  7.                 var ids = $(this).parents("tr:first").children("td:first").children("div:first").text();//假定第一行的值为记录的id
  8.                 var newStateVal = $("span:first",this).attr('lang');
  9.                 $.ajax({
  10.                     url:"update_msgState.php",
  11.                     type:"POST",
  12.                     dataType:"text/html",
  13.                     data:"ids="+ids+"&ps="+newStateVal,
  14.                     success:function(data){
  15.                         if(data == "success"){
  16.                             //reloadGrids(id); 自定义执行成功后的函数调用，可以重新调用flexigrid或者做其他操作
  17.                         }
  18.                         else{
  19.                             alert("执行过程遇到错误");
  20.                         }
  21.                     },
  22.                     error:function(msg){
  23.                         alert(msg);
  24.                     }
  25.                 });
  26.             }
  27.         });
  28.     };

该事件的简要说明：该事件检查flexigrid的最后一列的值，如果不等于无操作，将以ajax的方式执行update_msgState.php程序，该程序主要用于更新flexigrid中的记录项的状态字段值，和一般程序也没什么两样，执行成功会输出success，在这里必须提及我对flexigrid.js文件的两处改动：

  1. //大概1421行
  2.     $.fn.flexReload = function(p) {// function to reload grid
  3.         return this.each(function(){
  4.                 if (this.grid&&this.p.url){
  5.                     //roby added 2 lines  针对url参数和onSuccess被自定义后却并没有起作用，自行设置的，其他项如果也是如此，可以采用此种方法
  6.                     if(p.url!=undefined) this.p.url=p.url;
  7.                     if(p.onSuccess!=undefined) this.p.onSuccess=p.onSuccess;
  8.                     if(p.sortname!=undefined){this.p.sortname=p.sortname;this.p.sortorder=p.sortorder;} this.grid.populate();}
  9.             });            
  10.     }; //end flexReload
  11.  
  12. //大概389行
  13.     if (p.total==0)
  14.     {
  15.                     $('tr, a, td, div',t).unbind();
  16.                     $(t).empty();
  17.                     p.pages = 1;
  18.                     p.page = 1;
  19.                     this.buildpager();
  20.                     $('.pPageStat',this.pDiv).html(p.nomsg);
  21.                     //roby added 1 line 这里主要是为了使onSuccess在即便flexigrid初始化调用获得的数据为空时仍然会执行（默认不执行，至于应不应该这么做，还是看具体需求吧，我在后面的例子中会用到）
  22.                     if (p.onSuccess)p.onSuccess();
  23.                     return false;
  24.     }

写到这里，发现篇幅已经很长，而且在方式上我想最好是给出一些在线的demo，这个工作我往后有时间了再整理吧，其他的将在后续文章中完成。

标签：#true#数据#:#版本#插件 | 浏览：132 | 发布日期：

免责声明：文章转载自《玩转jquery插件之flexigrid 【转】》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇公有链、私有链和联盟链Java 生成指定时间范围的随机时间、随机中文姓名、随机字符姓名、随机数下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

编译caffe的诸多注意事项

1.cudnn版本不匹配 首先第一步，编译caffe_train-master就遇到了问题： 　　但是在同样的环境下(CUDA8.0  +  cudnn-8.0-linux-x64-v6.0)编译官方的caffe-master 就正常通过了： 　　很显然就是cudnn版本的问题了，但是不巧的是NVIDIA官网在维护，无法下载cudnn5；从同学那里拷贝...

vue+element-ui el-table表格(含表头)内容溢出省略，鼠标悬浮提示

第一种:参考：https://my.oschina.net/u/3455362/blog/4674804 <template> <div class="test"> <el-table :data="gridData" border stripe style=" 100%"> &...

JavaScript向XML文档存储，读取和修改数据

基础知识１、var fso=new ActiveXObject("Scripting.FileSystemObject");创建一个可以操作系统文件的ActiveXObject对像的实例。２、file=fso.GetFile("C:\\test.xml");　　用ActiveXObject对像访问系统文件，可以用来检查文件是否存在。３、file=fso.C...

（1.5）es集群部署运维【最佳实践】

 【1】安装启动ES 集群 （1.1）集群架构规划 OS　　 ES version Ip node.name Role cluster.name es basedir CentOS Linux release 7.8.2003 (Core) elasticsearch-7.14.1 192.168.175.132:9200 cluster：192...

Android studio插件安装

Android Studio安装插件的方式其实和Eclipse大同小异。废话不多说，直接上图： 区域1：你当前已经安装了的插件 区域2：在线安装 区域3：从硬盘安装，即针对你已经下载好了的插件，可通过这项选择到你下好的插件，进行安装。 还有一个Install JetBrains plugin其实和区域2是一样的，只是这边将JetBrains类型的插件放一...

在windows 7使用BCDEdit.exe修改启动菜单项

　　最近重装了系统，电脑型号：Thinkpad R400 2784A74。原本想换个windows Server 2003的，可是没有与之对应的驱动程序，于是又换成windows 7 ultimate，考虑到之前使用的XP系统可能还会用到，于是想到做个双系统。 　　安装windows7的步骤简单说下：使用虚拟光驱+光盘镜像进行安装，过程是漫长的。此处略去1...

最新文章

随机推荐

思享工具箱导航