jquery grid插件 Flexigrid

  关键字: ajax

业务代码中需要 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
            }
            );

    });

$(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

 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"]},
]}

{"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");
.......

//当前访问的页数 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;
}