Day04 Layui table 自动渲染，field格式转换，工具条删除，修改监听

最新推荐文章于 2024-06-13 15:12:51 发布
最新推荐文章于 2024-06-13 15:12:51 发布
阅读量3.6k 收藏 1
点赞数
分类专栏： layui javaweb 文章标签： layui table table field格式转换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZZZ___bj/article/details/80326833
版权
  • 1.table自动渲染

使用lay-data ，进行table表格自动渲染。

<table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'name',  sort: true, fixed: true}">角色名称</th>
                    <th lay-data="{field:'enname'}">英文名称</th>
                    <!--<th lay-data="{field:'office.name', width:150, sort: true}">归属机构</th>-->
                    <th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
                    <th lay-data="{field:'dataScope'}">数据范围</th>
                    <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
            </thead>
        </table>

注意：当field,是json字符串中对象的某个属性时，则不能用office.name，而应该进行格式转换。

//书写方式
<th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
//格式转换
function createFormat(o) {
    return o;
}
  • 2.表格删除
layer.confirm('真的删除行么', function(index) {

                $.ajax({
                    type: 'get',
                    url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
                    async: true,
                    data:{
                        id:data.id
                    },
                    error:function(error){
                        alert(error.status);
                        layer.msg("删除失败", {
                                icon: 5   //出现失败图标
                        });
                    },
                    success: function(result) {

                        if(result == "success") {
                            obj.del();
                            layer.close(index);
                            layer.msg("删除成功", {
                                icon: 6   //出现成功图标
                            });
                        } else {
                            layer.msg("删除失败", {
                                icon: 5
                            });
                        }
                    }
                });

    });
  • 3 完整table操作
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>角色管理</title>
    </head>

    <body>

        <div class="layui-btn-group demoTable">
            <!--<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
          <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
          <button class="layui-btn" data-type="isAll">验证是否全选</button>-->

        </div>

        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="active">
                    <a href="http://localhost:8080/pro/start/#/sys/role/list">角色列表</a>
                </li>
                <li>
                    <a href="http://localhost:8080/pro/start/#/sys/role/form">角色添加</a>
                </li>
            </ul>
        </div>

        <table class="layui-table" lay-data="{url:'http://192.168.25.38:8080/jeesite/f/sys/role/list',page:false,id:'idTest'}" lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
                    <th lay-data="{field:'name',  sort: true, fixed: true}">角色名称</th>
                    <th lay-data="{field:'enname'}">英文名称</th>
                    <!--<th lay-data="{field:'office.name', width:150, sort: true}">归属机构</th>-->
                    <th lay-data="{templet:'<div>{{createFormat(d.office.name)}}</div>'}">归属机构</th>
                    <th lay-data="{field:'dataScope'}">数据范围</th>
                    <th lay-data="{fixed: 'right', align:'center', toolbar: '#barDemo'}">操作</th>
                </tr>
            </thead>
        </table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary 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>
        </script> 

        <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
        <script>
            //格式转换
            function createFormat(o) {
                return o;
            }
            layui.use(['table', 'jquery'], function() {
                $ = layui.$;
                var table = layui.table;
                //监听表格复选框选择
                table.on('checkbox(demo)', function(obj) {
                    console.log(obj)
                });
                //监听工具条
                table.on('tool(demo)', function(obj) {
                    var data = obj.data;
                    if(obj.event === 'detail') {
                        layer.msg('ID：' + data.id + ' 的查看操作');

                    } else if(obj.event === 'del') {
                        layer.confirm('真的删除行么', function(index) {

                            $.ajax({
                                type: 'get',
                                url: 'http://192.168.25.38:8080/jeesite/f/sys/role/delete',
                                async: true,
                                data:{
                                    id:data.id
                                },
                                error:function(error){
                                    alert(error.status);
                                    layer.msg("删除失败", {
                                            icon: 5
                                    });
                                },
                                success: function(result) {

                                    if(result == "success") {
                                        obj.del();
                                        layer.close(index);
                                        layer.msg("删除成功", {
                                            icon: 6
                                        });
                                    } else {
                                        layer.msg("删除失败", {
                                            icon: 5
                                        });
                                    }
                                }
                            });

                        });
                    } else if(obj.event === 'edit') {

                        window.location.href = "http://localhost:8080/pro/start/#/sys/role/form.html?id=" + data.id;
                    }
                });

                var $ = layui.$,
                    active = {
                        getCheckData: function() { //获取选中数据
                            var checkStatus = table.checkStatus('idTest'),
                                data = checkStatus.data;
                            layer.alert(JSON.stringify(data));
                        },
                        getCheckLength: function() { //获取选中数目
                            var checkStatus = table.checkStatus('idTest'),
                                data = checkStatus.data;
                            layer.msg('选中了：' + data.length + ' 个');
                        },
                        isAll: function() { //验证是否全选
                            var checkStatus = table.checkStatus('idTest');
                            layer.msg(checkStatus.isAll ? '全选' : '未全选')
                        }
                    };

                $('.demoTable .layui-btn').on('click', function() {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });

            });
        </script>
    </body>

</html>
ZZZ___bj
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
通达信day格式文件转换（含港股和基金等）
06-11
把通达信day文件转换为csv文件，包含上证、深证、港股。对于股票、基金、及港股的不同格式进行了处理。 用法：把stock.exe 复制到 vipdoc\sh\lday 或 vipdoc\sz\lday 或 vipdoc\ds\lday 下面，运行即可在当前目录下...
layui中[data-field=xx]选择器
qq_41617901的博客
02-09 1453
var currNum = 1; if (localStorage.getItem("layuiPageSize") == null) { localStorage.setItem("layuiPageSize", 20);//添加每页默认数据条数 } function LoadData(currIndex) { //执行一个 table 实例 table.render({ elem: '#demo' // , height: 620 .
layui table中 field参数
.
12-15 6191
解决： 在实体类中增加get方法
layui一个页面多个table显示时工具栏被下方的table遮挡
weixin_43652106的博客
06-13 251
layui多个表格显示时工具栏的可能会被下方表格遮挡
layui table列中参数转换（1=汽车 2=火车 3=飞机） & layui table列中的值替换 （已解决）
林逗哥
11-27 4735
问题： 类别属性为sort 后台数据库存的是1 2  3 但是显示的需要转换成 人才 政策  项目 代码：方法一 页面： &lt;script type="text/html" id="tranSort"&gt; {{# if (d.sort==1) { }}    &lt;span&gt;人才&lt;/span&gt; {{# } else if(d.so...
layui table 表头动态修改
G_ruirui的博客
03-11 1987
layui table 表头动态修改
layui数据列表数据显示自定义格式。
qq_42780864的博客
10-11 2022
若要将指定列的数据改为某个值，将时间日期格式化，int值类型展示中文值等操作 1、使用 templet属性，将该行数据，进行格式化操作即可。 例如：这里将日期数据格式化，返回一个string类型数据即可 cols: [[ {field:'deviceid', title: 'ID', width:60, sort: true, fixed: true} ,{field:'...
layui table动态表头 改变表格头部 重新加载表格
weixin_30716141的博客
04-04 1937
改变头部原理: 删除原来表格, 重新建立DOM元素, 重新加载table,实现表头改变 明白了原理, 我相信大家都能写出来了, table.reload(ID, options)目前好像还不支持cons的基础函数变动,只能使用其他方式了,简单暴力,哈哈哈哈哈哈哈哈嗝!! 下面是示例: <!DOCTYPE html> <html> <head> ...
dayjs 时间格式转换工具 js
09-15
Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。 官网：https://dayjs.fenxianglu.cn/
PL/SQL 类型格式转换
09-11
PL/SQL 类型格式转换 PL/SQL 类型格式转换是指在 Oracle 数据库中将一种数据类型转换为另一种数据类型的过程。这种转换可以使用 TO_NUMBER、TO_DATE、TO_CHAR 等函数来实现。 TO_NUMBER(char[,'format_model']) ...
软件测试学习日志-自动化测试阶段-day02
最新发布
07-03
软件测试学习日志-自动化测试阶段-day02
软件测试学习日志-自动化测试阶段-day01
06-29
软件测试学习日志-自动化测试阶段-day01
layui table.render field列值修改自定义
旺仔milk的博客
06-02 6528
上例子： //渲染表格 table.render({ elem: '#year-table', data: data2, page: true, limit: 12, cols: [[
layui框架学习（35：数据表格_列参数设置）
gc_2299的博客
07-30 3203
学习并记录layui框架中内置模块的数据表格模块中与列相关的主要参数设置方式。
layui table的使用方法以及基本操作
热门推荐
jinggaoniao的博客
07-28 2万+
layui table用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。(本段话来源于layui官网) 一、基本使用方法 layui table的使用方法很简单，可以总结为三个步骤：绑定容器、设置数据接口、在表头设定对应的字段 以下表格即是一个简单数据表格最基本的样子 对应
layui table中嵌套对象提取
weixin_44714808的博客
01-12 2047
在layui中的table 中如果提取到的数据是object中还嵌套这object对象，如果直接显示，则会出现以下的状况 ,cols: [ [ //表头 {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'} ,{field: 'bookName', title: 'bookName', width:80} ,
layui table 获取field的name_spring boot+layui实现增删改查实战
weixin_34957720的博客
01-19 699
说明： 最近在做一个后台，希望用一个现成的前端模板，找了一圈发现Layui比较合适。我知道很多人都有这个需求，为了使大家快速上手，我把自己写的最实用的增删改查案例完整的展示出来。需要源码的请留下邮箱！Layui官网：https://www.layui.com/doc/后台：spring boot2.0，数据的话用的list没连接数据库。前端：layui-v2.5.5启动后访问:h...
Layui table的动态表格lay-data怎么传递参数给后端
小洪帽i的博客
11-20 4408
Layui table的动态表格lay-data怎么传递参数给后端
layui根据name获取对象_浅谈layui分页控件field参数接收对象的问题，用什么控件分页...
weixin_28909779的博客
12-31 151
浅谈layui分页控件field参数接收对象的问题，用什么控件分页第一次使用layui分页控件，遇到的问题。。field: 'type.typeName' 获取不到值。页面代码table.render({elem: '#bookTable',height: 'full-20',url: '/admin/getBook' //数据接口,request: {pageName: 'begin' //页码...
matlab 将一组yyyymmdd格式的日期转换为dayofyear
07-08
要将一组`yyyymmdd`格式的日期转换为年份的第几天（day of year），你可以使用`datetime`函数来创建日期时间对象，并使用`day`函数获取年份中的第几天。以下是一个示例代码： ```matlab dates = ['20220101'; '20220115'; '20220131']; % 输入的日期数组，格式为yyyymmdd n = size(dates, 1); % 获取日期数组的行数 dayOfYear = zeros(n, 1); % 初始化day of year向量 for i = 1:n dateStr = dates(i, :); dt = datetime(dateStr, 'InputFormat', 'yyyyMMdd'); % 创建日期时间对象 dayOfYear(i) = day(dt, 'dayofyear'); % 获取年份中的第几天 end ``` 在这个例子中，我们定义了一个日期数组`dates`，其中每个元素都是一个`yyyymmdd`格式的日期。我们首先获取日期数组的行数，并初始化一个与行数相同的零向量`dayOfYear`来保存day of year的结果。然后，通过循环遍历日期数组的每个元素，使用`datetime`函数创建日期时间对象，并将日期字符串解析为对应的日期。最后，使用`day`函数来获取该日期时间对象的年份中的第几天，并将结果存储在`dayOfYear`向量中。 希望这个回答对你有帮助！如果还有其他问题，请随时提出。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值