jquery grid插件 Flexigrid

2008 - 08 - 07

jquery grid插件 Flexigrid

关键字: ajax

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

Javascript代码

1. $(function() {   
2.     $("#flex1").flexigrid   
3.             (   
4.             {   
5.             url: 'a/initAction.action',   
6.             dataType: 'json',   
7.             colModel : [   
8.                 {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},   
9.                 {display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},   
10.                 {display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},   
11.                 {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},   
12.                 {display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}   
13.                 ],   
14.             buttons : [   
15.                    
16.                 {separator: true}   
17.                 ],   
18.             searchitems : [   
19.                 {display: 'ISO', name : 'iso'},   
20.                 {display: 'Name', name : 'name', isdefault: true}   
21.                 ],   
22.             sortname: "iso",   
23.             sortorder: "asc",   
24.             usepager: true,   
25.             title: 'Countries',   
26.             useRp: true,   
27.             rp: 15,   
28.             showTableToggleBtn: true,   
29.             width: 700,   
30.             height: 200   
31.             }   
32.             );   
33.        
34.     });  

$(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
			}
			);
	
	});

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

Java代码

1. height: 200, //default height   
2.          width: 'auto', //auto width   
3.          striped: true, //apply odd even stripes   
4.          novstripe: false,   
5.          minwidth: 30, //min width of columns   
6.          minheight: 80, //min height of columns   
7.          resizable: true, //resizable table   
8.          url: false, //ajax url   
9.          method: 'POST', // data sending method   
10.          dataType: 'xml', // type of data loaded   
11.          errormsg: 'Connection Error',   
12.          usepager: false, //   
13.          nowrap: true, //   
14.          page: 1, //current page   
15.          total: 1, //total pages   
16.          useRp: true, //use the results per page select box   
17.          rp: 15, // results per page   
18.          rpOptions: [10,15,20,25,40],   
19.          title: false,   
20.          pagestat: 'Displaying {from} to {to} of {total} items',   
21.          procmsg: 'Processing, please wait ...',   
22.          query: '',   
23.          qtype: '',   
24.          nomsg: 'No items',   
25.          minColToggle: 1, //minimum allowed column to be hidden   
26.          showToggleBtn: true, //show or hide column toggle popup   
27.          hideOnSubmit: true,   
28.          autoload: true,   
29.          blockOpacity: 0.5,   
30.          onToggleCol: false,   
31.          onChangeSort: false,   
32.          onSuccess: false,   
33.          onSubmit: false // using a custom populate function  

 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的结构体如下

Javascript代码

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

{"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中得到的分页参数

Java代码

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

//当前访问的页数
	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就可以
样例代码

Java代码

1. public static Map getMap() {   
2.     Map map = new HashMap();   
3.     map.put("page", 2);   
4.     map.put("total", 200);   
5.     List mapList = new ArrayList();   
6.     Map cellMap = new HashMap();   
7.     cellMap.put("id", "1");   
8.     cellMap.put("cell", new Object[] {"a", "b", "c", "e" });   
9.     mapList.add(cellMap);   
10.     map.put("rows", mapList);   
11.     JSONObject object = new JSONObject(map);   
12.     System.out.println(object.toString());   
13.     return map;   
14. }