struts2+spring+hibernate+json+jquery+flexigrid开发笔记-flexigrid改造

  好长时间都没有写博客了,今天终于把项目搞的差不多了,抽点时间来把我的笔记写完吧

  在使用flexigrid的时间,大家都可能会遇到一个相同的问题:flexigrid的初始化实在有点麻烦,而且代码感觉有些杂乱.花了一天的时间,对其进行了改造,使得fexigrid可以像使用dhtmlxgrid一样的进行初始化,减少了代码的传输量.下面是改造后的flexigrid初始化代码

 

<script type="text/javascript">
  $(document).ready(function(){
  var a=new creater("grid","Listclient.action","post","json","id","desc","true","客户信息","true","902","200");

//这里传送一些初始化信息

  a.setHeadName("选择","客户姓名","客户地址","客户电话","客户性别","身份证号","手机号","创建时间");

//定义表头
  a.setName("select","clientName","clientAddr","clientHtel","clientSex","clientCertificate","clientTel","createTime");

//定义表头name值
  a.setWidth("30","180","180","100","100","100","100","100");

//定义表格宽度
  a.setSortable(true,true,false,false,false,false,false,false);

//是否排序

  a.setShowable(false,false,false,false,false,false,false,false);

//是否显示
  a.setAlign("center","center","center","center","center","center","center","center");

//对齐方式
  a.setButtonName("查看","增加","删除","修改");

//安钮
  a.setBclass("userBt","userBt","userBt","userBt");
  a.setOnpress("operate","operate","operate","operate")

//安钮点击后打开的页面
  a.setAdd("clientadd.jsp","600","400");
  a.setUpdate("clientupdate.jsp","600","400");
  a.setDetail("clientdetail.jsp","600","400");
  a.showtable();//创建表格
        });
  </script>

 

下面是改造后的js处理

  /**改造的flexigrid的构造方式
     */
     //这些数组主要用来存入colModel里面的数据
     var headName=new Array();//用于存放表头信息
  var name=new Array();//用于存放表头的字段名
  var width=new Array();//用于存放表头的宽度
  var showable=new Array();//用于存放是否显示字段信息
  var sortable=new Array();//用于存放表头是否排序
  var align=new Array();//用来存放是对齐方式
  var buttonName=new Array();//用来存放安钮的名字
  var bclass=new Array();//用来存放安钮的样式
  var onpress=new Array();//用来存入安钮事件的名字
  var table="[";
  var button="[";
 var addwd;
  var addul;
  var addht;
  var updateul;
  var updateht;
  var updatewd;
  var findul;
  var findwd;
  var findht;
  var tab;
function creater(div,url,method,dataType,sortName,sortorder,usepager,title,useRp,width,height){
   this.div=div;
   tab=div;
   this.url=url;
   this.method=method;
   this.dataType=dataType;
   this.sortName=sortName;
   this.sortorder=sortorder;
   this.usepager=usepager;
   this.title=title;
   this.useRp=useRp; 
   this.height=height; //default height
    this.width=width;
}
creater.prototype.setHeadName=function(){//取得表头的名字
 for(var i=0;i<arguments.length;i++){
  headName[i]=arguments[i]
 }
 }
creater.prototype.setName=function(){//取得字段名
 for(var i=0;i<arguments.length;i++){
  name[i]=arguments[i]
 }
}
creater.prototype.setWidth=function(){//取得宽度
 for(var i=0;i<arguments.length;i++){
  width[i]=arguments[i]
 }
}
creater.prototype.setSortable=function(){//是否排序
 for(var i=0;i<arguments.length;i++){
  sortable[i]=arguments[i]
 }
}
creater.prototype.setShowable=function(){//是否显示
 for(var i=0;i<arguments.length;i++){
  showable[i]=arguments[i]
 }
}
creater.prototype.setAlign=function(){//取得对齐方式
 for(var i=0;i<arguments.length;i++){
  align[i]=arguments[i]
 }
}
creater.prototype.setButtonName=function(){//取得安钮的名字
 for(var i=0;i<arguments.length;i++){
  buttonName[i]=arguments[i]
 }
}
creater.prototype.setBclass=function(){//取得安钮的样式
 for(var i=0;i<arguments.length;i++){
  bclass[i]=arguments[i]
 }
}
creater.prototype.setOnpress=function(){//取得安钮对应的样式
 for(var i=0;i<arguments.length;i++){
  onpress[i]=arguments[i]
 }
}
creater.prototype.setAdd=function(url,width,height){//打开一个增加的新窗口
       addul=url;
     addwd=width;
     addht=height;
}
creater.prototype.setUpdate=function(url,width,height){//打开一个修改窗口
              updateul=url;
     updatewd=width;
     updateht=height;
}
creater.prototype.setDetail=function(url,width,height){//打开一个新窗口
              findul=url;
     findwd=width;
     findht=height;
}
creater.prototype.showtable=function(){//根据上面的信息创建表格
 if(headName.length==name.length&&width.length==align.length&&name.length==showable.length&&name.length==align.length){
  for(var i=0;i<headName.length;i++){

      if(i==headName.length-1){
                   table+="{display: '"+headName[i]+"', name: '"+name[i]+"', width:'"+ width[i]+"', sortable:"+sortable[i]+" , align:'"+ align[i]+"',hide:"+showable[i]+"}";
      }else{
    table+="{display: '"+headName[i]+"', name: '"+name[i]+"', width:'"+ width[i]+"', sortable:"+showable[i]+" , align:'"+ align[i]+"',hide:"+showable[i]+"},";
      }
     
    }
    table+="]";
  if(buttonName.length!=0&&buttonName.length==bclass.length&&bclass.length==onpress.length){
     for(var i=0;i<buttonName.length;i++){
     button+="{name: '"+buttonName[i]+"', bclass:'"+bclass[i]+"', onpress :"+ onpress[i]+"},"; 
  }
  button+="{separator: true}]" ;
  
  }
$("#"+this.div).flexigrid({
 url:this.url,
 width:this.width,
 height:this.height,
 dataType: this.dataType,
 colModel : eval(table),
 sortname: eval(this.sortname),
    sortorder: this.sortorder,
    usepager: eval(this.usepager),
 buttons:eval(button),
 title:this.title,
 useRp:eval(this.useRp),
 rp: 10,
 showTableToggleBtn: true,
 procmsg: '正在加载数据,请稍等...'

 });
 }else{
  alert("表格定义有误,请检查");
 }
}

 

 

//下面的处理方法可根据自己的业务需求重新定义
function operate(com,grid) //安钮事件
            {   
             if(com=='删除'){
             if(selectTrAll()<=0){
             alert("请选择你要删除的数据");
             return;
             }
             if(selectTrAll()>0){
            if(confirm("你真的要删除"+selectTrAll()+"条记录吗?")){
            //alert(getAllid());
            var datastr;
            datastr="delId="+getAllid();
         $.ajax({url:document.getElementById("delurl").value,
            type:'post',
            data:datastr,
            dataType:'json',
            timeout:1000,
            error:function(data) {
            alert(data.message);
            },
            success:function(data) {
                 alert("删除成功");
               $("#"+tab).flexReload();//刷新表格
 }
 })
             }
             }
             }
   if(com=="增加"){
          showadd();//
           return;
           }
     if(com=="修改"){
            if(selectTrAll()<=0){
            alert("请选择要修改的数据");
            return;
            }
           if(selectTrAll()>1){
           alert("修改只能选择一条数据,请重新选择");
              return;
           }
            updateopen();
            }          
   }
function showadd(){//打开一个新窗口
  $.funkyUI({
   url:addul,
   OKEvent:okEvent,
   css:{width:addwd,height:addht}
  });
 }
 function updateopen(){//打开一个新窗口
  $.funkyUI({
   url:updateul,
   OKEvent:okEvent,
   css:{width:updatewd,height:updateht}
  });
  }
  
  function detailopen(){//打开一个新窗口
  $.funkyUI({
   url:findul,
   OKEvent:okEvent,
   css:{width:findwd,height:findht}
  });
 }
  
  
  
  function updateInput(){//打开一个新窗口
        var datastr;
      
            if(document.getElementById("beanName").value!=""){
            datastr=document.getElementById("beanName").value+".ufId="+getpId();
            }else{
            datastr="ufId="+getpId();
            }
            // alert(datastr);
       $.ajax({
      url:document.getElementById("updateurl").value,
            type:'post',
            data:datastr,
            dataType:'json',
            timeout:1000,
            error:function(data) {
            alert(data.message);
            },
            success:function(data) {
            /**
            这一段代码可以得到子窗口的window对象
          
            var win=document.getElementsByTagName("iframe")[0].id;
             alert(win);
             var inp=window.frames[win].document.getElementById("form");
             //var inp=$(window.frames[win].document).find(":input");
             alert(inp[0].id);
             */
             //这里要求后台传来的数据顺序和前台rform表单对应,不然会出错.
          var inp=document.getElementById("form");
          for(var i=0;i<inp.length-2;i++){
          inp[i].value=data.updateData[i];
          if(inp[i].id=="unit"){
          doOrgChg(inp[i]);
          }
          if(inp[i].id=="org"){
          if(data.updateData[i]!=0){
             doOreEmp(inp[i]);
          }
          }
 }
 }
 });
 }
 
 function detail(){
  var datastr;
       // alert(document.getElementById("detailurl").value);
            if(document.getElementById("beanName").value!=""){
            datastr=document.getElementById("beanName").value+".ufId="+getpId();
            }else{
            datastr="ufId="+getpId();
            }
       $.ajax({
      url:document.getElementById("detailurl").value,
            type:'post',
            data:datastr,
            dataType:'json',
            timeout:1000,
            error:function(data) {
            alert(data.message);
            },
            success:function(data) {
            /**
            这一段代码可以得到子窗口的window对象
          
            var win=document.getElementsByTagName("iframe")[0].id;
             alert(win);
             var inp=window.frames[win].document.getElementById("form");
             //var inp=$(window.frames[win].document).find(":input");
             alert(inp[0].id);
             */
             var tab=document.getElementsByTagName("table");
             //alert(tab[0].rows.length);
             var row=tab[0].rows;
            // alert(row.item(0).cells.length);
             var jj=0
           for(var i=0;i<row.length;i++){
               var cell=row.item(i).cells;
               for(var j=1;j<cell.length;j+=2){
                   if(data.updateData[jj]!=undefined&&data.updateData[jj]!="undefined"){
                   cell[j].innerText=data.updateData[jj];
                   }
                   jj++;
               }
               }
          }
 });
 
 
 }
 
 
 
 //checkbox的选中与取消事件
 function selectTr(e){
  var clazz=document.getElementById("row"+e);
  if(document.getElementById(e).checked!=true){
  clazz.className="";
  }else{
  clazz.className="trSelected"; 
  }   
 }
 
  //得到选中行的某列数据
 function selectTrtext(cell){
        return $('.trSelected',grid)[0].cells[cell].innerText;
 }
 function selectTrAll(){
 return $('.trSelected',grid).length;
 }
 function getId(){
 
 return $('.trSelected',grid)[0].id.substring(3);
 }
 function getpId(){
 return $(window.parent.document).find('.trSelected',$('gird', window.parent.document)
)[0].id.substring(3);;
 }
 function getAllid(){
          var idstr="";
          var allTr=$('.trSelected',grid);
          for(var i=0;i<allTr.length;i++){
          idstr+=allTr[i].id.substring(3)+",";
                  }
                  return idstr;
}
function getFormAndFormWrite(form,data){
          var form=document.getElementById(form);
          /**这一段可用来遍列整个json对象里面的元素,现在用不上了,不删除留等
          var data=new Array();
          var j_ii=0;
           for (var one in data)
        {
        for(var key in data[one])
        {
            data[j_ii]=data[one][key];
            alert(data[j_ii]);
            j_ii++;
        }
    }
    */
          for(var i=0;i<form.length-btcount;i++){
          form[i].value=date[i];
          } 
}

 

通过这样改造后,可以减少flexigerid初始化的代码,而且简单明了.如果有看不董的地方请留言.另外说是且点,我在很多网站转载了我写的文章,麻烦转载时请注明作者.邓长松