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();//重新加载
})

最终效果：