bootstrap单击双击获取行内容,表内容

今天药忘吃喽~ 2024-04-17 05:41 83阅读 0赞

$("#realTime_Table").bootstrapTable({ 
    
        //还是稍微介绍一下吧，这些注释是额外的，要加钱
        //是否显示查找
        search: false,
        //是否分页
        pagination: false,
        //每页显示多少条数据，也就是要显示多少行
        pageSize: 15,
        //分页，选择不同数字会改变上面的pageSize
        pageList: [5, 10, 15, 20],
        //显示列
        showColumns: true,
        //显示刷新按钮
        showRefresh: false,
        //是否可见
        showToggle: true,
        //默认英文，设置如下就是显示中文
        locale: "zh-CN",
        //显示时background-color白灰相间
        striped: true,
    
        /* * * * * *下面才是本文要介绍的，其他都是额外的，包括这句话 * * * * */
    
    
        //=======================================================================================
        //双击触发的事件，当双击就会获取row，row就是该整行的内容，其中"row.playerName"中"playerName"是data-field定义的字段，（如果在js中定义，就是field定义的字段,）可以通过该方法获取该行所有列的值
        onDblClickRow: function(row) { 
            console.log("click:" + row.playerName)
        }
    
        //=======================================================================================
        //如果想单击获取row，把onDblClickRow改为onClickRow，如下
        //onClickRow: function (row) { 
        // console.log("click:" + row.playerName)
        // }
    
        //=======================================================================================
        //想获取全表的内容，只要用下面的方法,其中allTableData是个数组，整张表的内容，你可以使用遍历获取每行的内容，也可以使用索引直接获取你想要的那行的内容
        var indexTemp = 0;
        var playerNameTemp = '张小帅';
        var allTableData = $('#realTime_Table').bootstrapTable('getData');
        for (var i = 0; i < allTableData.length; i++) { 
            //如果此行中有玩家名字（此处默认名字不重复）与你想获取的相同，则跳出循环，indexTemp是你要的行索引
            if (allTableData[i].playerName == playerNameTemp) { 
                indexTemp = i;
                break;
            }
        }
        console.log("玩家张小帅的数据在表的第" + (indexTemp + 1) + "行");
    
    });