FlexGrid自己用的经验

FlexGrid是一个很好的jQuery插件。下面建立一个FlexGrid

  	$(document).ready(function(){  	
  			
  		var url = "companyName=" + $("#companyName").val()
  				+"&telephone="+$("#telephone").val() + "&account="+$("#account").val();
  		    $("#results").flexigrid({  //id和html元素一致		    
			url: 'SearchCmp.do',
			dataType: 'json' ,	
			query:url,
			colModel : [
				{display: '企业名称', name : 'name', width : 180, sortable : true, align: 'left'},
				{display: '帐号', name : 'account', width : 80, sortable : true, align: 'left'},
				{display: '联系人', name : 'contact', width : 80, sortable : true, align: 'left'},
				{display: '电话', name : 'telephone', width : 40, sortable : true, align: 'left'},
				{display: '截止日期', name : 'expire', width : 40, sortable : true, align: 'left'},
				{display: '黑名单', name : 'black', width : 20, sortable : true, align: 'left'},
				{display: 'VIP', name : 'vip', width : 20, sortable : true, align: 'left'}
				],
			buttons: [{
                    name: '确定',
                    bclass: 'add',
                    onpress: selectok //行选择后的操作
                }],
  			usepager: true,
			title: '查询结果',
			useRp: true,
			rp: 20,
			singleSelect: true, //仅允许选择单行
			width: 500,
			height: 200,
			resizable: false,
			pagestat: '显示 {from} 到 {to} 条， 共{total}条记录',  
			procmsg: '正在获取数据，请稍候 ...'
			});   
			
		
			function selectok(com,grid){
				if ($(".trSelected").length==1) {
							var id="";                       
                            var name="";
                            var item = $('.trSelected',grid)[0];
                            id =item.id.substr(3);
                            //flexgrid自动会把列的id设置为'row'+返回记录的id，所以要去掉前面无用的字符
                            if($.browser.msie){
                            	name= item.cells[0].innerText;
                            }else{
                             	name= item.cells[0].textContent;
                           }                  
                           $("#companyName").val(name); 
                           $("#companyName",parent.document).val(name);  
                           //因为查询窗口是通过thickbox打开的子窗口，所以，需要更新到父窗口中
                           $("#compid",parent.document).val(id);
                           //更新到父窗口
                           self.parent.tb_remove();
                    }
                    else {
                        alert("你没有选择企业或者数量不对");
                    }
			}
			
  	})

这里注意，提交上的URL并不是三个参数，而是只有一个，参数的名称是query，需要在代码中拆开，并且还会有2个参数做分页page和rp（每页几条记录）

String[] str = query.split("&");
		String[] tmp = str[0].split("=");
		String[] tmp2 = str[1].split("=");
		String[] tmp3 = str[2].split("=");
		companyName = tmp.length>1?tmp[1]:"" ;		
		telephone = tmp2.length>1?tmp2[1]:"" ;	
		account = tmp3.length>1?tmp3[1]:"" ;	
		page = page<1?1:page;
		rp=rp<20?20:rp;

返回的JSON数据格式和Extjs的也不一样

  {
	page:1, #表示当前页面
	total:5, #总共多少记录
	rows: [
		
			{id:'8a9306f61f35bc99011f35cf6af60001', #这里的id会作为表格行的id，格式为'row'+id，
				cell:['测试', //总共多少列和客户端代码的列数一致
				'1161',
				'综合性',				
				'2009-02-07',
				'阿斯顿'
			]}
		,
		
			{id:'8a9306f61f81b26c011f81b3910a0001',
				cell:['演示',
				'1164',
				'综合性',				
				'2009-02-21',
				'演示'
			]}
		,
		
			{id:'8aca88521f4acf9d011f7e44b0520008',
				cell:['演示',
				'1163',
				'综合',				
				'2009-02-28',
				'演示招聘会'
			]}
		,
		
			{id:'8aca88521de6f8f2011de700bb870004',
				cell:['宁波',
				'1160',
				'毕会',				
				'2009-01-09',
				'宁波会'
			]}
		,
		
			{id:'8aca88521f4acf9d011f5ed4b1e20001',
				cell:['周六',
				'1162',
				'综合',				
				'2009-02-14',
				''
			]}
		
				
	]
}

最后页面上需要有一个容器显示表格：

<table id="results" style="display:none"></table>

评论

5 楼 jie_kong 2015-11-12  

是flexigrid不是flexgrid

4 楼 zjnbshifox 2011-09-20  

看了一下flexigrid的源代码，似乎没有自定的renderer函数，我想要么就直接在返回数据里体现，要么修改它的源代码，加上renderer函数

3 楼 renlei413326889 2011-09-19  

请问一下 怎么设置表格显示超链接，点击可以跳转？ 请留言，谢谢~

2 楼 Darrick 2009-06-18  

问题已经解决.. 谢谢

1 楼 Darrick 2009-06-17  

请问一下.. 如果您添加搜索功能 能实现吗?
我的不知道为什么不能实现搜索功能.
搜索input输入回车 还是返回的全部数据.
非常不解.
如能帮助
请到本人javaeye博客留言 谢谢啊。！