layui数据表格如何加工具栏? - 蓝蓝设计_UI设计公司

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


layui数据表格如何加工具栏?

2019-6-18 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

实现的最终效果图(文末会贴出全部代码,方便参考) 



1, 将此行代码加在红线所在的位置

,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}


2,在合适的HTML位置加入 

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>
全部代码:

{include file="common/header"}

<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">秒速赛车</a>
        <a href="">演示</a>
        <a>
          <cite>导航元素</cite></a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<table class="layui-hide" id="test" lay-size="sm" lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">删除</button>
    </div>
</script>

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:"{:url('admin/user/page')}"
            ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,limit:10 //一页显示多少条
                ,limits:[5,10,15]//每页条数的选择项
                ,groups: 2 //只显示 2 个连续页码
                ,first: "秒速赛车" //不显示秒速赛车
                ,last: "尾页" //不显示尾页
            }
            ,cols: [[
                {field:'id', width:80, title: '代理ID', sort: true}
                ,{field:'username', width:100, title: '代理名称'}
                ,{field:'level', width:100, title: '代理级别'}
                ,{field:'email', width:80, title: '电子邮箱'}
                ,{field:'phone', width:280, title: '手机号'}
                ,{field:'agent_id', width:280, title: '上级代理ID'}
                ,{field:'status', width:280, title: '是否启用'}
                ,{field:'isAuth', width:280, title: '是否已经认证'}
                ,{field:'money', width:280, title: '金额'}
                ,{field:'created_time', width:280, title: '访问时间',sort: true}
                ,{fixed: 'right', width: 150, align:'center', toolbar: '#toolbarDemo'}
            ]]

        });


        //监听工具条
        table.on('tool(test)', function(obj){ //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj);
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'detail'){ //查看
                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
                    username: '123'
                    ,title: 'xxx'
                });
            }
        });

    });

</script>
</body>
</html>

蓝蓝设计www.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: layui数据表格如何加工具栏? « 这10个设计细节我不说你肯定不知道,但是看完你肯定会点赞! | 研究数十个热门 APP后,我来教你如何做好「设置头像」功能»


订阅Rss
PK10哪个平台赔率高 秒速赛车官网 甘肃快3 秒速赛车官网 秒速赛车官网 秒速赛车官网 彩票高賠率好平台 秒速赛车官网 秒速赛车官网 极速快乐8