同一页面两个table中数据选择问题

发布于 2022-09-04 12:56:13 字数 2597 浏览 11 评论 0

同一页面中有两个table,功能是从一个table中选择数据添加到另一个table1中。
其中第二个table也有checkbox框
有几个问题
1、数据添加到table1中也会被默认选中
2、再次添加时,使用$("#table").bootstapTable("getAllSelections")从table取选中数据,如果在table1中此条数据是取消选中状态,数据不会取出来。
就是说不同table中选择数据会影响另一个表,这是怎么回事啊。

<table id="table"></table>
<table id="table1"></table>

    $('#table').bootstrapTable({
        height:323,
        classes:'table table-xkap table-hover',
        columns: [
            {checkbox:true,width:'5%'},
            {field: 'id',title: '标识列',visible:false}, 
            {field: 'userid',title: '用户标识',align:'center',width:'20%'}, 
            {field: 'username',title: '姓名',align:'center',width:'10%'}, 
            {field: 'deviceid',title: '设备标识',align:'center',width:'20%'},
            {field: 'sleeptime',title: '始睡时间',align:'center',width:'20%'},
            {field: 'getuptime',title: '起床时间',align:'center',width:'20%'},
            {field: 'score',title: '睡眠评分',align:'center',width:'10%'}
        ],
        idField:'id',
        uniqueId:'id',
        url: "data/isleep/data01.json",
        pagination:true,
        pageSize:5,
        pageList:[5,10,'ALL'],
        selectItemName:'id',
        clickToSelect:true,
        toolbar: "#source-toolbar",
        toolbarAlign:'right'
        
    });
    $('#table1').bootstrapTable({
        height:275,
        classes:'table table-xkap table-hover',
        columns: [
            {checkbox:true,width:'5%'},
            {field: 'id',title: '标识列',visible:false}, 
            {field: 'userid',title: '用户标识',align:'center',width:'20%'}, 
            {field: 'username',title: '姓名',align:'center',width:'5%'}, 
            {field: 'deviceid',title: '设备标识',align:'center',width:'20%'},
            {field: 'sleeptime',title: '始睡时间',align:'center',width:'20%'},
            {field: 'getuptime',title: '起床时间',align:'center',width:'20%'},
            {field: 'score',title: '睡眠评分',align:'center',width:'10%'}
        ],
        idField:'id',
        uniqueId:'id',
        selectItemName:'id',
        clickToSelect:true
    });
    
    
    $("#btn_select").on("click",function(){
        $("#table1").bootstrapTable("uncheckAll");
        var data = $("#table").bootstrapTable("getAllSelections");
        //$("#table1").bootstrapTable("appendByUniqueId",data);
        $("#table1").bootstrapTable("append",data);
        
    });
    
    $("#btn_test").click(function(){
        //在table1中取消选中后,即使table中对应数据是选中状态也不会被获取
        var data = $("#table").bootstrapTable("getAllSelections");
        console.log(data.length);
    });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

⊕婉儿 2022-09-11 12:56:13

看了一中午,debugger发现了问题

 var data = $("#table").bootstrapTable("getAllSelections");
 $("#table1").bootstrapTable("append",data);
 //append到table1的data与原data中的数据引用的应该是同一地址的数据,check方法会改变数据中row[0]的值
 //getAllSelections也是根据这个row[0]来判断是否选中
 //修改下代码解决了问题
 var data = $("#table").bootstrapTable("getAllSelections");
 var newdata = $.extend(true,[],data); //复制一份数据
 $("#table1").bootstrapTable("append",newdata);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文