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. }