ynial 发表于 2013-1-27 05:14:31

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: , 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;}
页: [1]
查看完整版本: jquery grid插件 Flexigrid