RBAC从零开始--用户管理之显示

index.jsp

......
<c:if test="${requestScope.page == 10}">
    <%@ include file="/WEB-INF/jsp/user-mgmt.jsp"%>
</c:if>
......

---

需要的js插件

bootstrap-table.js
bootstrap-table-zh-CN.js   //汉化插件

bootstrap-table.js/css下载地址

---

user-mgmt.jsp

<table id="user-list"></table>

        <!-- 添加弹出层 modal -->
        <div class="modal right fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                    </div>
                    <div class="modal-body">

                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-sm-2">用户名</label>
                                <input id="user-name" class="form-control col-sm-9" placeholder="输入用户名..." />
                                <p class="name-img"></p>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-sm-3">管理员</label>
                                <label class="radio-inline col-xs-4 col-sm-4">
                                    <input type="radio" name="is-admin" value="1" checked>是
                                </label>
                                <label class="radio-inline col-xs-4 col-sm-4">
                                    <input type="radio" name="is-admin" value="0">否
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-sm-2">邮箱</label>
                                <input type="email" id="user-email" class="form-control col-sm-9"/>
                                <p class="email-img"></p>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row">
                                <label class="control-label col-sm-3">用户状态</label>
                                <label class="radio-inline col-xs-4 col-sm-4">
                                    <input type="radio" name="user-status" value="1" checked>有效
                                </label>
                                <label class="radio-inline col-xs-4 col-sm-4">
                                    <input type="radio" name="user-status" value="0">无效
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="row set-role">
                                <label class="control-label col-sm-3">设置角色</label>
                                <select id="role-select-1" class="col-sm-8 form-control selectpicker show-tick" data-live-search="true">
                                </select>
                            </div>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary add-user">确定</button>
                    </div>
                </div>
            </div>
        </div>

---

user-mgmt.js

$(function () {
    var $table = $('#user-list');
    initTable();
    function initTable() {
       $table.bootstrapTable({
           url: '/user/getUserList',
           method: 'post',
           dataType: 'json',
           contentType:'application/json',
           pagination: true,
           striped: true,
           clickToSelect: false,
           sidePagination: 'server',
           pageNumber: 1,
           pageSize: 5,
           height:500,
           pageList: [5 , 10 , 20 , 50],
           singleSelect: false,
           columns: [{
               field: 'state',
               checkbox: true
           },{
               field: 'user.id' ,
               title: '用户ID'
           },{
               field: 'user.name',
               title: '用户名'
           },{
               field: 'user.email',
               title: '邮箱'
           },{
               field: 'user.isAdmin',
               title: '管理员',
               formatter:function (value , row , index) {
                   if (value) {
                       return "是";
                   } else {
                       return "否";
                   }
               }
           },{
               field: 'user.status',
               title: '用户状态' ,
               formatter:function(value , row , index) {
                   if (value) {
                       return "有效";
                   } else {
                       return "无效";
                   }

               }
           },{
               field: 'roleName',
               title: '所属角色'
           },{
               field:'user.createTime',
               title:'创建日期',
               formatter:function (value , row , index) {
                   return formatDate(value);
               }

           }, {
               field: 'user.updateTime',
               title: '更新日期',
               formatter:function (value , row , index) {
                   return formatDate(value);
               }
           } , {
               title: '<span>操作</span>&nbsp;&nbsp;&nbsp;&nbsp;' +
               '<button class="btn btn-xs btn-blue" data-toggle="modal" data-target="#addModal">添加</button>',

               formatter:function (value , row , index) {
                   var id = row.user.id;
                   return '<button class="btn btn-xs btn-sm btn-blue" ' +
                       'onclick="modify(\'' + id + '\')">' + '编辑' +
                       '</button>&nbsp;&nbsp;&nbsp;&nbsp;' +
                       '<button class="btn btn-xs btn-sm btn-danger" ' +
                       'onclick="deleteUser(\'' + id + '\')">' + '删除' + '</button>';
               }
           }]
       });
    };

    function formatDate(time) {
        var time = new Date(time);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    }

    function add0(m) {
        return m < 10 ? '0' + m : m;
    }

}

---

UserController.java

@SystemLog(description = "获取用户列表")
@RequestMapping(value = "/getUserList" , method = RequestMethod.POST)
@ResponseBody
public BootstrapTablePage<User> getRoleList(@RequestBody BootstrapTablePage bootstrapTablePage) {
    int total = userService.countUser();
    List<User> userList = userService.getUserListByPage(bootstrapTablePage.getLimit()
            , bootstrapTablePage.getOffset());

    List<UserDTO> userDTOList = new ArrayList<>();

    for (User user : userList) {
        UserDTO userDTO = new UserDTO();
        UserRole userRole = userRoleService.getByUserId(user.getId());
        Role role = new Role();
        role.setId(userRole.getRoleId());
        String roleName = roleService.getRoleById(role).getName();
        userDTO.setUser(user);
        userDTO.setRoleName(roleName);
        userDTOList.add(userDTO);
    }
    bootstrapTablePage.setRows(userDTOList);
    bootstrapTablePage.setTotal(total);
    return bootstrapTablePage;
}

@SystemLog(description = "用户管理")
@RequestMapping(value = "/userMgmt" , method = RequestMethod.GET)
public String userMgmtPage(HttpServletRequest request) {
    request.setAttribute("page" , PageEnum.USER_LIST.getCode());
    return "./../../index";
}

BootstrapTablePage封装的一个对象，它封装了bootstrap-table返回需要的格式

package com.xll.util;
import java.util.List;
/**
 * Created by lonely.xia on 2017/10/12.
 */
public class BootstrapTablePage<T> {

    int total;

    List<T> rows;

    int limit;

    int offset;

    String order;

    public BootstrapTablePage() {
    }


    public int getTotal() {
        return total;
    }

    public void setTotal(int total) {
        this.total = total;
    }

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public int getLimit() {
        return limit;
    }

    public void setLimit(int limit) {
        this.limit = limit;
    }

    public int getOffset() {
        return offset;
    }

    public void setOffset(int offset) {
        this.offset = offset;
    }

    public String getOrder() {
        return order;
    }

    public void setOrder(String order) {
        this.order = order;
    }
}

构造数据传输对象UserDTO（给用客户端展示的对象，感兴趣的可以百度一下DTO）

package com.xll.dto;
import com.xll.model.User;
/**
 * Created by lonely.xia on 2017/10/29.
 */
public class UserDTO {
    private User user;

    private Integer roleId;

    private String roleName;

    private Integer userRoleId;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public Integer getRoleId() {
        return roleId;
    }

    public void setRoleId(Integer roleId) {
        this.roleId = roleId;
    }

    public String getRoleName() {
        return roleName;
    }

    public void setRoleName(String roleName) {
        this.roleName = roleName;
    }

    public Integer getUserRoleId() {
        return userRoleId;
    }

    public void setUserRoleId(Integer userRoleId) {
        this.userRoleId = userRoleId;
    }
}

---

实现分页在UserExample.java中加上两个字段，并生成其get与set方法

protected Integer pageSize;
protected Integer offset;

public Integer getPageSize() {
        return pageSize;
    }

public void setPageSize(Integer pageSize) {
    this.pageSize = pageSize;
}

public Integer getOffset() {
    return offset;
}

public void setOffset(Integer offset) {
    this.offset = offset;
}

在UserMapper.xml加上

<select id="selectByExample" resultMap="BaseResultMap" parameterType="com.xll.model.UserExample" >
    ......
    <if test="offset != null and pageSize != null">
          limit ${offset} , ${pageSize}
    </if>
    ......
</select>

---

UserServiceImpl.java[记得在UserService加上这两个接口]

@Override
public int countUser() {
    return userDao.countByExample(new UserExample());
}

@Override
public List<User> getUserListByPage(int limit, int offset) {

    UserExample userExample = new UserExample();

    userExample.setPageSize(limit);
    userExample.setOffset(offset);

    List<User> userList = userDao.selectByExample(userExample);

    if (userList == null) {
        userList = Collections.EMPTY_LIST;
    }

    return userList;
}

下篇将实现用户的添加操作