FlexGrid自己用的经验

最新推荐文章于 2025-07-10 15:01:28 发布

最新推荐文章于 2025-07-10 15:01:28 发布 · 569 阅读

文章标签：

#jQuery #json #HTML #ViewUI

JavaScript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用jQuery插件FlexGrid来创建一个功能完整的表格组件，包括数据查询、分页和行选择等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>