欢迎光临
我们一直在努力

layui-js封装方法使用说明

1.数据表格

  • 使用代码
<table class="layui-table" lay-data="{url:'{:url('rbac/getRoleList')}','limit':10,height: 'full-100', page:true, id:'listData'}" lay-filter="list">
<thead>
    <tr>
    <th width="40" lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
    <th align="left" lay-data="{field:'name',width:120}">{:lang('ROLE_NAME')}</th>
    <th align="left" lay-data="{field:'remark',width:120}">{:lang('ROLE_DESCRIPTION')}</th>
    <th width="60" align="left" lay-data="{field:'status',width:100,templet:'#statusTpl'}">{:lang('STATUS')}</th>
    <th lay-data="{fixed: 'right', width:360, align:'center', toolbar: '#toolbar'}">操作</th>
    </tr>
</thead>
 </table>

//状态判断逻辑
<script type="text/html" id="statusTpl">
    {{#  if(d.status == 1){ }}
    //todo 
    {{#  } else { }}
    // todo 
    {{#  } }}
</script>

//工具条内容
<script type="text/html" id="toolbar">

    {{# if(d.id == 1) { }}
     //todo 
    {{# }else{ }}
      //todo 
    {{# } }}

</script>

lay-data 写相关的接口地址和参数(详情参考layui手册)
table中的 id 必须为 listData ,lay-filter="list" 。

2.弹出层

  • 在要操作的元素上加上data-params= "" 和 class="modal-iframe" 即可
<button class="layui-btn layui-btn-normal modal-iframe" data-params='{"content": "{:url(\'rbac/roleAdd\')}", "title": "添加角色","area":"800px,600px"}' >添加角色</button>

3.更改状态

3.1 模式1

  • 在元素上加上data-params 传入地址和参数即可,
   <input type="checkbox" checked="" name="open" data-params='{"url":"{:url('rbac/changeRoleStatus')}","data":"id={{ d.id }}"}' lay-skin="switch" lay-filter="switch" lay-text="ON|OFF">

效果如下
mark

3.2 模式2

  • 操作栏中更改用户状态(启用和拉黑)
    传入 lay-event="change" 和 data-params = "" 即可
<a lay-event="change" data-params='{"url": "{:url('adminIndex/changeStatus')}","data":"id={{d.id}}&status=0","confirm":"true","title":"确定拉黑此用户么"}' class="layui-btn layui-btn-mini ">拉黑</a>
  • 效果截图
    mark
    mark

目前只适用于 启用和拉黑

4.删除操作

  • 在元素上加入 如下参数即可
lay-event="del"  
data-params='{"url":"{:url('Rbac/roledelete')}","data":"id={{d.id}}","confirm":"true","title":"确定删除此角色么"}
  • 效果显示

mark

5.列表点击显示图片

  • 元素中绑定下面元素即可
    <img src="{{d.avatar}}" alt="" class="modal-photo" width="35" data-params='{"content": "{{d.avatar}}"}'>

6.搜索功能

  • 只需要在相对应的表单 提交按钮上加入 如下参数 即可
<a class="layui-btn" lay-submit="" lay-filter="searchSubmit" value="搜索">搜索</a>

7.批量删除

  • 在操作的元素上加上class="delAll" 和data-params 参数即可
<a class="layui-btn layui-btn-danger delAll" data-params ='{"url":"{:url('user/delete')}","confirm":"true","title":"确定删除这些用户么"}'>批量删除</a>
  • 效果截图
    mark

数据表格必须开启checkbox 功能。

8.排序功能.

  • 在操作的元素上加上 lay-filter= "sortSubmit" 即可
<a lay-submit lay-filter= "sortSubmit" class="layui-btn layui-btn-small layui-btn-danger ">  排序 </a>
  • 效果截图

mark

9.表单提交

  • form 中加入 action 和method ,提交按钮中加入 lay-submit="" lay-filter="submit" 即可
<form class="layui-form form-container"  action="{:url('rbac/roleAddPost')}" method="post">
//todo 
<button  type="button" lay-submit="" lay-filter="submit" class="layui-btn">{:lang('ADD')}</button>
</form>

10 单图上传

  • 上传图片按钮上绑定id="oneImage" , img标签身上绑定id="thumbnail-preview" ,隐藏Input身上绑定 id="thumbnail" 即可。
<div class="layui-upload">
            <button type="button" class="layui-btn" id="oneImage">上传图片</button>
            <input type="hidden" name="thumbnail" id="thumbnail" value="">
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="thumbnail-preview">
                <p id="uploadtips"></p>
            </div>
 </div>

11.表单中城市区联动

  • 写如下代码即可
<div class="layui-form-item">
            <label class="layui-form-label">公司地址</label>
            <div class="layui-input-inline" style="width:130px">
                <select name="rarea1" lay-filter="province">
                    <option></option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:130px">
                <select name="rarea2" lay-filter="city">
                    <option></option>
                </select>
            </div>
            <div class="layui-input-inline" style="width:130px">
                <select name="rarea3" lay-filter="area">
                    <option></option>
                </select>
            </div>
        </div>

mark

12 单图图片上传

  • 使用如下代码即可
<!--<div class="layui-upload">-->
            <!--<button type="button" class="layui-btn" id="oneImage">上传图片</button>-->
            <!--<input type="hidden" name="thumbnail" id="thumbnail" value="">-->
            <!--<div class="layui-upload-list">-->
                <!--<img class="layui-upload-img" id="thumbnail-preview">-->
                <!--<p id="uploadtips"></p>-->
            <!--</div>-->
        <!--</div>-->

13.其他备注

  • 每个模板页面必须加载 <script src="__STATIC__/larry/js/admin.js"></script>
  • data-params 外边是单引号 里边是双引号,写错 会不执行。
  • layui 数据表格 的模板引擎 和 tp5 url中的传参 解析时有冲突,所以传参需要 写到 data中 , 或者不使用url 解析地址,自己拼接地址也可。
    data-params='{"url":"{:url('rbac/changeRoleStatus')}","data":"id={{ d.id }}"}'

  • 数据表格中不能直接解析图片地址,需要在模板引擎中解析

<th lay-data="{field:'avatar', width:100,templet:'#avatarTpl'}">头像</th>
<script type="text/html" id="avatarTpl">
    <img src="{{d.avatar}}" alt="" class="modal-photo" width="35" data-params='{"content": "{{d.avatar}}"}'>
</script>
  • 数据表格中需要判断逻辑的代码 都需要写到 模板引擎中。
<th lay-data="{field:'status',width:100,templet:'#statusTpl'}">{:lang('STATUS')}</th>
<script type="text/html" id="statusTpl">
//todo something
</script>
未经允许不得转载:NewThink » layui-js封装方法使用说明

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址