SpringMVC+JDBCTempalte 第一个ligerui 表格

本人目前还是实习生，领导布置了一个考核任务，其中就使用到了这个ligerui的表格框架。ligerui的功能还是很强大的，东西很全。大家有需要的可以先去JQuery LigerUi这里看看，里面很全，各种案例和API。

接下来就是讲一下我的第一个小demo，尽量详细，让和我一样的小菜鸟们能尽快上手。
首先第一步， 先去JQuery LigerUi 把我们需要的包下载下来，里面有两个文件夹

其中Document里面是ligerui的api，很详细，遇到问题可以先来这里看看。
Source里面就是我们需要的各种css和js文件，把lib包直接拷贝到你的项目中就可以了。

第二步，新建一个jsp，把你需要的js和css文件都加入到jsp中

<link href="${pageContext.request.contextPath}/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/cs">
<script 
type="text/javascript"src="${pageContext.request.contextPath}/lib/jquery/jquery-1.9.0.min.js"></script>
<script type="text/javascript"src="${pageContext.request.contextPath}/lib/ligerUI/js/ligerui.min.js"></script>


<div style="width: 760px">
    <div id="maingrid"></div>
</div>

接下来就是关键的东西了

var XB = {
        "1" : "男",
        "2" : "女"
    };
//表头
var dataCloum = [ {
                display : '机构名称',
                width : 190,
                name : 'DEPTNAME'
            }, {
                display : '姓名',
                width : 70,
                name : 'REALNAME'
            }, {
                display : '用户名',
                width : 100,
                name : 'USERNAME'
            }, {
                display : '性别',
                name : 'SEX',
                width : 50,
                render : function(row) {//单元格渲染器，其实就是单元格格式化，使用自定义方法
                    return XB[row.SEX];
                }
            }, {
                display : '义工证号',
                width : 140,
                align : 'left',
                name : 'YGCARDNO'
            }, {
                display : '活动时长',
                align : 'left',
                width : 60,
                name : 'SERVICETIME',
                render : function(row) {
                    return row.SERVICETIME + "小时";
                }
            }, {
                display : '培训时长',
                align : 'left',
                width : 60,
                name : 'TRAINTIME',
                render : function(row) {
                    return row.TRAINTIME + "小时";
                }
            }, {
                display : '状态',
                align : 'left',
                width : 65,
                name : 'STATE',
                render : function(row) {
                    return ZT[row.STATE];
                }
            }, ];
            $("#maingrid").ligerGrid({
                checkbox : true,//开启复选框
                columns : dataCloum,
                url : 'yg.do',
                pageSize : 30,//每页默认的结果数
                parms:[{name:"status",value:1},{name:"deptId",value:1}],
                //想服务器提交的参数，name是参数名，value是参数值，可以放很多个
                pagesizeParmName : 'pageSize',//提交给服务器的
                userPager : true,//开启分页
                dataAction : 'server',//服务器分页
                selectRowButtonOnly : true,//必须点击选择框时才选中行
                height : '80%',
                frozenCheckbox : false//    复选框按钮是否在固定列中
            });

然后就是拿数据了，记住，我们最后需要的是json格式的数据，里面的格式是

Rows：是我们需要分页的数据
Pages：是总页数
Total：是一共有多少条数据

@RequestMapping("yg.do")
    @ResponseBody
    public void getAll(
            @RequestParam(value = "pageSize", required = true) int pageSize,
            @RequestParam(value = "page", required = true) int page,
            @RequestParam(value = "parms", required = false) String parms,
            @RequestParam(value = "deptId", required = false) Integer deptId,
            @RequestParam(value = "status", defaultValue = "1") Integer status,
            HttpServletResponse response) {
        PrintWriter out = null;
        try {
            response.setContentType("text/json");
            response.setCharacterEncoding("UTF-8");
            out = response.getWriter();
            // 在使用response.getWriter()时，方法应无返回值
            // 既手动调用PrintWriter向客户端输出内容，又设置了方法返回值，因此会报错

            Map<String, Object> map = ygService.getAllUser(page, pageSize,
                    parms, deptId, status);

            String jsonObj = JSONUtil.toJSON(map);
            out.print(jsonObj);
            out.flush();
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            if (out != null) {
                out.close();
            }
        }

    }

@RequestParam(value = “deptId”, required = false）
required=false时，就是在你提交参数的时候，这个参数可以为空，但是必须提交参数。

其中，Pages和Total的值我是在service层放进去的，你们可以用一个Map

if (count % pagesize != 0) {
    pages = count / pagesize + 1;
} else {
    pages = count / pagesize;
}
all.put("Total", count);
all.put("Pages", pages);
all.put("Rows", mapList);

接下来运行就能看到我们的表格啦

---

[1]转载请说明地址，谢谢~