layui数据表格使用(增 删 改)

首先引入css

<link href="__ADMIN__/vendor/layui/css/layui.css" rel="stylesheet">
<style>
    body{overflow-y: scroll;} /* 禁止刷新后出现横向滚动条 */
</style>

表格html代码

<!-- 数据表格工具条 -->
<div class="tools" id="tableTool" data-type="userReload" style="height: 40px;">
    <div class="pull-left">
        <div class="btn-group hidden-xs" id="exampleToolbar" role="group">
            <button type="button" data-type="edit" class="btn btn-outline btn-default table-btn">
                <i class="glyphicon glyphicon-edit" aria-hidden="true"></i>
            </button>
            <button type="button" data-type="del" class="btn btn-outline btn-default table-btn">
                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
            </button>
            <button class="btn btn-default btn-outline table-btn" data-type="reload" type="button" title="刷新">
                <i class="glyphicon glyphicon-repeat"></i>
            </button>
        </div>
    </div>


    <div class="pull-right search-btn">
        <button class="btn btn-primary table-btn" data-type="reload" >搜索</button>
    </div>

    <div class="pull-right search-text">
        <input type="text" id="content" class="form-control">
    </div>

    <div class="pull-right search-select">
        <select id="fields" class="form-control">
            <option value="">请选择</option>
            <option value="username">用户名</option>
            <option value="phone">手机</option>
            <option value="email">邮箱</option>
        </select>
    </div>

</div>

<!-- 会员中心数据表格 -->
<table id="userTable" lay-filter="user">

</table>
<!-- 字段判断 -->
<script type="text/html" id="sexTpl">
    {{#  if(d.sex === 1){ }}
    <span> 男</span>
    {{#  } else { }}
    <span> 女</span>
    {{#  } }}
</script>
<!-- 会员中心数据表格 -->

引入JS代码：

<script src="__ADMIN__/vendor/layui/layui.js"></script>
<script>
    layui.use('table', function () {
        var table = layui.table;
        table.render({
             elem: '#userTable'
            , url: '/admin/user/getuser/' //数据接口
            , page: true //开启分页
            , id: 'userReload'
            , cols: [[ //表头
                  {checkbox: true, fixed: true}
                ,{field: 'id', title: 'ID',  sort: true}
                , {field: 'username', title: '用户名', }
                , {field: 'sex', title: '性别', templet: '#sexTpl'}
                , {field: 'email', title: '邮箱'}
                , {field: 'user_money', title: '用户资金'}
                , {field: 'qq', title: 'QQ', sort: true}
                , {field: 'phone', title: '手机',  sort: true,}
            ]]
        });

        //修改 删除 新增 触发事件
        var $ = layui.$, active = {

            //删除
            del:function () {

                var checkStatus = table.checkStatus('userReload')
                        ,data = checkStatus.data;

                if(data.length == 0) {
                    layer.alert('至少选择一条数据!');
                    return false;
                }

                var ids = '';
                layui.each(data,function(k,v){
                    ids += v.id+',';
                });

                ids = ids.substr(0,ids.length-1);


                //询问框
                layer.confirm('确认删除'+data.length+'条数据吗？', {
                    btn: ['确认','取消'] //按钮
                }, function(){
                    $.ajax({
                        url:'/admin/user/del/',
                        type:'post',
                        dataType:'json',
                        data:{
                            ids:ids
                        },
                        success:function (status) {
                            if(status.status==200)
                            {
                               layer.msg(status.msg,{
                                    icon:1,
                                    offset: 'rb',//右下角弹出
                                    title: false,//不显示标题
                                    closeBtn: 0, //不显示关闭按钮
                                    shade: [0],//不显示遮罩层
                                    time: 2000, //2秒后自动关闭
                                    anim: 4,//动画效果
                                });
                                layui.table.reload('userReload'); //更新成功刷新当前数据表格 分页默认为当前页

                            }else if(status==202) {
                                layer.alert(status.msg);
                            }
                        },
                        error:function (res) {
                            layer.alert('网络错误!');
                        }
                    });
                });
            },

            //触发弹窗 修改
            edit:function(){
                var checkStatus = table.checkStatus('userReload')
                        ,data = checkStatus.data;

                if(data.length == 0) {
                    layer.alert('请选择一行数据!');
                    return false;
                }

                if(data.length > 1) {
                    layer.alert('修改数据只能选中一行!');
                    return false;
                }

                layer.open({
                    type: 2,
                    title: '修改用户',
                    shadeClose: true,
                    shade: 0.3,
                    area: ['900px','630px'],
                    content: '/admin/user/edit/id/'+data[0].id+'page/',
                });
            },


            //搜索
            reload: function () {
                //搜索字段
                var fields = $("#fields")
                    ,content = $("#content")


                //执行重载
                table.reload('userReload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        key: {
                            fields:fields.val(),
                            content:content.val()
                        }
                    }
                });
            }
        };

        //表格工具条按钮触发点击事件
        $('#tableTool .table-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

    });
</script>

 

数据修改页面JS：

<script>
    $("form[data-type=ajax]").on('submit',function () {
       $.ajax({
           url:$(this).attr('action'),
           type:'post',
           dataType:'json',
           data:$(this).serializeArray(),
           success:function (status) {
                if(status.status==200)
                {
                    layer.alert('更新成功!',function(){
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        location.href = status.url;
                        parent.layui.table.reload('userReload'); //更新成功刷新当前数据表格 分页默认为当前页
                    });

                } else if (status.status==202) {
                    layer.alert(status.msg);
                }
           },
           error:function (res) {
               layer.alert('网络错误!');
           }
       });
    return false;
    });
</script>

后端逻辑：

<?php
namespace app\admin\controller;

//会员管理
use think\Db;

class User extends Common
{
    //会员列表
    public function index()
    {
        if(!request()->isPost())
        {
            return view();
        }
    }

    //修改用户
    public function edit()
    {
        if(!request()->isPost())
        {
            $id = input('param.id','','trim');
            $page = input('param.page');//1
            $user = Db::name('user')->where('id',$id)->find();
            $this->assign('user',$user);
            return view();
        }

        $data = input('post.','','trim');
        if(model('user')->isUpdate(true)->allowField(true)->save($data))
        {
            return success('更新成功!',url('index'));
        } else {
            return error('更新失败!');
        }

    }

    //删除用户
    public function del()
    {
        $ids = input('param.ids');
        $db = model('user');
        if(strlen($ids)>1) {
            //删除多行
            if($nums = $db->whereIn('id',$ids)->delete())
            {
                return success("成功删除{$nums}条数据!");
            }
        }else{
            //删除单条
            if($num = $db->where('id',$ids)->delete())
            {
                return success("成功删除{$num}条数据!");
            }
        }
    }


    //获取用户信息 分页
    public function getuser()
    {
        if(!request()->isAjax()) halt('非法请求!');


        $db = model('user');

        //组合where条件
        $fields = input('param.key.fields'); //用户搜索字段
        $content = input('param.key.content'); //用户搜索内容
        $where = [];
        if(!empty($fields) && !empty($content))
        {
            switch ($fields)
            {
                case 'username' :
                    $where = [
                        'username'=>['eq',$content]
                    ];
                    break;
                case 'phone' :
                    $where = [
                        'phone'=>['like','%'.$content.'%']
                    ];
                    break;
                case 'email' :
                    $where = [
                        'email'=>['like','%'.$content.'%']
                    ];
                    break;
            }
        }


        //分页配置
        $page = input('param.page');//1
        $rows = input('param.limit');//10

        $first = $rows*($page-1);

        $data = $db->where($where)->order('id desc')->limit($first,$rows)->select();
        $datas = [];
        foreach ($data as $key=>$value)
        {
            $datas[$key] = $value->toArray();
        }

        $count = $db->where($where)->count();


        $jsonData = [
            'code'=>0,
            'msg' => '',
            'count' => $count,
            'data'=>$datas
        ];

        return json($jsonData);
    }
}

转载于:https://my.oschina.net/u/3483680/blog/1827531