zoukankan      html  css  js  c++  java
  • 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. function versionMan(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 = new Array();
    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. function set_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 class="pGroup" style="float:right"><input type="button" onclick="updateS
    4. tate(\''+id+'\')" class="button" 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. function updateState(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,这个工作我往后有时间了再整理吧,其他的将在后续文章中完成,感谢各位的支持。

  • 相关阅读:
    【支付宝支付】手机网页内 支付宝支付实现过程
    【微信支付】微信端的手机网页支付 开发流程
    【Linux】Linux下 环境变量/etc/profile、/etc/bashrc、~/.bashrc的区别【转】
    SLF4J 和 Logback 在 Maven 项目中的使用方法
    打造Spring Cloud构建微服务架构的最全资料
    WebApi安全性 使用TOKEN+签名验证
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的意义
    request.getParameter(“参数名”) 中文乱码解决方法
    Mysql的timestamp类型,自动记录数据的更新时间
    根据身份证号,取得行政区划的Javascript实现
  • 原文地址:https://www.cnblogs.com/luluping/p/1567356.html
Copyright © 2011-2022 走看看