1）静态页面查询数据库表单数据并分页展示——easyUI、JSON、springMVC常用注解

最新推荐文章于 2022-06-24 09:24:44 发布

原创最新推荐文章于 2022-06-24 09:24:44 发布 · 699 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#java #js #javascript #html

Ⅰ、前端页面

easyUI是依赖Jquery的……

使用easyUI动态拼接表单
1）发送请求，查询数据库某表的数据
2）解析返回的JSON对象动态拼接为表单
3）分页展示

<body>
<table id="dg"></table>
</body>
<script>
    $('#dg').datagrid({
        url:'/erole/getCurrentRoleList',
        columns:[[
            {field:'rid',title:'角色ID',width:100,checkbox:true},
            {field:'rcode',title:'角色编码',width:100},
            {field:'rname',title:'角色名称',width:100},
            {field:'operation',title:'操作',width:100,
                formatter: function(value,row,index){
                    return "<a href='#' οnclick='updateCurrentErole("+row.rid+")'>修改 </a>"+
                        "<a href='#' οnclick='detailsCurrentErole("+row.rid+")'> 详情 </a>"+
                        "<a href='#' οnclick='deleteCurrentErole("+row.rid+")'> 删除</a>";
                }}
        ]],
        /*如果为true，则在DataGrid控件底部显示分页工具栏。*/
        pagination:true,
        /*在设置分页属性的时候初始化页码。*/
        pageNumber:1,
        /*在设置分页属性的时候初始化页面大小。*/
        pageSize:4,
        /*在设置分页属性的时候初始化页面大小选择列表。*/
        pageList:[4,6,8],
        toolbar:'#tb'
    });
</script>

Ⅱ、控制层

erole中（最好继承一个包含后续字段的类）应该还包含page（固定属性名称，当前页数）、rows（固定属性名称，每页大小。不要与返回时的rows混淆了，这是两个不一样的意思）、limitStart（分页查询的开始）=(page-1)*rows

@RequestMapping、@ResponseBody参考👉https://blog.csdn.net/Today_He/article/details/109525397中的常用注解

/*获取满足某个条件的所有角色信息*/
    @RequestMapping("getCurrentRoleList")
    @ResponseBody
    //JSONObject是什么？
    // 全类名：com.alibaba.fastjson.JSONObject
    //就是阿里巴巴提供的将任意对象转为json对象的工具类（自己封装一个工具类也是可以的）
    public JSONObject getCurrentRoleList(Erole erole){
        JSONObject jsonObject = new JSONObject();
        //获取满足某个条件的所有角色信息，并将其封装在rows属性中,省略。。。。。。
        jsonObject.put("rows",eroleService.getCurrentEroleList(erole));
        //获取满足某个条件的所有角色信息的总条数，并封装在total属性中,省略。。。。
        jsonObject.put("total",eroleService.countCurrentEroleList(erole));
        return jsonObject;
    }

Ⅲ、补充

关于JSON

👉点击——https://blog.csdn.net/Today_He/article/details/109155391

前端script标签中：
在这里插入图片描述
java中：
1）自定义转换工具类

2）使用阿里巴巴提供的JSONObject、JSONArray

//JSON对象
JSONObject jsonObject= new JSONObject();
jsonObject.put("name","hbw");
//JSON数组
JSONArray children = new JSONArray();
children.add(jsonObject);