layui表格交互问题

提问 已结 4 144
宽广小黑豆
悬赏:50飞吻
版本:layui 浏览器:谷歌


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 回复
  • @IDyun 老哥 刚刚发现一个问题 特别急 就是这个上下交互的问题 按照你给我这个例子说 :

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

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