jQueryflexgrid

jQueryflexgrid V1.1

初始化参数说明：

view source

print ?

01	height : 200, // flexigrid插件的高度，单位为px

02	width : 'auto', // 宽度值，auto表示根据每列的宽度自动计算

03	striped : true, // 是否显示斑纹效果，默认是奇偶交互的形式

04	novstripe : false,

05	minwidth : 30, // 列的最小宽度

06	minheight : 80, // 列的最小高度

07	resizable : true, // 是否可伸缩

08	url : false, // ajax方式对应的url地址

09	method : 'POST', // 数据发送方式

10	dataType : 'xml', // 数据加载的类型

11	checkbox : false,// 是否要多选框

12	errormsg : '连接错误!',// 错误提示信息

13	usepager : false, // 是否分页

14	nowrap : true, // 是否不换行

15	page : 1, // 默认当前页

16	total : 1, // 总页面数

17	useRp : true, // 是否可以动态设置每页显示的结果数

18	rp : 15, // 每页默认的结果数

19	rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数

20	title : false,// 是否包含标题

21	pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式

22	procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息

23	query : '',// 搜索查询的条件

24	qtype : '',// 搜索查询的类别

25	nomsg : '没有数据存在!',// 无结果的提示信息

26	minColToggle : 1, // 允许显示的最小列数

27	showToggleBtn : true, // 是否允许显示隐藏列，该属性有bug设置成false点击头脚本报错

28	hideOnSubmit : true,// 隐藏提交

29	autoload : true,// 自动加载

30	blockOpacity : 0.5,// 透明度设置

31	onToggleCol : false,// 当在行之间转换时，可在此方法中重写默认实现，基本无用

32	onChangeSort : false,// 当改变排序时，可在此方法中重写默认实现，自行实现客户端排序

33	onSuccess : false,// 成功后执行

34	onSubmit : false //提交时执行的函数

35	idProperty: 'id',//绑定主键ID，列格式化时用到。

36	pagetext: '第',//当前页

37	outof: '页，总页数',//总页数

38	findtext: 'Find',//查询按钮的文本

39	params: [], //allow optional parameters to be passed around

40	preProcess: false,

41	addTitleToCell: false, // add a title attr to cells with truncated contents

42	dblClickResize: false, //auto resize column by double clicking

43	onDragCol: false,

44	onDoubleClick: false,

45	totalRender: null, //统计面板(全部数据) 自己添加的

46	onError: false,

47	__mw: { //extendable middleware function holding object

48	datacol: function(p, col, val) { //middleware for formatting data columns

49	var _col = (typeof p.datacol[col] == 'function') ? p.datacol[col](val) : val; //format column using function

50	if(typeof p.datacol['*'] == 'function') { //if wildcard function exists

51	return p.datacol['*'](_col); //run wildcard function

52

} else {

53	return _col; //return column without wildcard

54

}

55

}

56

},

57	getGridClass: function(g) { //get the grid class, always returns g

58

return g;

59

},

60	datacol: {}, //datacol middleware object 'colkey': function(colval) {}

61	colResize: true, //from: http://stackoverflow.com/a/10615589

62	colMove: true

1.实例化flexigrid时，怎样传参数，用params属性，类型是数组，格式是[{name:"参数名",value:"参数值"}]

2.实例化flexigrid时，使用onSubmit绑定表单时，params将会失效，解决办法在绑定打表单里定义要传的参数隐藏域。

3.怎样加个统计面板？我想对每一列的数据进行汇总。此插件没有这功能，看来只能手动修改源码了。

增加步骤：

(1).flexigrid.js里增加创建新的div的代码，在动态输出列之后的块代码后面增加代码，把此div加入进去，如搜索面板，增加返回函数

(2).更改flexgrid.css,把搜索面板div的css样式复制粘贴

(3).编写

4.怎样格式化单元格值得显示了？

首页初始化时设置idProperty，这张表的主键列，然后colModel需要格式化的列增加process属性指定自己定义的函数名。

例如：$("#query").flexigrid({idProperty:"id",colModel : [ { display : '操作',width : 120,align : 'center', process: operate}]);

自己定义的函数名中带有两个参数例如:function operate(thDiv,id)){},

其中thDiv是当前单元格的div，id则是这行数据的主键列。

格式化内容：

function operate(thDiv,id)){

$(thDiv).html("<a hre='index.jsp?id="+id+"'>"+$(thDiv).html()+"</a>");

}

或者以下这样也成：

$("#query").flexigrid({idProperty:"id",colModel : [ { display : '操作',width : 120,align : 'center', process: function(thDiv,id){

$(thDiv).html("<a hre='index.jsp?id="+id+"'>"+$(thDiv).html()+"</a>");

}}]);

5.中文字体显示效果不好，太小了，怎么办？

修改flexigrid.css的flexigrid样式的字体和大小。

原来的样式：

  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;

替换成如下形式：

    font-family:Tahoma;
    font-size: 12px;

“宋体”下的英文字符看多了会让人觉得蹩脚的，所以设置font-family:arial; 或是font-family:Tahoma;