jQuery flexigrid v1.1使用遇到的问题与解决

当前位置:

jQuery flexigrid v1.1使用遇到的问题与解决

作者:邓华锋于2013-6-28发布在 分类:flexigrid / 阅读39784 次 / 共有0条评论  

jQuery flexgrid V1.1

演示地址

初始化参数说明:

height : 200, // flexigrid插件的高度,单位为px 
width : 'auto', // 宽度值,auto表示根据每列的宽度自动计算 
striped : true, // 是否显示斑纹效果,默认是奇偶交互的形式 
novstripe : false, 
minwidth : 30, // 列的最小宽度 
minheight : 80, // 列的最小高度 
resizable : true, // 是否可伸缩 
url : false, // ajax方式对应的url地址 
method : 'POST', // 数据发送方式 
dataType : 'xml', // 数据加载的类型 
checkbox : false,// 是否要多选框 
errormsg : '连接错误!',// 错误提示信息 
usepager : false, // 是否分页 
nowrap : true, // 是否不换行 
page : 1, // 默认当前页 
total : 1, // 总页面数 
useRp : true, // 是否可以动态设置每页显示的结果数 
rp : 15, // 每页默认的结果数 
rpOptions : [5,10, 15, 20, 25, 30, 40],// 可选择设定的每页结果数 
title : false,// 是否包含标题 
pagestat : '显示第 {from} 条到 {to} 条,共 {total} 条数据',// 显示当前页和总页面的样式 
procmsg : '正在处理,请稍候 ...',// 正在处理的提示信息 
query : '',// 搜索查询的条件 
qtype : '',// 搜索查询的类别 
nomsg : '没有数据存在!',// 无结果的提示信息 
minColToggle : 1, // 允许显示的最小列数 
showToggleBtn : true, // 是否允许显示隐藏列
hideOnSubmit : true,// 隐藏提交 
autoload : true,// 自动加载 
blockOpacity : 0.5,// 透明度设置 
onToggleCol : false,// 当在行之间转换时,可在此方法中重写默认实现,基本无用 
onChangeSort : false,// 当改变排序时,可在此方法中重写默认实现,自行实现客户端排序 
onSuccess : false,// 成功后执行 
onSubmit : false //提交时执行的函数
idProperty: 'id',//绑定主键ID,列格式化时用到。 pagetext: '第',//当前页
outof: '页,总页数',//总页数
findtext: 'Find',//查询按钮的文本
params: [], //allow optional parameters to be passed around
preProcess: false,
addTitleToCell: false, // add a title attr to cells with truncated contents
dblClickResize: false, //auto resize column by double clicking
onDragCol: false,//当在拖拽列的触发的事件
onDoubleClick: false,//当在双击行时触发的事件
totalRender: null, //统计面板(全部数据) 我自己添加的 实现看我给的源码
onError: false,		
__mw: { //extendable middleware function holding object
  datacol: function(p, col, val) { //middleware for formatting data columns
           var _col = (typeof p.datacol[col] == 'function') ? p.datacol[col](val) : val; //format column using function
           if(typeof p.datacol['*'] == 'function') { //if wildcard function exists
              return p.datacol['*'](_col); //run wildcard function
           } else {
              return _col; //return column without wildcard
           }
         }
},
getGridClass: function(g) { //get the grid class, always returns g
 return g;
},
datacol: {}, //datacol middleware object 'colkey': function(colval) {}
colResize: true, //from: http://stackoverflow.com/a/10615589
colMove: true


20130713191224_0357.png

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

$("#query").flexigrid({
params : [ {
            name : "参数名1",
            value : "参数值1"
            }, {
            name : "参数名2",
            value : "参数值2"
         } ]
});


2.flexigrid参数onSubmit用法


 onSubmit:  function(){
        var dt = jQuery("#frmQuery").serializeArray();
         jQuery("#tabQuery").flexOptions({params: dt});
         return true;
    }  
就这样写足以,frmQuery是表单form的id,tabQuery是绑定的table的id。

这样的话form表单里发生按钮点击事件,将会触发这个方法。

当然还要注意的事,用到这个的方法的话,还需添加表单的submit事件,让其提交或数据时返回false不刷新页面。


$('#frmQuery').submit(function (){
	$('#tabQuery').flexOptions({newp: 1}).flexReload();
	return false;
});
否则的话,每次form触发事件则刷新整个页面。


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


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

增加步骤:

(1)增加统计属性

QQ图片20140210155300.jpg


(2).flexigrid.js里增加创建新的div的代码

QQ截图20140210155805.png

(3)在动态输出列之后的块代码后面增加代码,把此div加入进去,如搜索面板,增加返回函数

QQ截图20140210160229.png

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

QQ截图20140210160437.png

(5).测试代码

前台js:


$(".tourTakeGroup").flexigrid({
	        url : '/skin/operation/getTourTakeGroupResult.jsp',
	        dataType : 'json',
	      	//当使用onSubmit事,此属性失效
	        //params:[{name: "tour",value:"61"}], 
	        colModel : [ {
	                display : '团号',
	                name : 'GROUPID',
	                width : 120,
	                sortable : true,
	                align : 'center'
	            }, {
	                display : '团名',
	                name : 'GROUPNAME',
	                width : 200,
	                sortable : true,
	                align : 'center '
	            }, {
	                display : '上团日期',
	                name : 'LEAVEDATE',
	                width : 150,
	                sortable : true,
	                align : 'center ',
	                hide : false
	            }, {
	                display : '下团日期',
	                name : 'BACKDATE',
	                width : 150,
	                sortable : true,
	                align : 'center ',
	                hide : false
	            }, {
	                display : '天数',
	                name : 'DAYS',
	                width : 50,
	                sortable : true,
	                align : 'center ',
	                hide : false
	            }, {
	                display : '团队类型',
	                name : 'GROUPTYPE',
	                width : 120,
	                sortable : true,
	                align : 'center ',
	                hide : false
	            }],
	            findtext:"查询",
	        searchitems : [{
	            display : '团号',
	            name : 'GROUPID'
	            }, {
	                display : '团名',
	                name : 'GROUPNAME',
	                isdefault : true
	        	},{
	                display : '团队类型',
	                name : 'GROUPTYPE',
	        	}],
	        sortname : "GROUPID",
	        sortorder : "desc",
	        usepager : true,
	        //title : '带团信息',
	        useRp : true,
	        rp : 15,
	        showTableToggleBtn : true,
	        onSubmit: addTourTakeGroupFormData,
	        totalRender: f_totalRender,
	        //width : 750,
	        height : 200
	    });
		 function f_totalRender(data){
	            return "总带团天数:"+data.totalDays; 
	     }
后台jsp返回json的关键代码:



JSONArray jsonArray = JSONArray.fromObject(resultList);
		String result = "{\"page\":\"" +page + "\",\"total\":\""+total+"\",\"totalDays\":\""+totalDays+"\",\"rows\":"+ jsonArray + "}";
		out.println(result);
totalDays是自定义的统计天数的属性,当然你可以再增加其他的统计,用totalRender格式化输出就行了。

5.怎样格式化单元格值得显示了?

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

例如:


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


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

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

格式化内容:

function operate(tdDiv,id){
$(tdDiv).html("<a hre='index.jsp?id="+id+"'>"+$(tdDiv).html()+"</a>");
}

或者以下这样也成:

$("#query").flexigrid({
	idProperty : "id",
	colModel : [ {
		display : '操作',
		width : 120,
		align : 'center',
		process : function(tdDiv, id) {
					$(tdDiv).html("<a hre='index.jsp?id=" + id + "'>"+ $(tdDiv).html() + "</a>");
				 }
	} ]
});


6.中文字体显示效果不好,太小了,怎么办?

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

原来的样式:

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

替换成如下形式:

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

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

7.flexigrid能进行数据拖拽么?

flexigrid不能进行行的拖拽,可进行列的拖拽,resizable属性有两个值true,false。
如果想实现类似树状结构的表格并且能进行拖拽,推荐使用jQuery treeTable



8.flexigrid按钮样式

默认flexigrid样式里是没有添加按钮样式的,可在flexigrid.css引用专门的按钮样式文件,这样以后添加按钮样式,只要在这个文件里添加就行了。

9.flexigrid查询提交的参数有哪些?

page//当前页码

qtype//查询字段

query//查询值

rp//每页条数

sortname//排序字段

sortorder//排序方式 asc desc

10.查询返回给flexigrid的参数有哪些?

page//当前页面

total//总记录数

rows//结果集

JSP里可这样返回:


String page =request.getParameter("page");
ArrayList<User> resultList=new ArrayList<User>();//resultList当然要从数据库里查询出来 这个结果集是分页后的结果集 比如rp=15 这查询出这15条记录
long total=1000;//总记录是满足当前查询条件记录的总数  当然要select count(*) from 查询条件 查询出来
JSONArray jsonArray = JSONArray.fromObject(resultList);
		String result = "{\"page\":\"" +page + "\",\"total\":\""+total+"\",\"rows\":"+ jsonArray + "}";
		out.println(result);


  • 标签: jQuery flexigrid 使用遇到的问题与解决
  • 该日志于 2013-6-28 14:26 由 邓华锋 发表在 邓华锋 上,你除了可以发表评论外,还可以转载"jQuery flexigrid v1.1使用遇到的问题与解决"日志到你的网站或博客,但是请保留源地址及作者信息,谢谢!!
  • 版权所有:《邓华锋》 => 《jQuery flexigrid v1.1使用遇到的问题与解决
    本文地址:http://dhf.me/post-205.html
    除非注明,文章均为 《邓华锋》 原创,欢迎转载!转载请注明本文地址,谢谢。