jquery grid插件 Flexigrid

业务代码中需要grid的支持， 找了几个最终选择了jquery的FLEXIGRID 虽然有很多地方不尽人意。例如在AJAX的JSON部分很不爽。 但是总的来讲不错。
下载地址
http://www.webplicity.net/flexigrid/
-------------------------------------
样例代码：
--------------------------------------

$(function() {
	$("#flex1").flexigrid
			(
			{
			url: 'a/initAction.action',
			dataType: 'json',
			colModel : [
				{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
				{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
				{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
				{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
				{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
				],
			buttons : [
				
				{separator: true}
				],
			searchitems : [
				{display: 'ISO', name : 'iso'},
				{display: 'Name', name : 'name', isdefault: true}
				],
			sortname: "iso",
			sortorder: "asc",
			usepager: true,
			title: 'Countries',
			useRp: true,
			rp: 15,
			showTableToggleBtn: true,
			width: 700,
			height: 200
			}
			);
	
	});

有很多系统参数可以在初始化的时候设定

 height: 200, //default height
			 width: 'auto', //auto width
			 striped: true, //apply odd even stripes
			 novstripe: false,
			 minwidth: 30, //min width of columns
			 minheight: 80, //min height of columns
			 resizable: true, //resizable table
			 url: false, //ajax url
			 method: 'POST', // data sending method
			 dataType: 'xml', // type of data loaded
			 errormsg: 'Connection Error',
			 usepager: false, //
			 nowrap: true, //
			 page: 1, //current page
			 total: 1, //total pages
			 useRp: true, //use the results per page select box
			 rp: 15, // results per page
			 rpOptions: [10,15,20,25,40],
			 title: false,
			 pagestat: 'Displaying {from} to {to} of {total} items',
			 procmsg: 'Processing, please wait ...',
			 query: '',
			 qtype: '',
			 nomsg: 'No items',
			 minColToggle: 1, //minimum allowed column to be hidden
			 showToggleBtn: true, //show or hide column toggle popup
			 hideOnSubmit: true,
			 autoload: true,
			 blockOpacity: 0.5,
			 onToggleCol: false,
			 onChangeSort: false,
			 onSuccess: false,
			 onSubmit: false // using a custom populate function

以上为表现层代码

后台代码官方给的例子是php的、写的很公用。

在这里记录一下java里的使用方法
servlet or jsp or action ..... 总之喜欢什么就用什么好了。最关键的是返回的数据类型的结构体。还有在后台的request中得到的分页参数
JSON的结构体如下

{"total":200,"page":2,
"rows":[{"id":"1","cell":["a","b","c","e"]}
{"id":"2","cell":["a","b","c","e"]},
{"id":"3","cell":["a","b","c","e"]},
{"id":"4","cell":["a","b","c","e"]},
{"id":"5","cell":["a","b","c","e"]},
{"id":"6","cell":["a","b","c","e"]},
{"id":"7","cell":["a","b","c","e"]},
{"id":"8","cell":["a","b","c","e"]},
]}

request中得到的分页参数

//当前访问的页数
	String page = ServletActionContext.getRequest().getParameter("page");
//每页显示多少行数据
	String rp = ServletActionContext.getRequest().getParameter("rp");
//排序字段
	String sortname = ServletActionContext.getRequest().getParameter("sortname");
.......

如何在java中产生JSON数据 使用http://www.json.org/java/index.html就可以
样例代码

	public static Map getMap() {
		Map map = new HashMap();
		map.put("page", 2);
		map.put("total", 200);
		List mapList = new ArrayList();
	    Map cellMap = new HashMap();
	    cellMap.put("id", "1");
	    cellMap.put("cell", new Object[] {"a", "b", "c", "e" });
		mapList.add(cellMap);
		map.put("rows", mapList);
		JSONObject object = new JSONObject(map);
		System.out.println(object.toString());
		return map;
	}

评论

10 楼 dopic 2011-12-15  

      

9 楼 mogui258 2010-07-08  

强烈上传源代码！

8 楼 hyj1254 2009-09-08  

http://www.webplicity.net/flexigrid/

里面是一堆超链接，哪有东西下载啊？

7 楼 lin23871 2009-07-14  

体: [b]文字[/不过，我这里把他改掉了，还改了其它一些东西，各取所需吧
3 楼 supercode 2008-12-10   引用
每列的宽度好像不能设置为%
如果固定的话，在不同的分辨率下，会有问题
2 楼 tzjoe 2008-10-31   引用
   
1 楼 tzjoe 2008-10-31   引用
b] (alt+b

6 楼 lin23871 2009-07-14  

[/b][b][/b][b][/b][b][/b][b]粗体: [b]文字 (alt+b)[/b][/b][b][/b][b][b][/b]

5 楼 lin23871 2009-07-14  

[b][b][b][i][/i][/b][/b][/b]

4 楼 zhudp.cn 2008-12-15  

是的，外观什么的都不错，只是它的数据格式弄得不太好，得按一定的次序，
不过，我这里把他改掉了，还改了其它一些东西，各取所需吧

3 楼 supercode 2008-12-10  

每列的宽度好像不能设置为%
如果固定的话，在不同的分辨率下，会有问题

2 楼 tzjoe 2008-10-31  

   

1 楼 tzjoe 2008-10-31