layui table 点击行可展开内容_Kingsaj的博客-程序员宅基地_layui table 展开

技术标签: layui  javascript  

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui-table</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<table class="layui-table" id="tableOut" lay-filter="tableOut"></table>
<script src="../../lib/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
    layui.use(['jquery', 'laydate', 'util', 'layer', 'table', 'form'], function ($, laydate, util, layer, table, form) {
     
        var tableData = [[1, '小明', 16], [2, '小红', 18]];

        // 假释真的需要默认点击搜索在下面table render过之后再调用$dom.click()即可
        //监听工具条
        table.on('tool(tableOut)', function (obj) {
      //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            // 异常不要用它原来的这个作为tr的dom
            // var tr = obj.tr; //获得当前行 tr 的DOM对象
            var $this = $(this);
            var tr = $this.parents('tr');
            var trIndex = tr.data('index');
            if (layEvent === 'detail') {
      //查看
                //do somehing
                console.log(data);
            } else if (layEvent === 'del') {
      //删除
                layer.confirm('真的删除行么', function (index) {
     
                    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
      //编辑
                //do something

                //同步更新缓存对应的值
                obj.update({
     
                    name: '123'
                    , title: 'xxx'
                });
            } else if (layEvent === 'addRowTable') {
     
                // 外围的table的id + tableIn_ + 当前的tr的data-index
                $(this).attr('lay-event', 'fold').html('-');
                var tableId = 'tableOut_tableIn_' + trIndex;
                var _html = [
                    '<tr class="table-item">',
                    '<td colspan="' + tr.find('td').length + '" style="padding: 6px 12px;">',
                    '<table id="' + tableId + '"></table>',
                    '</td>',
                    '</tr>'
                ];
                tr.after(_html.join('\n'));
                // 渲染table
                table.render({
     
                    elem: '#' +tableId,
                    data: data.friend||[],
                    cols: [[
                        {
     field:'id', title: 'ID'},
                        {
     field:'name', title: '朋友姓名'},
                        {
     field:'age', title: '年龄'}
                    ]],

                });
                // $(window).resize();

            } else if (layEvent === 'fold') {
     
                $(this).attr('lay-event', 'addRowTable').html('+');
                tr.next().remove();
            }
        });
        var tableIns = table.render({
     
            elem: '#tableOut',
            // data: [[1, '小明', 16],[2, '小红', 18]],
            data: [
                {
     id: 1, name: '小米', age: '16',
                    friend: [{
     id: 2, name: '大米', age: '28'},{
     id: 5, name: '小虎', age: '16'}]
                },
                {
     id: 2, name: '大米', age: '28',
                    friend: [{
     id: 1, name: '小米', age: '28'}]
                },
                {
     id: 3, name: '小花', age: 0},
                {
     id: 4, name: '小甲', age: '28'},
                {
     id: 5, name: '小虎', age: '16'},
                {
     id: 6, name: '小贤', age: '28'}],
            page: {
     },
            cols: [[
                {
     
                    field: 'btn',
                    width: 50,
                    align: 'center',
                    templet: function (d) {
     
                        return '<a style="width: 100%; height: 100%;cursor: pointer;" lay-event="addRowTable">+</a>'
                    }
                },
                {
     field: 'id', title: 'ID', sort: true},
                {
     field: 'name', title: '名称', edit: true},
                {
     field: 'age', title: '年龄', sort: true}
            ]],

        });
        table.on('sort(tableOut)', function (obj) {
      //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能,但并没有请求服务端。
            //有些时候,你可能需要根据当前排序的字段,重新向服务端发送请求,从而实现服务端排序,如:
            table.reload('tableOut', {
     
                initSort: obj //记录初始排序,如果不设的话,将无法标记表头的排序状态。 layui 2.1.1 新增参数
                , where: {
      //请求参数(注意:这里面的参数可任意定义,并非下面固定的格式)
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });
        });
        table.on('edit(tableOut)', function (obj) {
      //注:edit是固定事件名,test是table原始容器的属性 lay-filter="对应的值"
            // debugger;
            // this;
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });
    });
</script>
</body>
</html>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44412840/article/details/117087893

智能推荐

SAP License:SAP学习心得_SAP权限管控的博客-程序员宅基地

1、组织架构–用途:责任、统计、数据分类、数据关联、关键字。2、SAP应用技巧–功能/元素对应业务项/ 点,预提升业务则需启用功能或补录数据项。3、SAP系统概念业务释义手册,业务单据关键字段清单及描述。4、系统可以多项集成,形成多个口径,提供多维管理视图,但统计口经必须选其一、必须唯一一致;如成本中心可与设备位置之工作中心集成,也可与设备组织结构之成本中心。5、SAP是飞机、一般企业能玩得转、用的上么;需要的是顾问的艺术、管理者的决心。6、主数据及业务表单各数据字段业务含义及系统作用影响描述;.

java 崩溃日志,minecraft崩溃日志_发条粽子的博客-程序员宅基地

该楼层疑似违规已被系统折叠隐藏此楼查看此楼可以帮我看看吗-- Head --Thread: Client threadStacktrace:at java.lang.Class.forName0(Native Method)at java.lang.Class.forName(Unknown Source)at net.minecraftforge.fml.common.FMLModContai...

BigDecimal除法保留小数位_兴趣使然的小小的博客-程序员宅基地_bigdecimal除法保留小数点

BigDecimal num1 = new BigDecimal(100);BigDecimal num2 = new BigDecimal(32);System.out.print(num1.divide(num2, 2, RoundingMode.HALF_UP));RoundingMode.DOWN 直接删除多余的小数位,如2.35会变成2.3RoundingMode.UP 进位处理,2.35变成2.4RoundingMode.HALF_UP 四舍五入,2.35变成2.4Rounding

NotePad++ 语法高亮 INC 文件_weixin_33947521的博客-程序员宅基地

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

C++含变量的后缀表达式计算__程序设计_的博客-程序员宅基地

C++含变量的后缀表达式计算接了个老外的作业,要求是在原代码基础上添加支持变量的后缀表达式的计算,题目要求如下:Make the Reverse Polish Notation calculator work with variablesIf the input is2 3 4 +* -&gt; a =that means work out 2*( 3+4) and remember that as the value of a.-&gt; needs to be handled special

滴滴:前五个月华北20城共3.51亿人使用打车应用出行_weixin_34174105的博客-程序员宅基地

6月30日,滴滴出行与第一财经商业数据中心联合发布的《知道——华北城市智能出行大数据报告》显示,今年前五月,华北地区共有3.51亿人次使用打车软件智能出行,其中,北京、太原、天津三地智能出行渗透率居于前列。该报告还以北京为例分析了智能出行平台对城市交通服务的改善。具体来看,北京地区乘客使用滴滴出行,人均等车时间仅为5.6分钟。在提高居民出行效率的同时...

随便推点

孕妇应该怎么吃?_weixin_30654583的博客-程序员宅基地

特别推荐:孕中期作好营养补充 孕期营养过剩对母婴都不好PART1 三阶段补充营养原则孕早期大多数孕妇在孕早期会出现恶心、呕吐、食欲不振等妊娠反应,吃什么都不香,这种状况下,营养的摄入怎样能得以保证呢?处于孕早期的准妈妈大多受妊娠反应困扰,胃口不佳,这个阶段,准妈妈并不用刻意让自己多吃些什么,与其每天对着鸡鸭鱼肉发愁,不如多选择自己喜欢的食物,以增进食欲。对于...

ROS melodic安装过程中的用手机热点更好~_weixin_30633507的博客-程序员宅基地

这几天终于发现了纠结了好久的问题,包括之前的PCL的安装,有的时候某些包下载不全的原因是网络的问题。这次使用了手机热点,由于当前使用的华为P20 pro,在服务器里面选择了huaweicloud的服务器,然后安装ROS的过程特别顺利,简直一路绿灯,在这里MARK下。转载于:https://www.cnblogs.com/robohou/p/11421453.html...

Wpf实现图片自动轮播自定义控件_weixin_30839881的博客-程序员宅基地

近来,公司项目需要,需要写一个自定义控件,然后就有下面的控件产生。样式没有定义好,基本功能已经实现。1.创建为自定义控件的XAML页面。可能要用到的wp源码:http://code.662p.com/list/14_1.html下面为后台代码using System;using System.Collections.Generic;using System.Linq;usi...

Oracle创建多实例_楼兰过客的博客-程序员宅基地_oracle多实例

Oracle创建多实例在linux服务器上创建orcl实例时忘了设置编码,默认使用系统UTF-8的编码,但是项目数据库使用有的是GBK,所以想再创建一个实例挂载成GBK编码的数据库。因为是远程服务器,没法弹出dbca的可视化界面,因此需要手动使用命令进行创建。一、使用oracle用户登录操作过程中需要使用频繁切换ORACLEHOME和ORACLE_HOME和ORACLEH​OME和ORACLE_BASE,需要事先查看环境变量里有没有配置这两个变量,如果没有配置先配置一下,不然敲路径会敲的头大。使用e

Notepad++ 安装插件管理器_lzm1016733696的博客-程序员宅基地_notepad++安装csdn

##Notepad++ 安装插件管理器手动安装插件管理plugin manager在github上找到最新的插件管理版本https://github.com/bruderstein/nppPluginManager/releases下载并解压。关闭notepad++,将下载的文件解压,将解压后的plugin包下的PluginManager.dll拷贝到notepad++安装路径下...

推荐文章

热门文章

相关标签