flexigrid插件使用心得

时间:2021-01-21 16:34:00

flexigrid插件是一个功能相当强大的表格显示插件,最近在做程序是要使用此插件表格来表示查询出的内容,以下是我的使用flexigrid的心得:

①对于flexigrid的使用方法这里就不详述了,网上一查就知道,我使用的时候将插件中属性的设置与此插件使用到的function分开了,做了封装,如下:

属性设置:

var option={
  method : 'POST',
  height:330,
  colModel : [
      {display : '零件',name : 't_sort_Code',width : 100, sortable : true,align : 'center'},
      ........
      ],
  buttons : [
      {name: 'Process Detail', bclass:"modify",onpress:getProcessDetail},     
      {separator: true}
      ],
  singleSelect:true,
  errormsg : '发生异常',
  usepager : false,
  pagestat : '显示记录从{from}到{to},总数 {total} 条',
  useRp : true,
  rp : 10,
  rpOptions : [ 10, 15, 20, 30, 40, 100 ], //可选择设定的每页结果数
  nomsg : '没有符合条件的记录存在',
  minColToggle : 1, //允许显示的最小列数
  showTableToggleBtn : false,
  showToggleBtn:true,
  autoload : true, //自动加载,即第一次发起ajax请求
  resizable : false, //table是否可伸缩
  query : '',//搜索查询的tiaojian
  qtype : '',//搜索查询的类别
  procmsg : '加载中, 请稍等 ...',
  hideOnSubmit : false, //是否在回调时显示遮盖
  blockOpacity : 0.8,//透明度设置
  rowbinddata : true, 
  /* gridClass:"blue"//样式   */ 
 };

function函数:
 function getProcessDetail() {

if ($('.trSelected', $("#operation")).length == 0) {
  alert("请选择要查看的行!");
 }
 else {

}

}

②flexigrid的属性设置是非常多的,这里对不常见的做些说明:

showTableToggleBtn : 设置flexigrid表格是否可以隐藏(左上角的箭头图标的有无)

 showToggleBtn:设置表格中每一列是否可以自定义显示与隐藏,(每一列右端的箭头图标的有无)

onRowDblclick:行双击事件,(必须在flexigrid.js文件中添加一段代码,网上很多)

hover:鼠标停到某行触发的时间,与双击事件一样,在flexigrid.js中.hover函数中添加一个方法。

③使用$("#query-tool-list").flexToggleCol(2, true); 语句隐藏某一列,2表示某一列的id(id是插件自带的,0为第一列)