jqGrid

 

前段时间做了个小项目，用到了jqgrid，jqgrid看起来还是很强大的，通过一些配置既可以实现对数据的增删改查，但是由于我的一些数据处理比较复杂，如果直接通过jqgrid的配置来实现所有的功能，可能比较难，而且说实话，jqgrid的配置说明不是很清楚，学习成本也不小，所以我只用了grid的展示与分页，一些toolbar按钮操作基本上都是自己写的。

首先看下效果：

 

下面来看一下如何通过配置实现：

1，首先 定义两个html元素分别代表data grid以及下面的分页

<table id="grid-table"></table>
<div id="grid-pager"></div>

2，js

//首先可以定义对应以上两个元素的id，方便配置
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
jQuery(grid_selector).jqGrid({
            url : "/tem/list.do",
            datatype : "json",
            height : 390,
            colNames : [ '操作', '','名称', '编号', '是否推荐', '状态', '创建时间' ],
            colModel : [ {
                name : 'test',
                index : '',
                width : 150,
                fixed : true,
                sortable : false,
                resize : false,
                formatter : function(cellvalue, options, rowObject) {
                    var id = rowObject.id;
                    return applyActions(id, "view,active,inActive,edit,delete");
                }
            }, {
                name : 'siteUrl',
                index : 'siteUrl',
                hidden:true,
            },{
                name : 'name',
                index : 'name',
                width : 160
            }, {
                name : 'sn',
                index : 'sn',
                width : 160
            }, {
                name : 'recommended',
                index : 'recommended',
                width : 100,
                formatter : function(cellvalue, options, rowObject) {
                    return getRecoBtn(rowObject.recommended, rowObject.id);
                    /* if (rowObject.recommended === true) {
                        return "是";
                    }
                    return "否"; */
                }
            }, {
                name : 'status',
                index : 'status',
                width : 70,
                formatter : function(cellvalue, options, rowObject) {
                    return tem_status[rowObject.status];
                }
            }, {
                name : 'createdTime',
                index : 'createdTime',
                width : 120
            }, ],
            jsonReader : {
                root : "data",
                total : "totalpages",
                page : "currpage",
                records : "totalCount",
                repeatitems : false
            },
            rownumbers : true,
            viewrecords : true,
            rowNum : 10,
            rowList : [ 10, 20, 30 ],
            pager : pager_selector,
            altRows : true,
            //toppager: true,

            multiselect : true,
            //multikey: "ctrlKey",
            multiboxonly : true,

            loadComplete : function() {
                var table = this;
                setTimeout(function() {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },

            //editurl: "/dummy.html",//nothing is saved
            caption : "模版列表",
            autowidth : true,

        });
        $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size

说明一下：

　　　　a: 数据的接收解析,通过jsonReader配置，（服务端的数据格式下面细说）其中的root对应数据list名称，total：共几页，page:当前页，records:共多少条数据

　　　　b:每一行的数据通过配置name对应bean中的属性即可

　　　　c:分页配置参数rowNum，默认每页行数，rowList，可选的每页行数，pager要指向页面中定义的page标签id

　　　　d:pager 栏目中的自定义按钮，我是如下定义的

function applyNavButton(option) {
    // grid-pager_left
    var table = $("<table></table>");

    table.attr("cellspacing", "0");
    table.attr("cellpadding", "0");
    table.attr("border", "0");
    table.addClass("ui-pg-table");
    table.addClass("navtable");
    table.css({
        "float" : "left",
        "table-layout" : "auto"
    });

    var tr = $("<tr></tr>");
    tr.appendTo(table);
    if (option.active == true) {
        var _td = createTD(5, option.activeFunction);
        _td.appendTo(tr);
    }
    if (option.inActive == true) {
        var _td = createTD(6, option.inActiveFunction);
        _td.appendTo(tr);
    }

    if (option.add == true) {
        var _td = createTD(1, option.addFunction);
        _td.appendTo(tr);
    }
    if (option.del == true) {
        var _td = createTD(2, option.delFunction);
        _td.appendTo(tr);
    }
    if (option.refresh == true) {
        var _td = createTD(3, option.refreshFunction);
        _td.appendTo(tr);
    }
    if (option.search == true) {
        var _td = createTD(4, option.searchFunction);
        _td.appendTo(tr);
    }
    console.log(table);
    table.appendTo($("#grid-pager_left"));

}

function createTD(type, fn) {

    var iconClass;
    var hoverTitle;
    switch (type) {
    case 1:
        iconClass = "ui-icon ace-icon fa fa-plus-circle purple";
        hoverTitle = "添加一条记录";
        break;
    case 2:
        iconClass = "ui-icon ace-icon fa fa-trash-o red";
        hoverTitle = "删除选中记录";
        break;
    case 3:
        iconClass = "ui-icon ace-icon fa fa-refresh green";
        hoverTitle = "刷新记录";
        break;

    case 4:
        iconClass = "ui-icon ace-icon fa fa-search orange";
        hoverTitle = "搜索";
        break;

    case 5:
        iconClass = "ui-icon ace-icon fa fa-check green";
        hoverTitle = "激活";
        break;

    case 6:
        iconClass = "ui-icon ace-icon fa fa-ban grey";
        hoverTitle = "下线";
        break;

    default:
        break;
    }
    var td = $("<td></td>");
    var _div = $("<div></div>");
    var _span = $("<span></span>");

    _div.appendTo(td);
    _span.appendTo(_div);
    td.on("click", fn);

    _div.addClass("ui-pg-div");
    td.addClass("ui-pg-button ui-corner-all");
    td.attr("data-original-title", hoverTitle);
    _span.addClass(iconClass);

    return td;

}

然后在页面中

applyNavButton({
            add : true,
            addFunction : function() {
                addFunction();
            },
            del : true,
            delFunction : delFunction,
            refresh : true,
            refreshFunction : refreshFunction,
            search : true,
            searchFunction : searchFunction,
            active : true,
            activeFunction : activeFunction,
            inActive : true,
            inActiveFunction : inActiveFunction,
        });

对应的不同操作的方法，可通过配置绑定。在每一行中的按钮也是类似。

 

服务端配置：

    @RequestMapping("/list.do")
    public @ResponseBody JSONObject customerList(
            HttpServletRequest request,
            @RequestParam(value = "page", required = false, defaultValue = "1") Integer page,
            @RequestParam(value = "rows", required = false, defaultValue = "10") Integer pageSize,
            Model model) {

        List<SearchBean> sbeans = convert2SearchBean(request);
        sbeans.add(new SearchBean("status", "4", "!="));
        Pageable pageable = new PageRequest(page - 1, pageSize, new Sort(
                Direction.ASC, "order"));
        Page<TemplateDto> list = templateService.find(pageable,
                sbeans.toArray(new SearchBean[] {}));
        return this.toJSONResult(list.getTotalElements(), list.getContent(),
                pageSize, page);
    }

分页接收的参数，page请求第n页数据，rows：对应每页数据条数

需要返回的参数，返回4个参数对应上面的jsonreader中已经说明，只需将参数名对应配置即可