Layui的展开列表

news/2024/7/19 14:50:32 标签: html, js
htmledit_views">
  • 我们在写前端页面时为了节省时间总会用到框架,我这次用的是Layui框架做一个扩展列表
  • 如图

 

  • 这是其中一个,我主要讲的是,父子表
  • 父子表就是在每一行数据种展开一个列表,它是由两个请求获取数据
html"><head>
    <meta charset="utf-8">
    <title>在线调试</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="自己的地址/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="自己的地址/css/soulTable.css" media="all"/>
    <script type="text/javascript" src="自己的地址/layui/layui.js"></script>
</head>
<body>
<script>
    // 自定义模块
    layui.config({
        base: '自己的地址/layui/ext/',   // 模块目录
        version: 'v1.6.0'
    }).extend({             // 模块别名
        soulTable: 'soulTable'
    });
    layui.use(['form', 'table','soulTable'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;

        table.render({
            elem: '#myTable4'
            ,url: '父表请求的地址'
            ,page: true
            ,id:'aa'
            ,height: 800
            ,cols: [[
                {type: 'checkbox'},
                {title: ' ', width: 50, icon: ['layui-icon layui-icon-triangle-r', 'layui-icon layui-icon-triangle-d'], children:[
                        {
                            title: '列表一'
                            ,url: function(row){
                                console.log(row)
                                return '请求地址?userid='+row.userid;//我根据父表的id获取子表
                            }
                            ,height: 500//高度不写会被压缩
                            ,id:'dd'
                            ,page: true
                            ,cols: [[
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'userid', title: '用户ID',  sort: true, filter: true},
                                {field: 'username', title: '用户名',  sort: true, filter: true},
                                {field: 'eferencesid', title: '所属业务员',  filter: true},
                                {field: 'power', title: '权力',  filter: true},
                                {field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
                                {title: '操作', width: 156,align:'center', toolbar: '#childBar'}
                            ]]
                            ,done: function () {
                                soulTable.render(this);
                            }
                            , limit: 10 // 当前页数
                            , limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
                            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                                var result;
                                if (this.page.curr) {
                                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                                } else {
                                    result = res.data.slice(0, this.limit);
                                }
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.msg, //解析提示文本
                                    "count": res.count, //解析数据长度
                                    "data": result //解析数据列表
                                };
                            },
                            toolEvent: function (obj) {//这是在列后面的监听事件,就是列后面的按钮
                                var layEvent = obj.event, // 获取 lay-event 对应的值
                                    tr = obj.tr, // 获取当前行 的 dom 对象(如果有的话)
                                    data = obj.data; // 当前行数据
                                // console.log('[父表tool事件] 当前行对象:', tr)
                                // console.log('[父表tool事件] 当前行数据:', data)
                                if (layEvent === 'edit') {
                                    //同步更新缓存对应的值
                                    console.log(data.userid)

                                    layer.open({
                                        type: 1,
                                        title: '头',
                                        area: ['350px', '200px'],//定义宽高
                                        content: $("#test"), //这里content是一个普通的String
                                        shade: 0,
                                        btn: ['确定']
                                        , btn1: function () {
                                            
                                            return true;
                                        },
                                        cancel: function () {
                                            layer.closeAll();
                                        }
                                    });


                                } else if (layEvent === 'del') {
                                    layer.confirm('真的删除么', function(index){
                                        console.log(data.userid)

                                        obj.del(); //删除对应行(tr)的DOM结构,并更新缓存
                                        layer.close(index);
                                        //向服务端发送删除指令
                                    });
                                }
                            }
                            ,
                            toolbarEvent: function (obj, pobj) {//工具条监听
                                var check =  table.checkStatus(this.id);
                                console.log(this.id);
                                console.log(check);
                                console.log(check.data);
                                console.log(obj);
                                // obj 当前行对象
                                if (obj.event === 'batchzr') {
                                    layer.msg('重载成功!')
                                }
                            }
                        }
                    ]},
                {field: 'userid', title: '用户ID',  sort: true, filter: true},
                {field: 'username', title: '用户名',  sort: true, filter: true},
                {field: 'role', title: '用户角色',  filter: true},
                {field: 'ascriptionid', title: '归属',  filter: true},
                // {field: 'type', title: '类型', width: 112,  filter: {split:','}, sort:true},
                // {field: 'heat', title: '点赞数', width: 112,  filter: true, sort:true},
                {field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
            ]]
            ,done: function () {
                soulTable.render(this)
            }
            , limit: 10 // 当前页数
            , limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
            var result;
            if (this.page.curr) {
                result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
            } else {
                result = res.data.slice(0, this.limit);
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": result //解析数据列表
            };
        }

        });
        table.on('tool(toolbar)', function (obj){
            console.log('tool')
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)

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

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


    })
</script>
<style>

</style>
</body>
</html>

 

  • 上面代码不全自行修改
  • 这种就是在父表的某一条数据中,放一个子表
  • 那么数据出来了,我们怎么获取当中的某一个数据呢
  • 父表的数据与正常的取值无异,我主要说的是子表的工具条
  • 子表工具条有个监听事件
toolbarEvent: function (obj) {
            // obj 当前行对象
            if (obj.event === 'reload') {
                table.reload(this.id)
                layer.msg('重载成功!')
            }
}
  • 这个在父表同样适用
  • 在Layui官网可以知道多选框的值可以使用一下代码取
var checkStatus = table.checkStatus('数据表格的id'); 

 

  • 哪展开的子表可不可以呢,可以,但是id不可在子表写id,如:
html"><table id="myTable4" lay-filter="myTable4"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-xs" lay-event="batchzr">批量转让</a>
    </div>
</script>
<script>
    // 自定义模块
    layui.config({
        base: '../../static/layui/ext/',   // 模块目录
        version: 'v1.6.0'
    }).extend({             // 模块别名
        soulTable: 'soulTable'
    });
    layui.use(['form', 'table','soulTable'], function () {
        var table = layui.table,
            soulTable = layui.soulTable;

        table.render({
            elem: '#myTable4'
            ,url: '#'
            ,toolbar: '#toolbar'//工具条
            ,page: true
            ,id:'aa'//父表id
            ,height: 800
            ,cols: [[
                {type: 'checkbox'},
                {title: ' ', width: 50, icon: ['layui-icon layui-icon-triangle-r', 'layui-icon layui-icon-triangle-d'], children:[
                        {
                            title: '团长'
                            ,url: function(row){
                                console.log(row)
                                return 'chiefdata?userid='+row.userid;
                            }
                            ,height: 500
                            ,toolbar: '#toolbarDemo'//工具条
                            ,id:'dd'
                            ,page: true
                            ,cols: [[
                                {type: 'checkbox', fixed: 'left'},
                                {field: 'userid', title: '用户ID',  sort: true, filter: true},
                                {field: 'username', title: '用户名',  sort: true, filter: true},
                                {field: 'eferencesid', title: '所属业务员',  filter: true},
                                {field: 'power', title: '权力',  filter: true},
                                {field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
                            ]]
                            ,done: function () {
                                soulTable.render(this);
                            }
                            , limit: 10 // 当前页数
                            , limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
                            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
                                var result;
                                if (this.page.curr) {
                                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                                } else {
                                    result = res.data.slice(0, this.limit);
                                }
                                return {
                                    "code": res.code, //解析接口状态
                                    "msg": res.msg, //解析提示文本
                                    "count": res.count, //解析数据长度
                                    "data": result //解析数据列表
                                };
                            },
                            toolbarEvent: function (obj, pobj) {
                                var check =  table.checkStatus('dd');//这是错误的写法
                                console.log(this.id);
                                console.log(check);
                                console.log(check.data);
                                console.log(obj);
                                // obj 当前行对象
                                if (obj.event === 'batchzr') {
                                    layer.msg('重载成功!')
                                }
                            }
                        }
                    ]},
                {field: 'userid', title: '用户ID',  sort: true, filter: true},
                {field: 'username', title: '用户名',  sort: true, filter: true},
                {field: 'role', title: '用户角色',  filter: true},
                {field: 'ascriptionid', title: '归属',  filter: true},
                {field: 'joindate', title: '加入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true}
            ]]
            ,done: function () {
                soulTable.render(this)
            }
            , limit: 10 // 当前页数
            , limits: [10, 30, 50, 100, 200, 500, 1000, 5000, 10000, 20000, 50000]
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据,res为从url中get到的数据
            var result;
            if (this.page.curr) {
                result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
            } else {
                result = res.data.slice(0, this.limit);
            }
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "count": res.count, //解析数据长度
                "data": result //解析数据列表
            };
        }

        });
        table.on('tool(toolbar)', function (obj){
            console.log('tool')
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值(也可以是表头的 event 参数对应的值)
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象(如果有的话)

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

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


    })
</script>

 

  • 用上面的id是取不到多选框的值的,因为子表和父表同属一个容器,但是却是两个表
  • 那么,我们可以使用
toolbarEvent: function (obj, pobj) {
       var check =  table.checkStatus(this.id);
       console.log(this.id);
       console.log(check);
       console.log(check.data);
       console.log(obj);
       // obj 当前行对象
       if (obj.event === 'batchzr') {
        layer.msg('重载成功!')
        }
 }

 

  • this.id可以获取当前列表的id值,可以打印出来,是不一样的
  • 最后想了解更多,可以去阅读原文
  • https://saodiyang.gitee.io/layui-soul-table/#/zh-CN/component/child/event

http://www.niftyadmin.cn/n/1385387.html

相关文章

JVM的GC学习记录之一内存分配

2019独角兽企业重金招聘Python工程师标准>>> 按照官方的说法&#xff1a;“Java 虚拟机具有一个堆&#xff0c;堆是运行时数据区域&#xff0c;所有类实例和数组的内存均从此处分配。堆是在 Java 虚拟机启动时创建的。”“在JVM中堆之外的内存称为非堆内存(Non-heap…

现实迷途 第二十九章 钱是大爷

第二十九章 钱是大爷 注&#xff1a;原创作品&#xff0c;请尊重原作者&#xff0c;未经同意&#xff0c;请勿转载&#xff0c;否则追究责任。 钱珊和江北几乎是同一时间离开曾一起共事的那家公司的&#xff0c;钱珊离开后&#xff0c;随即跳到了一家贸易公司&#xff0c;这是一…

从源码了解spring bean实例化过程

我们先来看下spring如何手动初始化一个对象 ClassPathResource res new ClassPathResource("beans.xml"); DefaultListableBeanFactory factory new DefaultListableBeanFactory(); XmlBeanDefinitionReader reader new XmlBeanDefinitionReader(factory); reader…

LayUI数据表格时间戳转换为时间

在我们从后台传回来的数据很多&#xff0c;在后台格式化再传过来会很麻烦那么我们可以传过来之后再进行格式化&#xff0c;数据表格的格式化方式如下&#xff1a; {field: dateline, title: 加入时间, width: 165, sort:true ,templet:function (d) {return layui.util.toDate…

APP中数据加载的6种方式-b

我们看到的APP&#xff0c;往往有着华丽的启动界面&#xff0c;然后就是漫长的数据加载等待&#xff0c;甚至在无网络的时候&#xff0c;整个处于不可用状态。那么我们怎么处理好界面交互中的加载设计&#xff0c;保证体验无缝衔接&#xff0c;保证用户没有漫长的等待感&#x…

Unicode规范中的BOM

Unicode规范中有一个BOM的概念。BOM——Byte Order Mark&#xff0c;就是字节序标记。在这里找到一段关于BOM的说明&#xff1a; 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符&#xff0c;它的编码是FEFF。而FFFE在UCS中是不存在的字符&#xff0c;所以…

WIN7电脑文件莫名其妙被删除后的恢复

今天早上打开电脑&#xff0c;发现电脑F盘下的WINCE600文件夹下有剩下一小部分文件&#xff0c;绝大部分文件都找不到了&#xff0c;但是我记得自己没有删除过&#xff0c;而且在回收站也没有找到这些被删除的文件&#xff0c;怎恢复呢&#xff0c;今天尝试使用Recover4all来回…

C++ Generate Rand Number Array by srand() 生成随机数

在C中&#xff0c;我们有时想生成一个由随机数组成的数组&#xff0c;而且随机数的范围也可由我们来设定。那么我们就要用到srand()函数配合rand()来使用&#xff0c;参见如下代码&#xff1a; #include <vector> #include <iostream> #include <time.h> #in…