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为第一列)