Crowdfunding：Role Maintenance Tab Show

一、layer弹层组件使用

1、导入并引入layer开发环境：

 

二、操作模态框

1、引入bootstrap环境与jQuery环境：

三、创建模型和组件

1、使用mybatis逆向工程创建实体映射，给实体加上有参和无参构造以及toString。

2、跳转到角色主页面

随后创建JSP

四、角色维护-分页-流程分析

五、持久化层

1、sql

2、mapper.xml

3、mapper.java

六、业务逻辑层

七、控制层

http://localhost:8080/role/search/by/keyword.json

{"result":"SUCCESS","message":"NO_MESSAGE","data":{"pageNum":0,"pageSize":5,"size":0,"startRow":0,"endRow":0,"total":0,"pages":0,"list":[],"firstPage":0,"prePage":0,"nextPage":0,"lastPage":0,"isFirstPage":false,"isLastPage":true,"hasPreviousPage":false,"hasNextPage":false,"navigatePages":8,"navigatepageNums":[]}}

八、测试

 

九、创建外部JavaScript文件：my-role.js

role-page.jsp:

声明分页函数：单独声明一个函数来封装分页操作，因为很多操作完成后都需要调用这个分页函数重新刷新页面上显示的数据。

my-role.js:

 role-page.jsp:

getPageInfo函数的实现：

//获取分页数据：PageInfo
function getPageInfo() {
    //以同步请求方式调用$.ajax()函数，并获取返回值，返回值包含全部响应数据
    var ajaxResult = $.ajax({
        "url": "role/search/by/keyword.json",
        "type": "post",
        "data":{
            "pageNum":(window.pageNum == undefined)?1:window.pageNum,
            "pageSize":(window.pageSize == undefined)?5:window.pageSize,
            "keyword":(window.keyword == undefined)?"":window.keyword
        },
        "dataType":"json",
        //为了保护getPageInfo()函数能够在Ajax请求拿到响应后获取PageInfo,
        //当前需要设置为同步操作
        "async":false
    });
    //从全部响应数据中获取JSON格式的响应体数据
    var resultEntity = ajaxResult.responseJSON;
    //从响应体数据中获取result，判断当前请求是否成功。
    var result = resultEntity.result;
    //如果成功获取pageInfo
    if (result == "SUCCESS"){
        return resultEntity.data;
    }
    if (result == "FAILED"){
        layer.msg(resultEntity.message);
    }
    return null;
}

generateTableBody()函数实现：

首先给该标签添加id标识：

//使用PageInfo数据在tbody标签内显示分页数据
function generateTableBody(pageInfo) {

    //执行所有操作前先清空
    $("#roleTableBody").empty();

    //获取数据集合
    var list = pageInfo.list;
    //判断list是否有效
    if (list == null || list.length == 0){
        $("#roleTableBody").append("<tr><td colspan='4' style='text-align:center'>没有查询到数据！</td></tr>");
        return ;
    }

    /**
     <tr>
         <td>1</td>
         <td><input type='checkbox'></td>
         <td>PM - 项目经理</td>
         <td>
    <button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>
    <button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>
    <button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>
         </td>
     </tr>
     */
   for (var i = 0 ; i < list.length ; i ++){

       var role = list[i];

       var checkBtn ="<button type='button' class='btn btn-success btn-xs'><i class=' glyphicon glyphicon-check'></i></button>";
       var pencilBtn = "<button type='button' class='btn btn-primary btn-xs'><i class=' glyphicon glyphicon-pencil'></i></button>";
       var removeBtn = "<button type='button' class='btn btn-danger btn-xs'><i class=' glyphicon glyphicon-remove'></i></button>";

       var numberTd = "<td>"+(i+1)+"</td>";
       var checkBoxTd = "<td><input roleid='"+role.id+"' type='checkbox'></td>";
       var roleNameTd = "<td>"+role.name+"</td>";
       var btnTd = "<td>"+checkBtn+pencilBtn+removeBtn+"</td>";

       var tr = "<tr>"+numberTd+checkBoxTd+roleNameTd+btnTd+"</tr>";

       //将前面拼好的HTML代码追加到#roleTableBody中
       $("#roleTableBody").append(tr);
    }

}

generatePageNumNavigator()函数的实现：

<link rel="stylesheet" href="css/pagination.css" />
<script src="jquery/jquery.pagination.js"></script>

//使用pageInfo数据在tfoot标签内显示分页导航条
function generatePageNumNavigator(pageInfo) {
    //调用导航条初始化函数
    initPagination(pageInfo);
}

//声明函数去封装导航条初始化的操作
function initPagination(pageInfo) {

    //声明变量存储分页导航条显示时的属性设置
    var painationProperties= {
        num_edge_entries: 1,            //边缘页数
        num_display_entries: 4,         //主体页数
        callback: pageselectCallback,   //回调函数
        items_per_page: window.pageSize, //每页显示数据数量
        current_page: (window.pageNum - 1) ,//当前页
        prev_text: "上一页",            //上一页文本
        next_text: "下一页",            //下一页文本
    }
    //显示分页导航条
    $("#Pagination").pagination(pageInfo.total,painationProperties);
}

//在每一次点击“上一页”、“下一页”、“页码”时执行这个函数跳转页面
function pageselectCallback(pageIndex, jq){

    //pageIndex是从0开始的，pageNum是从1开始的
    //将全局变量的pageNum修改为最新值
    window.pageNum = pageIndex + 1;

    //调用分页函数重新执行分页
    showPage();

    return false;
}