flexigrid--一个好用的控件

flexigrid控件是一种较于ext来说轻量级的但却比较实用的实用于表格的全面强化，也是一种强大的表格表现形式。

$(function() {
   $("#flex").flexigrid({
    url : ‘',
       dataType : 'json',
       colModel : [{
           display : '编号',
           name : 'truck_no',
           width : 100,// 得加上 要不IE报错
           sortable : true,
           align : 'center'
       
           ],
         buttons : [ 
   {name :'选定',bclass:'delete',onpress:action},
   {separator : true} 
],
       searchitems : [{
           display : '车辆编号',
           name : 'truck_no',
           isdefault : true
           }, {
           display : '车辆状态',
           name : 'status'
          }],        
       sortname : "默认排序依据",
       sortorder : "排序方式有asc/desc",
       usepager : true//是否实用分页,
       title : '',
       useRp : true,
       minColToggle: 1, //允许显示的最小列数
autoload: true, //自动加载，即第一次发起ajax请求
resizable: false, //table是否可伸缩
procmsg: '加载中, 请稍等 ...'缓冲时信息,
       onSubmit: addFormData//提交查询时调用的函数,
       checkbox : true,// 是否要多选框
       rowId : ',// 多选框绑定行的id
      rp : 10//每页显示的数量,
       page:1//当前页数,
       nomsg: '没有符合条件的记录存在!',
       showTableToggleBtn : true是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错,
       width : 1000,
       height : 300
       });//}

1.   var actions="";
      function action(com, grid) {
      switch (com) {
      case '添加' :
      openDig("/truckAdd.jsp",0,'821','176',refreshFlex2);
      break;
      case '修改' :
      selected_count = $('.trSelected', grid).length;
      if (selected_count == 0) {
      tips.info("至少选择一条记录！");
      return;
      }
      if (selected_count > 1) {
      tips.info("最多选择一条记录！");
      return;
      }
      data = new Array();
      $('.trSelected td', grid).each(function(i) {
          data[i] = $(this).children('div').text();
          });
      
   openDig("/'');
   
      break;
   
      }
     openDig("/Mips/mips/dhl/repair_turnrepair.action?truckNo="+data[0],0,'821','176',refreshFlex2);
      break;
   case '维修完成' :
      selected_count = $('.trSelected', grid).length;
      if (selected_count == 0) {
      tips.info("至少选择一条记录！");
      return;
      }
      if (selected_count > 1) {
      tips.info("最多选择一条记录！");
      return;
      }//第一种取值方式
      data = new Array();
      $('.trSelected td', grid).each(function(i) {
          data[i] = $(this).children('div').text();
          });
     if("维修中"!=data[6]){
       tips.info("该车辆尚未维修！");
       return;
      }
     openDig("/Mips/mips/dhl/repair_turnrepair.action?truckNo="+data[0],0,'821','199','');
      break;
      
      case '删除' :
      selected_count = $('.trSelected', grid).length;
      if (selected_count == 0) {
     tips.info("至少选择一条记录！");
      return;
      }
      names = '';
      $('.trSelected td:nth-child(2) div', grid).each(function(i) {
          if (i)
          names += ',';
          names += $(this).text();
          });
      ids = '';
      $('.trSelected td:nth-child(8) div', grid).each(function(i) {
          if (i)
          ids += ',';
          ids += $(this).text();
          });
      if("空闲"!=ids){
       tips.info("该车辆暂不能删除！");
       retrun;
      }
      if (confirm("确定删除车辆[" + names + "]?")) {
      openDig("/Mips/mips/dhl/all_delete.action?truckNo="+names,0,'360','155','');
      }
      break;
      }
      }

该方法提交之后，转交后台执行sql查询，查询成功后在相应的jsp页面进行显示。每列的表单值也可以设置是否可以排序、行的是否可选，是一种很便捷的工具，给开发人员很大程度上提高了效率也节省了时间降低了开发周期。