layui数据 上面表格的数据向下面的表格的数据移动 急!!!!

提问 已结 9 269
宽广小黑豆
悬赏:200飞吻
版本:layui 浏览器:谷歌

非常 特别急 我是后端但是现在要求前后端一起做,所以请大神指导 html跟js都需要 上面的表格已经做完了 现在差下面的表格 html跟js都没有写 谢谢各位大神
回帖
  • IDyun
    2019-6-12

    简单的例子,不过分页有点问题
    https://www.layui.com/demo/
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1559794877226" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <table class="layui-hide" id="demo" lay-filter="demo"></table>

    <table class="layui-hide" id="test_copy" lay-filter="test_copy"></table>

    <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote>


    <script src="//res.layui.com/layui/dist/layui.js?t=1559794877226"></script>
    <script>
    layui.config({
    version: '1559794877226' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
    var laydate = layui.laydate //日期
    ,laypage = layui.laypage //分页
    ,layer = layui.layer //弹层
    ,table = layui.table //表格

    //执行一个 table 实例
    table.render({
    elem: '#demo'
    ,height: 420
    ,url: '/demo/table/user/' //数据接口
    ,title: '用户表'
    ,page: true //开启分页
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市', width:150}

    ]]
    });
    table.on('checkbox(demo)', function(obj){
    var checkStatus = table.checkStatus('demo'); //test_copy 即为基础参数 id 对应的值

    console.log(checkStatus.data) //获取选中行的数据
    table.reload('test_copy', {data:checkStatus.data
    });
    });

    //执行一个 table 实例
    table.render({
    elem: '#test_copy'
    ,data:[]
    ,title: '用户表'
    ,cols: [[ //表头
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
    ,{field: 'username', title: '用户名', width:80}
    ,{field: 'experience', title: '积分', width: 90, sort: true, totalRow: true}
    ,{field: 'sex', title: '性别', width:80, sort: true}
    ,{field: 'score', title: '评分', width: 80, sort: true, totalRow: true}
    ,{field: 'city', title: '城市', width:150}

    ]]
    });



    });
    </script>
    </body>
    </html>
    0 回复

  • 上面表格的html 与 js
    0 回复
  • @IDyun 老哥 我去看了 怎么我点击以后它不下移啊
    0 回复
  • @IDyun 老哥 牛逼 我爱你 哈哈哈哈 爱死你了 好用 好用 我抄一抄
    0 回复
  • IDyun
    2019-6-12
    关于 table 的 checkbox 跨页状态保存的一种实现方式
    岁月小偷
    https://fly.layui.com/user/message/
    0 回复
  • @IDyun 老哥 我怎么获取到数据表格中复选框的状态是否选中啊 很急
    0 回复
  • 0 回复
  • IDyun
    2019-6-13
    @宽广小黑豆
    console.log(table.cache);//当前表格页数据
    var tableId = 'tableId';//表格id
    var index = obj.tr.data('index');//当前行
    table.cache[tableId][index].LAY_CHECKED;//表格缓存区数据复选框选中状态
    0 回复
  • @IDyun 老哥 刚刚发现一个问题 特别急 就是这个上下交互的问题 按照你给我这个例子说 :

    第一页我选择了两行数据 并且追加到了下面, 然后我点击第二页 再从第二页的数据里面选择两行数据,这个时候也追加成功了 但是第一页选择的两行数据消失了 下面表格只存在第二页的数据了

    请问有什么办法可以让下面表格第一页的两条数据和第二页的两条数据都存在吗 ,这个问题特别急 真的特别希望您在看到的第一时间帮忙解决一下 。[衰]
    0 回复