layui flow流加載，（Bootstrap+jquery+layui）

最近在研究頁面展示方式，以往千篇一律的表格展示，有些單調，偶爾機會瞭解到Layui flow,看看官方文檔用着還是比較簡單的，一下是範例，僅供參考：

1.引入樣式文件：

<link href="../css/lib/bootstrap/bootstrap.css?v=3.3.7" rel="stylesheet">
<link href="../css/lib/font-awesome/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="../css/app/main.css" rel="stylesheet">
<link href="../css/lib/animate.css" rel="stylesheet">
<link href="../js/lib/layer/skin/layer.css" rel="stylesheet">
<link href="../js/lib/layui/css/layui.css" rel="stylesheet">

其中，layui.css爲必須文件，其他可酌情忽略

2.引入相關js:

<script type="text/javascript" src="../js/lib/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../js/lib/layer/layer.min.js"></script>
<script type="text/javascript" src="../js/lib/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/app/util.js"></script>
<script type="text/javascript" src="../js/app/j-extend.js"></script>
<script type="text/javascript" src="../js/lib/layui/layui.all.js"></script>
<script src="../js/app/constant.js"></script>
<script type="text/javascript" src="../js/app/sys/sysAccount.js"></script>

其中.jquery和layui.all.js爲必備文件，其他可酌情忽略，注意先後順序

3.HTML代碼（僅顯示相關代碼）：

<div id="show"></div>

定義div，作爲流展示容器

4.腳本代碼（僅顯示相關代碼）

function loadData() {
    var flow = layui.flow;
    flow.load({
        elem: '#show',//容器ID
        isAuto: true,//是否自動加載下一頁，默認true,反之，需要手動點擊“加載更多”
        end: "<p class='text-disabled'>沒有更多了</p>",//全部加載後的顯示文檔，支持HTML標記
        done: function (page, next) {
            var lis = [];
//自己封裝的標準的$.AJAX請求
            new R('/systemManage/listUser')
                .post({
                    page: page,//以下三項是過濾條件
                    username: jval("#kw"),
                    delFlag: jval("#accountStatus")
                }, function (res) {
                    var result = res.data;
                    var i = 0;
                    var content = "";
                    while (i < result.data.length) {
                       //根據圖片的狀態，顯示不同的圖片樣式
                        var item = result.data[i];
                        var textClass = "text-danger";
                        var photoClass = "disabled";
                        var btnClass = "fa fa-check";
                        var enableBtnText = "啓用";
                        if (item.delFlag === 0) {
                            textClass = "text-success";
                            photoClass = "";
                            btnClass = "fa fa-remove";
                            enableBtnText = "禁用";
                        }
                        //使索引不受分頁影響
                        var index = i + (page - 1) * result.index;
                        content =
                            "<div class='col-md-2 table-bordered' onmouseover='setBottomTipShow(\"" + index + "\")' onmouseout='setBottomTipHidden(\"" + index + "\")'>" +
                            "<p class='topTip " + textClass + " font-bold'>" +
                            item.username +
                            "</p>" +
                            "<img src='" + result.prefix + item.photo + "' class='" + photoClass + "'>" +
                            "<p class='accountCard animated slideInUp hidden text-right h4' id='tip" + index + "'>" +
                            "<i class='btn btn-success fa fa-pencil-square' title='" + SysUser.userList_edit_button + "'>" +
                            "</i>" +
                            "<i class='btn btn-success mgn-left3px " + btnClass + "' title='" + enableBtnText + "'>" +
                            "</i>" +
                            "<i class='btn btn-success mgn-left3px fa fa-refresh' title='" + SysUser.userList_reset_button + "'>" +
                            "</i>" +
                            "</p>" +
                            "</div>";
                        lis.push(content);
                        i++;
                    }
                    next(lis.join(''), page < result.total);
                })
        }
    });
}

單獨放在方法裏，爲了重複使用，這個大部分都是官方範例的固定寫法。

5.1控制器

@PostMapping("/listUser")
@ApiOperation(value = "listUser", notes = "加載用戶列表信息")
@ResponseBody
public Object listUser(LayFlowDto layFlowDto) {
    ResultView<Map<String,Object>> mapResultView=sysUserService.getUserList(layFlowDto);
    return mapResultView;
}

5.2服務實現類

@Override
public ResultView<Map<String, Object>> getUserList(LayFlowDto layFlowDto) {
    ResultView<Map<String, Object>> listResultView = new ResultView<>();
    if (layFlowDto != null) {
//注意此處計算每頁的起始位置，當然可以藉助pageHelper
        layFlowDto.setLimitStart(layFlowDto.getLimitEnd() * layFlowDto.getPage() - layFlowDto.getLimitEnd());

        SysUser sysUser = layFlowDto.copy();
        SysUserExample sysUserExample = new SysUserExample();
        SysUserExample.Criteria criteria = sysUserExample.createCriteria();
        sysUserExample.setLimitStart(layFlowDto.getLimitStart());
        sysUserExample.setLimitEnd(layFlowDto.getLimitEnd());
        if (!StringUtils.isEmpty(sysUser.getUsername())) {
            criteria.andUsernameLike(sysUser.getUsername());
        }
        if (!StringUtils.isEmpty(sysUser.getDelFlag())) {
            criteria.andDelFlagEqualTo(sysUser.getDelFlag());
        }
        sysUserExample.setOrderByClause("username ASC,del_flag ASC");
        List<SysUser> userList = sysUserMapper.selectByExample(sysUserExample);
        int count = sysUserMapper.countByExample(sysUserExample);
        if (BaseUtils.CollectionUtils.isValidList(userList)) {
            Map<String, Object> data = new HashMap<>();
            data.put("prefix", photoUrl + photoPath);
//這個是必須的，前段用於計算是否有下一頁，在前段只有page<total時候，纔會產生下一頁，要用到 Math.ceil這個函數，不要用Math.round，有不瞭解的，查看MATH API
            data.put("total", Math.ceil(new Double(count) / new Double(layFlowDto.getLimitEnd())));
            data.put("data", userList);
//這個非必須，如果你不需要每一頁的精確索引
            data.put("index", layFlowDto.getLimitEnd());
            listResultView.setData(data);
            listResultView.setSuccess();
        }

    }
    return listResultView;
}

5.3 參數類

@Data
public class LayFlowDto extends SysUserDto {
    private int page = 1;//當前頁，必填參數
    private int limitEnd = 24;//每頁顯示數量
    private int limitStart = 0;//起始索引頁

    @Override
    public String toString() {
        return "LayFlowDto{" +
                "page=" + page +
                ", limitStart=" + limitStart +
                ", limitEnd=" + limitEnd +
                '}';
    }
}

SysUserDto 類沒什麼，只是爲了進行篩選而已

6.條件篩選

$("#searchBtn").on("click", function () {
    $("#show").empty();//清除原有的節點數據，不要用.remove()
    loadData();//重新加載
})

最終效果：