精华内容
下载资源
问答
  • layui分页

    2021-02-21 21:17:47
    layui分页 pagecount是查询出来一共有多少条数据 limit是一页显示多少条数据 controller层 记得用Integer封装一下获取到的page和limit 传到impl层时 写个逻辑 page是1 limit是12 为什么写这样的逻辑 自己再...

    layui分页

    pagecount是查询出来一共有多少条数据
    limit是一页显示多少条数据
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    controller层
    记得用Integer封装一下获取到的page和limit
    在这里插入图片描述
    传到impl层时
    写个逻辑
    page是1 limit是12
    为什么写这样的逻辑
    自己再navicat里写写查询就知道了(我觉得是一看这么写就知道了)
    在这里插入图片描述
    算了还是先看图
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    page是页数 1 2 3…这样传到后台的
    第一条数据实际上是第0条数据(想想数组arr[0]是第一个值)
    limit 0,10 从第0条开始查 查10条
    第二页就是从第11条,但其实是第10条开始查,又是10条
    然后20条开始查,30条开始查…
    所以(page-1)*10是每页开始查第一条数据的排序码
    这样page和limit就变身为pageIndex和pageSize啦
    dao层啦
    用@Param定义一下pageIndex和pageSize的参数名,建议就是pageIndex和pageSize(见图)嘿嘿 , 不会乱
    在这里插入图片描述
    mapping层
    看红框, 没错, 就是对应定义的参数名
    在这里插入图片描述

    代码

    <%@ page language="java" contentType="text/html; charset=UTF-8"
             pageEncoding="UTF-8" %>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../sources/layui/css/layui.css" media="all">
        <script src="../sources/layui/layui.js"></script>
        <script type="text/javascript" src="../sources/js/jquery.js"></script>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
    </head>
    <body>
    <div class="demoTable">
        搜索用户名:
        <div class="layui-inline">
            <input class="layui-input" name="userName" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <form class="layui-form" action="" id="addForm" style="display:none">
        <div class="layui-form-item" style="margin-top: 5%">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" id="userName" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" id="userPhone" required lay-verify="required" placeholder="请输入手机号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户状态</label>
            <div class="layui-input-inline">
                <input type="text" id="userStatus" required lay-verify="required" placeholder="用户状态" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">座位</label>
            <div class="layui-input-inline">
                <input type="text" id="seatName" required lay-verify="required" placeholder="座位" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">座位状态</label>
            <div class="layui-input-inline">
                <input type="text" id="seatStatus" required lay-verify="required" placeholder="座位状态" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">账户状态</label>
            <div class="layui-input-inline">
                <input type="text" id="accStatus" required lay-verify="required" placeholder="账户状态" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">余额</label>
            <div class="layui-input-inline">
                <input type="text" id="balance" required lay-verify="required" placeholder="余额" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" onclick="adds()">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button type="button" class="layui-btn layui-btn-sm" id="add" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">更新</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script src="../sources/layui/layui.js" charset="utf-8"></script>
    <script type="text/html" id="switchTpl">
        <input type="checkbox" name="{{d.accStatus}}" value="{{d.id}}" lay-skin="switch" lay-text="包月|包时" lay-filter="sexDemo" {{ d.accStatus == 'true' ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="checkboxTpl">
        <input type="checkbox" name="userStatus" value="{{d.id}}" title="自习中" lay-filter="lockDemo" {{ d.userStatus == 'true' ? 'checked' : '' }}>
    </script>
    <script>
        layui.use('table', function () {
            var table = layui.table
                ,form = layui.form;
            var pagecount;
            page();
            function page() {
                jQuery.ajax({
                    url: 'user/selectCount',
                    dataType: 'json',
                    type: 'get',
                    async:false,
                    success: function(data) {
                        pagecount = data.count;
                        // console.log(pagecount);
                    }
                });
            }
            table.render({
                elem: '#test'
                , url: 'user/selectAll' //改成我们使用的servlet
                , method: "get"
                , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '用户数据表'
                , cols: [
                    [
                        {type: 'checkbox', fixed: 'left'}
                        // , {field: 'id', title: 'ID', width: 70, fixed: 'left', unresize: true, sort: true, align: 'center'}
                        , {field: 'userName', title: '用户名', width: 150, edit: 'text', align: 'center', unresize: true, sort: true}
                        , {field: 'userPhone', title: '手机号', width: 150, edit: 'text', align: 'center', unresize: true, sort: true}
                        , {field: 'userStatus', title: '自习状态', width: 170, align: 'center', unresize: true, sort: true, templet: '#checkboxTpl'}
                        , {field: 'seatName', title: '座位', width: 150, edit: 'text', align: 'center', unresize: true, sort: true}
                        , {field: 'accStatus', title: '账户状态', width: 150, align: 'center', unresize: true, sort: true, templet: '#switchTpl'}
                        , {field: 'balance', title: '余额', width: 150, edit: 'text', align: 'center', unresize: true, sort: true}
                        , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120, align: 'center'}
                    ]
                ]
                , id: 'testReload'
                , page: true
                , limit: 12
                , response: {
                    statusName: 'status'
                    , dataName: 'rows'
                }
                , parseData: function (res) {
                    // console.log(res);
                    return {
                        "status": res[0].status,
                        "message": res[1].message,
                        "count": pagecount,
                        "rows": res[3].rows.item
                    };
                }
            });
            //监听账户状态
            form.on('switch(sexDemo)', function(){
                var id = this.value;
                var accStatus = this.name;
                console.log(id);
                console.log(accStatus);
                $.ajax({
                    type: "get",
                    url: "user/updateAccStatus",
                    data: {
                        "id": id,
                        "accStatus":accStatus
                    },
                    cache: false,
                    async: true,
                    success: function () {
                        layer.msg('修改成功', { icon: 1, offset: "t", time:2000 });
                    },
                    error: function () {
                        layer.msg('修改失败', { icon: 2, offset: "t", time:2000 });
                    }
                });
            });
            //监听自习状态
            form.on('checkbox(lockDemo)', function(){
                var id = this.value;
                var userStatus = this.checked;
                $.ajax({
                    type: "get",
                    url: "user/updateUserStatus",
                    data: {
                        "id": id,
                        "userStatus":userStatus
                    },
                    cache: false,
                    async: true,
                    success: function () {
                        layer.msg('修改成功', { icon: 1, offset: "t", time:2000 });
                    },
                    error: function () {
                        layer.msg('修改失败', { icon: 2, offset: "t", time:2000 });
                    }
                });
            });
            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');
                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            userName: demoReload.val()//adminName的value
                        }
                    }, 'data');
                }
            };
            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //头工具栏事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    case 'add':
                        add();
                        break;
                    case 'getCheckData':
                        var data = checkStatus.data;
                        layer.alert(JSON.stringify(data));
                        break;
                    case 'getCheckLength':
                        var data = checkStatus.data;
                        layer.msg('选中了:'+ data.length + ' 个');
                        break;
                    case 'isAll':
                        layer.msg(checkStatus.isAll ? '全选': '未全选')
                        break;
                };
            });
            function add() {
                //让添加框弹出来
                layer_index = layer.open({
                    type: 1,  //可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
                    title: "添加房间", //数组第二项可以写任意css样式;如果你不想显示标题栏,你可以title: false
                    area: ['400px', '500px'], //所打开页面大小
                    content: $("#addForm"), //内容
                    cancel: function () {
                        layer.close(layer_index);
                        $("#addForm")[0].reset();
                    }
                });
            }
            //让添加框弹出来
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                // console.log(obj);
                var id = data.id;
                //console.log(id);
                if (obj.event === 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            type: "get",
                            url: "user/deleteById",
                            data: {"id": id},
                            cache: false,
                            async: true,
                            success: function () {
                                layer.msg("删除成功", { icon: 1, offset: "auto", time:2000 });
                            },
                            error: function () {
                                layer.msg("删除失败", { icon: 2, offset: "auto", time:2000 });
                            }
                        });
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    $.ajax({
                        type: "get",
                        url: "user/update",
                        data: data,
                        cache: false,
                        async: true,
                        success: function () {
                            layer.msg("更新成功", { icon: 1, offset: "auto", time:2000 });
                        },
                        error: function () {
                            layer.msg("更新失败", { icon: 2, offset: "auto", time:2000 });
                        }
                    });
                }
            });
        });
        function adds() {
            var data = {
                "userName": $("#userName").val(),
                "userPhone": $("#userPhone").val(),
                "userStatus": $("#userStatus").val(),
                "seatName": $("#seatName").val(),
                "accStatus": $("#accStatus").val(),
                "balance": $("#balance").val()
            };
            $.ajax({
                type: "get",
                url: "user/insert",
                data: data,
                cache: false,
                async: true,
                success: function () {
                    layer.msg("添加成功", { icon: 1, offset: "auto", time:2000 });
                },
                error: function () {
                    layer.msg("添加失败", { icon: 2, offset: "auto", time:2000 });
                }
            });
        }
    </script>
    </body>
    </html>
    

    controller层

        @ResponseBody
        @RequestMapping(value = "selectAll", method = RequestMethod.GET, produces = "text/json;charset=utf-8")
        public String selectAll(HttpServletRequest request,User user) throws Exception {
            request.setCharacterEncoding("utf-8");
            String pageString = request.getParameter("page");
            String limitString = request.getParameter("limit");
            Integer page = Integer.valueOf(pageString);
            Integer limit = Integer.valueOf(limitString);
            List<User> userData = userService.selectAll(user,page,limit);
            String[] column = {"id", "userName", "userPhone", "userStatus", "seatName", "accStatus", "balance"};
            String data = ObjtoLayJson.ListtoJson(userData, column);
    //        System.out.println(data);
            return data;
        }
        @ResponseBody
        @RequestMapping(value = "selectCount", method = RequestMethod.GET, produces = "text/json;charset=utf-8")
        public String SelectCount(HttpServletRequest request) throws Exception {
            request.setCharacterEncoding("utf-8");
            int count = userService.selectCount();
            String data = String.valueOf(count);
            String countData= "{"+"\"count\":"+data+"}";
            return countData;
        }
    

    impl层

    @Override
        public List<User> selectAll(User user,int page,int limit) {
            int pageIndex = (page-1) * limit;
            int pageSize = limit;
            return this.userMapper.selectAll(user,pageIndex,pageSize);
        }
    

    dao层(mapper层)

    List<User> selectAll(@Param("user") User user, @Param("pageIndex") int pageIndex, @Param("pageSize") int pageSize);
    

    mapping层(重点是limit呀喂)

    <select id="selectAll" resultMap="BaseResultMap" parameterType="java.lang.Integer">
            select
            <include refid="Base_Column_List"/>
            from t_user
            where 1 = 1
            <if test="user.userName != null and user.userName !=''">
                and userName like concat( '%', #{user.userName}, '%')
            </if>
            order by id desc
            limit #{pageIndex},#{pageSize};
        </select>
        <select id="selectCount" resultType="java.lang.Integer">
       SELECT count(*) FROM t_user;
      </select>
    

    以上为学习期间的学习笔记

    展开全文
  • 前端代码写文章value="$!{title}"class="layui-input"style="border-radius: 10px"autocomplete="on"type='search'>搜索#foreach($e in $feeds) class="layui-nav-img">$e.tit...

    前端代码

    写文章

    value="$!{title}"

    class="layui-input"

    style="border-radius: 10px"

    autocomplete="on"

    type='search'

    >

    搜索

    #foreach($e in $feeds)

    %24e.creator.80x80.jpg

    class="layui-nav-img">

    $e.title

    $!e.creatorNickName

    $date.format("yyyy-MM-dd HH:mm:ss",$e.gmtCreate)

    $e.answer

    #end

    .layui-layedit {

    border-width: 0px;

    border-style: solid;

    border-radius: 2px;

    }

    $(function () {

    $('#search-btn').on('click', () => {

    var title = $('#searchText').val()

    location.href = '/?title=' + title;

    });

    layui.use('layedit', function () {

    layedit = layui.layedit;

    #foreach($e in $feeds)

    layedit.build('answer-$e.id', {height: 600, tool:[]});

    #end

    });

    var laypage = layui.laypage

    //完整功能

    laypage.render({

    elem: 'pagination'

    , count: $total //数据总数,从服务端得到

    , limit: $pageSize

    , curr: $pageNum

    , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']

    , jump: function (obj, first) {

    //obj包含了当前分页的所有参数,比如:

    console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。

    console.log(obj.limit); //得到每页显示的条数

    //首次不执行

    if (!first) {

    //do something

    var title = $('#searchText').val()

    var href = '/?title=' + title;

    href += '&pageNum=' + obj.curr;

    href += '&pageSize=' + obj.limit;

    console.log(href)

    location.href = href;

    }

    }

    });

    })

    后端 Controller 代码

    @GetMapping("/")

    @VelocityLayout("/velocity/layout/index.vm")

    fun root(@RequestParam(value = "title", required = false) title: String?,

    @RequestParam(value = "pageNum", defaultValue = "1", required = false) pageNum: Int,

    @RequestParam(value = "pageSize", defaultValue = "10", required = false) pageSize: Int,

    model: Model): String {

    model.addAttribute("feeds", KnowledgeService.page(title, pageNum, pageSize).list)

    model.addAttribute("total", KnowledgeService.page(title, pageNum, pageSize).total)

    model.addAttribute("pageNum", pageNum)

    model.addAttribute("pageSize", pageSize)

    model.addAttribute("title", title)

    return "index"

    }

    @Service

    @Qualifier("KnowledgeServiceImpl")

    class KnowledgeServiceImpl : KnowledgeService {

    override fun page(title: String?, currentPage: Int, limit: Int): PageInfo {

    val orderBy = "id desc"//按照排序: 字段 倒序/排序

    PageHelper.startPage(currentPage, limit, orderBy)

    val list = search(title)

    return PageInfo(list)

    }

    override fun search(title: String?): MutableList {

    if (StringUtils.isEmpty(title)) {

    return KnowledgeMapper.listAll()

    } else {

    return KnowledgeMapper.searchByTile(title)

    }

    }

    @Autowired lateinit var KnowledgeMapper: KnowledgeMapper

    }

    package com.alibaba.microtek.mapper.microtek;

    import com.alibaba.microtek.model.microtek.Knowledge;

    import org.apache.ibatis.annotations.ResultMap;

    import org.apache.ibatis.annotations.Select;

    import org.jetbrains.annotations.NotNull;

    import org.jetbrains.annotations.Nullable;

    import java.util.List;

    public interface KnowledgeMapper {

    int deleteByPrimaryKey(Long id);

    int insert(Knowledge record);

    int insertSelective(Knowledge record);

    Knowledge selectByPrimaryKey(Long id);

    int updateByPrimaryKeySelective(Knowledge record);

    int updateByPrimaryKey(Knowledge record);

    @Select("SELECT * FROM knowledge WHERE title = #{title} limit 1")

    @ResultMap("BaseResultMap")

    Knowledge selectByTitle(String title);

    @Select("SELECT * FROM knowledge")

    @ResultMap("BaseResultMap")

    List listAll();

    @Select("SELECT * FROM knowledge where title like concat('%', #{title}, '%')")

    @ResultMap("BaseResultMap")

    List searchByTile(String title);

    @Select("SELECT count(*) FROM knowledge WHERE whos = #{url}")

    int countByUrl(String url);

    }

    效果:

    2de50805709f85bbc945723c1a966ba8.png

    image.png

    源代码工程在这里:

    请不吝您的 Star 哦.

    展开全文
  • 解决LayUI分页中checkbox的缓存问题

    千次阅读 2019-08-21 00:02:01
    本篇博客主要讲解的是如何解决LayUI分页中checkbox的缓存问题,首先配合图文简单概述一下会出现的问题。 上图显示的是指定班级下的全部学生概要信息,从图中可以看出该班下一共有三名学生,每页显示两条学生概要...

    本篇博客主要讲解的是如何解决LayUI分页中checkbox的缓存问题,首先配合图文简单概述一下会出现的问题。

    上图显示的是指定班级下的全部学生概要信息,从图中可以看出该班下一共有三名学生,每页显示两条学生概要信息,则第三名学生的概要信息就会出现在第二页。紧接着问题就出现了,LayUI分页的checkbox目前没有现成的缓存功能,所以就会导致一个问题。假定我想选中三名学生的信息进行导出操作,这时我第一页的ckeckbox处在一个全选的状态,翻到第二页的时候,分页进行了重载,根据checkbox收集的学生id就会消失,与原意愿不相符。现在我希望在第一页全选后,翻到第二页重载时缓存先前的checkbox选项,并且在返回第一页时,根据缓存判断checkbox是否应该被check,被移除也是同理。

    在描述过问题后,说一下思路,核心就是声明全局变量用来缓存checkbox的操作。

    	var quanju = new Array();//全局
    	var huancun = new Array();//缓存

    并且在分页的done属性中编写函数,让它每次重载分页时根据全局变量对checkbox进行默认的选中操作,移除同理。

    done: function(res, curr, count){
                    //数据表格加载完成时调用此函数
                    //如果是异步请求数据方式,res即为你接口返回的信息。
    
                        //设置全部数据到全局变量
                        quanju=res.data;
     
                        //在缓存中找到id ,然后设置data表格中的选中状态
                        //循环所有数据,找出对应关系,设置checkbox选中状态
                        for(var i=0;i< res.data.length;i++){
                            for (var j = 0; j < huancun.length; j++) {
                                //数据id和要勾选的id相同时checkbox选中
                                if(res.data[i].studentno == huancun[j])
                                {
                                    //这里才是真正的有效勾选
                                    res.data[i]["LAY_CHECKED"]='true';
                                    //找到对应数据改变勾选样式,呈现出选中效果
                                    var index= res.data[i]['LAY_TABLE_INDEX'];
                                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                }
                            }
                        }
                        //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
                      	//设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
    					var checkStatus = table.checkStatus('studentTable');//这里的studentTable是指分页中的id
    
                        if(checkStatus.isAll){//是否全选
                            //layTableAllChoose
                         $('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', true);//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
                         $('.layui-table th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
                        }
    			}

    以上是解决问题的思路和方法,下面附上全部的代码。

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="edit">详细信息</a>
    </script>
    
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选中导出学生详细信息</button>
    	</div>
    </script>
    
    <script type="text/javascript">
    	//一般直接写在一个js文件中
    	layui.use([ "table" ], function(args) {
    		var layer = layui.layer, table = layui.table;
    		var quanju = new Array();//全局
    		var huancun = new Array();//缓存
    		
    		table.render({
    			elem : '#tab',//需要被渲染的标签,此处使用id选择器指定,#为id,#后面的值是table中id属性的值
    			url : 'slectStudent.controller',//ajax的请求地址
    			method : 'post',//ajax请求时使用的方式
    			limit : 2,//默认初始分页条数
    			page : true,//是否分页
    			toolbar : '#toolbarDemo',
    			defaultToolbar:[''],//layui提供的toolbar方法,使toolbar工具条右侧的三个工具按钮不可见
    			limits : [ 2, 5, 10, 50, 100 ],//分页每页条数的可选项
    			text : {
    				none : '没有找到您要找学生'
    			},//当没有查询到结果时显示的提示文字
    			autoSort : true,//是否开启自动排序
    			width : 1109,//表格的宽度
    			cols : [ [ //每列对应的数据
    			{
    				type : 'checkbox'
    			}, //为第一行添加一个复选框
    			{
    				title : '序号',
    				type : 'numbers',
    				width : 150
    			}, {
    				field : 'studentname',
    				width : 150,
    				title : '姓名'
    			}, {
    				field : 'sex',
    				width : 150,
    				title : '性别'
    			}, {
    				field : 'age',
    				width : 150,
    				title : '年龄'
    			}, {
    				field : 'diploma.diplomaname',
    				width : 150,
    				title : '学历',
    				templet:function(data){
    					return data.diploma.diplomaname;
    					}
    			}, {
    				field : 'state',
    				width : 150,
    				title : '状态',
    				templet : function(data) {
    					if (data.state == '01') {
    						return "在读";
    					} else if (data.state == '02') {
    						return "毕业"
    					} else if (data.state == '03') {
    						return "就业"
    					} else if (data.state == '04') {
    						return "休学"
    					}
    				}
    			}, {
    				fixed : 'right',
    				width : 150,
    				title : '操作',
    				toolbar : '#barDemo'
    			} ] ],
    			id : 'studentTable',//这个table.render渲染模块的id,和网页无关,将用于其他js模块
    			done: function(res, curr, count){
                    //数据表格加载完成时调用此函数
                    //如果是异步请求数据方式,res即为你接口返回的信息。
    
                        //设置全部数据到全局变量
                        quanju=res.data;
     
                        //在缓存中找到id ,然后设置data表格中的选中状态
                        //循环所有数据,找出对应关系,设置checkbox选中状态
                        for(var i=0;i< res.data.length;i++){
                            for (var j = 0; j < huancun.length; j++) {
                                //数据id和要勾选的id相同时checkbox选中
                                if(res.data[i].studentno == huancun[j])
                                {
                                    //这里才是真正的有效勾选
                                    res.data[i]["LAY_CHECKED"]='true';
                                    //找到对应数据改变勾选样式,呈现出选中效果
                                    var index= res.data[i]['LAY_TABLE_INDEX'];
                                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
                                    $('.layui-table tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
                                }
                            }
                        }
                        //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
                      	//设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
    					var checkStatus = table.checkStatus('studentTable');//这里的studentTable是指分页中的id
    
                        if(checkStatus.isAll){//是否全选
                            //layTableAllChoose
                         $('.layui-table th[data-field="0"] input[type="checkbox"]').prop('checked', true);//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
                         $('.layui-table th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');//data-field值默认为0,如果在分页部分自定义了属性名,则需要改成对应的属性名
                        }
    			}
    		});//渲染结束
    
    
            //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
            table.on('checkbox(test)', function (obj) {
               if(obj.checked==true){
                   if(obj.type=='one'){
                       huancun.push(obj.data.studentno);
                  }else{
                       for(var i=0;i<quanju.length;i++){
                           huancun.push(quanju[i].studentno);
                       }
                   }
               }else{
                   if(obj.type=='one'){
                       for(var i=0;i<huancun.length;i++){
                          if(huancun[i]==obj.data.studentno){
                			  removeByValue(huancun,huancun[i]);//调用自定义的根据值移除函数
                           }
                      }
                   }else{
                       for(var i=0;i<huancun.length;i++){
                           for(var j=0;j<quanju.length;j++){
                               if(huancun[i]==quanju[j].studentno){
                            	   removeByValue(huancun,+huancun[i]);//调用自定义的根据值移除函数
                              }
                           }
                       }
                   }
               }
            });
    		
    
    		var $ = layui.$, active = {
    			reload : function() {
    				var gradeid = $('#gradeid').val();//输入框
    				var studentname = $('#studentname').val();//输入框
    				var idcard = $('#idcard').val();//输入框
    				//执行重载
    				table.reload('studentTable', {//重新渲染“gamesTable”表格 此处联动"table.render"的id属性 
    					page : {
    						curr : 1
    					},//设置页码为1,  重新从第 1 页开始
    					url : 'slectStudent.controller',//请求的路径
    					where : {
    						//请求时传递的附带值,此处默认传递两个值:“limit(页面尺寸)”,“page(当前页码)”
    						gradeid : gradeid,
    						studentname : studentname,
    						idcard : idcard,
    					}
    				});
    			}
    		};
    
    		$('.seach').on('click', function() {
    			var type = $(this).data('type');
    			active[type] ? active[type].call(this) : '';
    		});
    		
    		table.on('tool(test)', function(obj) {
    			var data = obj.data;
    			if (obj.event === 'edit') {//此处的‘del’,对应javascript标签中“lay-event”的值
    				layer.open({
    					type : 2,
    					content : 'dostudentinfo.controller?studentno='
    							+ data.studentno,// 文本值,如果type是2,则是网页路径
    					resize : true,
    					end : function() {
    						table.reload('studentTable');
    					},
    					area : [ '1400px', '800px' ]
    				});
    			}
    		});
    
    		//头工具栏事件
    		table.on('toolbar(test)', function(obj) {
    			var checkStatus = table.checkStatus(obj.config.id);
    			switch (obj.event) {
    			case 'getCheckData'://导出事件
    				
    				if(huancun.length<1||huancun==""){
    					alert("请选择导出信息!");
    					return false;
    				}
    				var a = huancun;
    				var studentIdList = a.join(",");
    				var del = layer.confirm('请确认是否导出选中的学生信息?'+studentIdList,
    						function(index) {
    							// ajax代码
    							window.location.href= "execelOut.controller?studentIdList="+studentIdList;
    							layer.close(index);
    						});
    				break;
    			}
    		});
    
            //自定义方法,根据值去移除
    		 function removeByValue(arr, val) {
    			   for(var i = 0; i < arr.length; i++) {
    			    if(arr[i] == val) {
    			     arr.splice(i, 1);
    			     break;
    			    }
    			   }
    			  }
    	});
    </script>

    以上就是解决checkbox缓存问题的解决方法。

    在这里解释一下,虽然LayUI的toolbar工具条自带页面内容的导出功能,但是不符合项目需求,因为我要在这个学生概要信息页面中,根据学生的id去数据库多表连接查询一系列的学生详细信息进行导出,所以并没有使用LayUI工具条中自带的导出功能。导出部分使用POI后台操作,POI的开发和使用文档已经上传过。已经附在博客上,文档十分详细,如果有需要的可以参考POI的开发和使用文档。

    展开全文
  • SSM框架 layui分页

    2019-03-28 15:03:53
    layui的table组件,实现分页。 常用的分页方式:前端每跳转至一个分页,就会发送一个分页请求,后台将该页的数据查询到,然后返回给前端,前端获取数据再显示。(分页不是说后台将全部的数据查询到,然后全部传给...

    layui的table组件,实现分页。

    常用的分页方式:前端每跳转至一个分页,就会发送一个分页请求,后台将该页的数据查询到,然后返回给前端,前端获取数据再显示。(分页不是说后台将全部的数据查询到,然后全部传给前端,而是前端要显示哪一页,再去向后台请求哪一页的数据,后台再返回给前端。)

    web前端框架有很多,这些框架的列表分页多少会有些不同,但是还是会有相同的部分(关键部分):分页的重要元素。

    重要元素:当前页码(第几页)、每页大小(能显示多少条数据)、总数据条数。

     

    本文讲的是Layui前端框架的分页。

    下面介绍列表分页的基本实现,若要了解列表更多的样式和功能,官方资料地址:https://www.layui.com/doc/modules/table.html

    html中表格

    这里只是定义了表格,具体表格的渲染交给js完成。

    <table id="billList" class="layui-table" lay-even lay-filter="test"></table>

    js文件中

    table的渲染中除了如下代码里的各种元素外,比如id、width,url等等,还有一些元素(参考官方地址)。

    每次分页请求都会是 url: /bill/billList     请求参数是pageNumber(页码) 和 pageLimit(页大小)。

    说一下:autoSort: true。 自动排序,所谓自动排序,就是前端来排序,排序规则就是:如果是数值,那就按大小排序,如果是字母,那就按a~Z 顺序来排。

    autoSort: false。 就是禁止自动排序,此时要想排序,就只能发送相关参数给后台,后台按照排序来查询数据,返回排好序的数据给layui显示,以此达到排序的效果,那么就需要在js文件里 添加排序的代码,代码的作用是:获取要排序的字段名,排序方式(举个例,升序,降序,还是某种序,反正就是个名字标识,后台代码能够相应的识别就行),重新加载表格。

    var table = layui.table;
    
        //执行渲染
        table.render({
            elem: '#billList' //指定原始表格元素选择器(推荐id选择器)
            ,id: 'list'
            ,height: 523 //容器高度
            ,width:1200
            ,cols: [[
                {title:'账单编码', field:'orderCode', fixed:'left', sort:'true'}
                ,{title:'商品名称', field:'goodsName'}
                ,{title:'供应商', field:'supplierName'}
                ,{title:'账单金额', field:'sum', sort:'true'}
                ,{title:'是否付款', field:'isPay'}
                ,{title:'创建时间', field:'optt', sort:'true'}
                ,{title:'操作人', field:'optp'}
                ,{title:'操作', fixed:'right'}
                ]] //设置表头
            ,url: '/bill/billList'
            ,method: 'post'
            ,page: {
                first: '1'
                ,limit: '4'
                ,limits: [4,8]
            }
            ,loading: true
            ,text:{
                none: '数据为空'
            }
            ,request:{
                pageName: 'pageNumber'
                ,limitName: 'pageLimit'
            }
            ,autoSort: true //点击列的表头排序符,false,前端就不会去排序了,而是table.on的方法去请求后台返回排好序的数据,然后直接显示,true时,那么前端就会自动
            //去排序,不需要请求后台了,当需要复杂排序时,可用后台,简单排序,前台足够了
    
        });

     

    后台controller层代码如下:

    PageData类是自定义的一个封装类,用于接收pageNumber 和 pageLimit参数。 返回值 是 ResultData<T> 类型的值。

    @Controller
    @RequestMapping("/bill")
    public class BillController extends BaseController {
        @Autowired
        public BillService billService;
    
        @RequestMapping(value = "/billList", method = RequestMethod.POST)
        @ResponseBody
        public ResultData<List<TOrders>> findList(PageData pageDate){
            System.out.println("hello start");
            return billService.findList(pageDate);
        }
    }

     

    ResultData<T> 的代码如下: 为什么ResultData<T> 要如此定义呢 ?不是随便定义的,是根据layui框架需要返回的参数而定的,如果不这么定义,那么layui无法解析后台返回的数据,那也就无法正确的分页了(甚至无法分页)。

    code是状态,成功还是失败。

    msg是信息。

    count是总记录条数。

    data是要显示在列表中的数据。

    private int code=0;
    
        private String msg = "";
    
        private int count;
    
        private T data;

    pageData类的代码如下:

    //请求当前第几页的列表数据
        private int pageNumber;
        //每一页显示多少条记录
        private int pageLimit;

    pageDataOfMybatis类代码如下:  为什么要定义这个类呢? 试想,我们拿到“页码”和“页大小”去数据库查询数据,写sql语句 通过limit start, size 关键语句进行查询,意思就是 从第start条开始,往后获取size条记录。那么就需要start (从第几条记录开始)和 size(获取多少条记录) ,而pageData中的pageNumber不能直接用,要转换一下,转换成 pageDataOfMybatis

    private int startNum;
        private int pageSize;

     转换方法:

    public static PageDataOfMybatis handle(PageData pageData){
            PageDataOfMybatis pageDataOfMybatis = new PageDataOfMybatis();
            pageDataOfMybatis.setStartNum((pageData.getPageNumber()-1)*pageData.getPageLimit());
            pageDataOfMybatis.setPageSize(pageData.getPageLimit());
            return pageDataOfMybatis;
        }

    好,基本处理完了!还有最后一点点

    将pageDataOfMybatis作为参数,去执行sql语句,sql语句根据自己的业务,自己写吧。

    要写两个sql,一个sql查询列表要显示的数据,另一sql查询总记录数。

    查询到了之后,封装成一个ResultData<T> 对象,通过controller层返回给前端,layui就一定能正确地显示出来了。

    展示一下demo结果:

    展开全文
  • jsp嵌入视频和layui分页操作

    千次阅读 2019-07-15 23:15:58
    jsp页面直接嵌入就行,src地址你也可以换成你自己服务器上的地址 通过访问 <embed src=... layui分页操作 引入css js文件 ...
  • LayUI分页基于ASP.NET MVC

    2019-06-21 02:52:00
    今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 https://www.layui.com/doc/modules/table.html 方便...
  • , {field: 'createtime', width: '200', title: '创建时间', templet: "<div>{{layui.util.toDateString(d.createtime, 'yyyy-MM-dd')}}</div>"} // , {field: 'price', title: '操作', width: 100, align: '...
  • 最近项目用到了layui,刚接触这玩意看的是一脸懵逼。不过还好,功夫不负有心人,勉勉强强的还是做出来了,为了伙伴们可以不用花费太多时间去自己琢磨,下面会尽量去多加些啰嗦的注释。 直接上代码。 HTML <!...
  • Layui表格排序例子

    千次阅读 2019-07-01 17:20:48
    // 对原始数据进行排序处理   var dataNew = obj.type ? layui.sort(dataTemp, obj.field, obj.type === 'desc') : dataTemp;   // reload表格   tableIns = table.reload('test', {   initSort: ...
  • layui表格Data模式下(全部数据排序)非当前分页排序layui表格Data模式下(全部数据排序)非当前分页排序 layui版本为2.5.4 layui表格Data模式下(全部数据排序)非当前分页排序 // 自定义排序 table.on('sort(' ...
  • layui后台分页

    2021-04-26 17:25:39
    layui后台分页前端index.html后端1.返回数据类2.分页controller类3.分页service类展示 前端 index.html <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &...
  • layui的默认排序排序当前页,如何给所有的数据排序呢? 首先在table实例中关闭自动排序 接下来就是自己设定排序规则: //监听排序 设置排序规则 table.on('sort(test)', function(obj){ table.reload('a', { ...
  • * 数据排序 * _data 要排序的数据 * _field 要排序的字段 * _type 排序方式true正序,false倒序 */ function arraySort(_data,_field,_type){ if(typeof(_data) == 'object'){ if(_type){ _data.sort...
  • layui表格分页 记录勾选

    千次阅读 2019-06-10 09:51:52
    layui 分页之后没有记录之前勾选项的功能 , 自己写了一个 , 主要点就是表格的done 函数 ,每次渲染完成之后做表格勾选操作。然后需要一个全局变量记录所有已经勾选的项 。下面是自己的代码 。 首先,监听表格的复...
  • JavaWeb使用layui实现分页

    千次阅读 2019-06-17 19:47:09
    JavaWeb使用layui实现分页 【1】视图层 <link href="/Content/layui/css/layui.css" rel="stylesheet" /> <div class="layui-card-body layui-table-body layui-table-main"> <table class=...
  • layui实现整体排序

    千次阅读 2018-07-31 09:22:00
    一般情况下layui分页只是在某一页按照某个字段进行排序,下面方法可以实现整体排序 转载于:https://www.cnblogs.com/wfc139/p/9394128.html
  • <html class="x-admin-sm"> <head> <meta charset="UTF-8"> <title>欢迎页面-X-admin2.2</title> <meta name="renderer" content="webkit"> <... &l..
  • <div type="button" class="layui-btn" id="attendexport"><i class="layui-icon">导出Excel表</i></div> <table class="layui-hide" id="attendanceTable" lay-filter="attendanceTable"> requirejs...
  • layui实现整体排序1

    2018-07-31 09:25:00
    一般情况下layui分页只是在某一页按照某个字段进行排序,下面方法可以实现整体排序 转载于:https://www.cnblogs.com/wfc139/p/9394143.html
  • 在项目中,使用layui.table实现数据显示,有排序的需求,但是发现layui.table自带的排序分页的情况下,只能对当前分页进行排序,而不是全表排序…… 那么如果能对表格排序按钮的点击事件进行监听大概就能实现了 ...
  • layui table分页查询

    2019-04-18 09:01:40
    开发工具与关键技术: MVC 作者:彭水清 撰写时间:2019/4/19 首先呢,我得先说明LayuiTablePage、LayuiTableData这三个我自定义的类,LayuiTablePage这个类中有page(代表当前页码...}(分页开始序号)、public...
  • 使用 layui 后端分页的实例

    千次阅读 2018-05-28 23:17:00
    前端代码 &lt;div class="layui-fluid" style="margin: 1em 1em 0em 0em;...layui-row layui-col-space15"&gt; &lt;div class="layui-col-md12" style="te
  • 本次说一下layui分页的实例,首先先引入layui,那是肯定的。 效果图: 引入一个maven依赖: pagehelper这个插件很方便,让我们写分页sql时只写查询就行。自动封装分页的一些sql,如:自动增加imit,自动count总数等...
  • //角色管理 table.render({ elem: '#system_role_list' ,url:'/system/approverconfig/queryGridList.action' //请求接口数据 ,cols: [[ {type: 'numbers', title: '序号', align: '...//隐藏分页 } } });
  • layui是一个前端 UI 框架,内置了js代码,所以我们可以直接使用内置的分页 首先要用到layui的官网手册https://www.layui.com/ 1.进入手册页面的 ”示例“ 2.在示例中找到 “数据表格” -> “开启分页” ->...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 799
精华内容 319
关键字:

layui分页排序