>  기사  >  웹 프론트엔드  >  Layui의 데이터 테이블 및 페이징 구현 방법

Layui의 데이터 테이블 및 페이징 구현 방법

尚
앞으로
2020-06-11 17:25:424911검색

Layui의 데이터 테이블 및 페이징 구현 방법

1. 프론트엔드 부분

html에는 ID가 있는 div만 넣으면 됩니다. 이는 js가 렌더링 영역을 얻는 데 편리합니다.

<div id="data_grid" lay-filter="demo" ></div>  

js 부분에서는 URL에 주의해야 합니다. 비동기 데이터 인터페이스로 테이블을 렌더링한 후 콜백 함수가 완료되었습니다

table.render({
            elem: &#39;#data_grid&#39;
            //,width: 900
            //,height: 274
            ,cols: [[ //标题栏
                {field: &#39;id&#39;, title: &#39;ID&#39;, width: 80, sort: true}
                ,{field: &#39;username&#39;, title:&#39;用户名&#39;,width: 100} //空列
                ,{field: &#39;password&#39;, title: &#39;密码&#39;, width: 120}
                ,{field: &#39;gender&#39;, title: &#39;性别&#39;, width: 150}
                ,{field: &#39;nichen&#39;, title: &#39;昵称&#39;, width: 150}
                ,{field: &#39;birthday&#39;, title: &#39;出生年月&#39;, width: 120}
                ,{fixed: &#39;right&#39;, width: 215,align:&#39;center&#39;, toolbar: &#39;#barDemo&#39;}
            ]]
            ,url:url
            ,skin: &#39;row&#39; //表格风格
            ,even: true
            ,page: true //是否显示分页
            ,limits: [3,5,10]
            ,limit: 5 //每页默认显示的数量
            ,done:function(res){
                userPage.data = res.data;
            }
            //,loading: false //请求数据时,是否显示loading
        }); 

조건에 따라 쿼리하면 테이블이 비동기식으로 새로 고쳐집니다. 첨부된 매개변수는 어디에 있습니까

$(&#39;#sub_query_form&#39;).on(&#39;click&#39;,function () {
        var queryPo = page.formToJson($(&#39;#query_form&#39;).serialize());
        var table = layui.table;
        table.reload(&#39;data_grid&#39;, {
            url: &#39;/getUserList.action&#39;,
            page:{
                curr:1  //从第一页开始
            },

            method:&#39;post&#39;,
            where:{
                queryStr:queryPo
            },
            done:function (res) {
                userPage.data = res.data;
            }
        });
    }); 

x-www-form-urlencoded를 json 문자열로 변환

formToJson:function (data) {
        data=data.replace(/&/g,"\",\"");
        data=data.replace(/=/g,"\":\"");
        data="{\""+data+"\"}";
        return data;
    }

테이블 도구 모음을 사용하세요

1. 먼저 HTML

<script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="add">增加</a>
        <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
        <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>

        <!-- 这里同样支持 laytpl 语法,如: -->
        {{#  if(d.auth > 2){ }}
        <a class="layui-btn layui-btn-xs" lay-event="check">审核</a>
        {{#  } }}
</script>

2.js 참조

layui.use(&#39;table&#39;, function(){
    var table = layui.table;
    userPage.tab(&#39;/getUserList.action&#39;);
    //监听工具条
    table.on(&#39;tool(demo)&#39;, function(obj){
        var data = obj.data;
        userPage.data = obj.data;
        if(obj.event === &#39;detail&#39;){
            layer.msg(&#39;ID:&#39;+ data.id + &#39; 的查看操作&#39;);
        }
        else if(obj.event === &#39;del&#39;){
            layer.confirm(&#39;真的要删除这条记录么&#39;,{icon: 3, title:&#39;确定删除&#39;}, function(index){
                obj.del();
                $.post(&#39;/doDelete.action?id=&#39;+data.id,function (res) {
                    userPage.reload(res);
                });
                layer.close(index);
            });

        }
        else if(obj.event === &#39;add&#39;){
           layer.open({
               title:&#39;增加窗口&#39;,
               content:userPage.template,
               yes:function () {
                   var user = page.formToJson($(&#39;#layer_form&#39;).serialize());
                   var data = &#39;user=&#39;+user;
                  $.post(&#39;/doAdd.action&#39;,data,function (res) {
                      userPage.reload(res);
                  });
                  layer.closeAll();
               }
           })

        }
        else if(obj.event === &#39;edit&#39;){
            layer.open({
                title:&#39;编辑窗口&#39;,
                content:userPage.template,
                success:function () {
                    $(&#39;input[name="id"]&#39;).val(userPage.data.id);
                    $(&#39;input[name="username"]&#39;).val(userPage.data.username);
                    $(&#39;input[name="password"]&#39;).val(userPage.data.password);
                    $(&#39;input[name="gender"]&#39;).val(userPage.data.gender);
                    $(&#39;input[name="nichen"]&#39;).val(userPage.data.nichen);
                    $(&#39;input[name="birthday"]&#39;).val(userPage.data.birthday);
                },
                yes: function(){
                    var mgUser = page.formToJson($(&#39;#layer_form&#39;).serialize());
                    var data = &#39;user=&#39;+mgUser;
                    $.post(&#39;/doEdit.action&#39;,data,function (res) {
                        userPage.reload(res);
                    });
                    layer.closeAll();
                }
            })
        }
    });
});

에서 버튼을 정의하세요. 2. 서버 부분

컨트롤러 레이어에서는 다음과 같은 매개변수, 페이지, 제한, 조건을 받아야 합니다. 쿼리하면 반환 값은layui 문서

 @RequestMapping("/getUserList")
    @ResponseBody
    public PageList<MgUser> getUserList(@RequestParam(required = false,defaultValue = "1") int page,@RequestParam(required = false,defaultValue = "5") int limit,@RequestParam(required = false) String queryStr){
        QueryPo queryPo = null;
        if (!StringUtils.isEmpty(queryStr)){   //性别类型转换
             queryPo = JSONObject.parseObject(queryStr,QueryPo.class);
            if ("1".equals(queryPo.getGender())){
                queryPo.setGender("男");
            }
            if ("2".equals(queryPo.getGender())){
                queryPo.setGender("女");
            }

        }
        PageList pageList = new PageList();
        try {
            if (!StringUtils.isEmpty(queryPo)){ //中文字转码
                if(!StringUtils.isEmpty(queryPo.getKeywords())){
                    queryPo.setKeywords(URLDecoder.decode(queryPo.getKeywords(),"utf-8"));
                }
            }
            List<MgUser> userList = userService.getUserList(page,limit,queryPo);   //根据条件查询分页数据

            pageList.setCode("0");
            pageList.setMsg("ok");
            pageList.setData(userList);
            int count = userService.countUserByExample(queryPo);
            pageList.setCount(count);

        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
            pageList.setCode("-1");
            pageList.setMsg("数据获取异常");
            return pageList;
        }

        return pageList;
    } 

서비스 레이어에서 제공하는 기본 반환 값을 기반으로 합니다. Query 및 paginate

public List<MgUser> getUserList(int page , int limit, QueryPo queryPo) {
        MgUserExample userExample = new MgUserExample();
        MgUserExample.Criteria criteria = userExample.createCriteria();
        if(!StringUtils.isEmpty(queryPo)){
            if (!StringUtils.isEmpty(queryPo.getGender())){
                criteria.andGenderEqualTo(queryPo.getGender());
            }
            if (!StringUtils.isEmpty(queryPo.getKeywords())){
                criteria.andUsernameLike("%"+queryPo.getKeywords()+"%");
            }
        }

        userExample.setStart((page-1)*limit);
        userExample.setLimit(limit);

        List<MgUser> mgUsers = userMapper.selectByExample(userExample);

        return mgUsers;
    } 

조건을 기반으로 합니다.mybatis 리버스 엔지니어링으로 생성된 예제에는 제한 및 페이지가 없으므로 주의하세요. 직접 추가해야 합니다

    private int start;
    private int limit;
    
    public int getStart() {
        return start;
    }

    public void setStart(int start) {
        this.start = start;
    }

    public int getLimit() {
        return limit;
    }

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

그런 다음 Mybatis의 mapper.xml을 수정하고 페이징 조건을 추가해야 합니다

<select id="selectByExample" resultMap="BaseResultMap" parameterType="com.wang.entity.MgUserExample" >
    select
    <if test="distinct" >
      distinct
    </if>
    <include refid="Base_Column_List" />
    from mg_user

    <if test="_parameter != null" >
      <include refid="Example_Where_Clause" />
    </if>
    <if test="orderByClause != null" >
      order by ${orderByClause}
    </if>
    <if test="start !=0 or limit!=0">
      limit #{start},#{limit}
    </if>
  </select>

이 기사는 https://www.cnblogs.com/wangxiayun/p/9145638.html에서 복사되었습니다.

더 많은 layui지식을 보려면 PHP 중국어 웹사이트layui 튜토리얼칼럼

을 주목하세요.

위 내용은 Layui의 데이터 테이블 및 페이징 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제