BootStrapTable 单选及取值的实现方法

发布时间：2020-12-18 00:42:57 所属栏目：安全来源：网络整理

导读：学习bootstrapTable 一直没有找到单选框的选定的和取值的教程,今天写一个.作为笔记 1. 效果图: 点击 bootstrapTable 单选的按钮,选中该列,取到该列的所有值. 2. js 代码 : bootstrapTable 初始化 a. 注意: // bootstrapTable 表格数据初始化 var table = $(

学习bootstrapTable 一直没有找到单选框的选定的和取值的教程,今天写一个.作为笔记

1. 效果图: 点击 bootstrapTable 单选的按钮,选中该列,取到该列的所有值.

2. js 代码 : bootstrapTable 初始化

a. 注意:

// bootstrapTable 表格数据初始化
var table = $('#item_info_table').bootstrapTable({
url : '',method : 'POST',// GET
uniqueId : 'id',// 绑定ID
toolbar : '#item_info_toolbar',// 搜索框绑定
search : true,// 搜索框
pagination : true,// 显示页码等信息
singleSelect : true,// 单选checkbox
showRefresh : true,// 显示刷新按钮
showColumns : true,// 选择显示的列
pageSize : pageSize,// 当前分页值
pageList : pageList,// 分页选页
dataType : dataType,// JSON
sidePagination : sidePagination,// 服务端请求
buttonsAlign : buttonsAlign,// 刷新,显示列按钮位置
toolbarAlign : toolbarAlign,// 搜索框位置
columns : [
{
checkbox: true
},{
title : '项目序号',field : 'itemNum',align : 'center',formatter:function(value,row,index){
var url = '';
if (isSingleItem(value)) url = '<a href="#" mce_href="#" onclick="single_item_edit_fun('' + row.infoId + '')">' + row.itemNum + ' ';
if (isJoinItem(value)) url = '<a href="#" mce_href="#" onclick="join_item_edit_fun('' + row.infoId + '')">' + row.itemNum + ' ';
return url;
}
},{
title : '项目名称',field : 'itemName',align : 'center'
}
]
});
/** bootstrapTable toolbar 按钮事件 *****/
// [新增] 按钮点击事件
$('#item_info_btn_add').click(function(){
$('#item_info_modal').modal('show');
});
// [项目立项] 按钮点击事件
$('#item_info_btn_do').click(function(){
var selectContent = table.bootstrapTable('getSelections')[0];
if(typeof(selectContent) == 'undefined') {
toastr.warning('请选择一列数据!');
return false;
}else{
console.info(selectContent);
$('#item_project_modal').modal('show'); // 项目立项面板
}
});
});

3. bootstrapTable url : '', 后台json数据

注意. 第一个图片中的 chrome F12 中的 Object 就是selectContent =table.bootstrapTable('getSelections')[0] 中的数据了这样我们就能取到 bootstrap 单选框选择一行的数据.

以上所述是小编给大家介绍的BootStrapTable 单选及取值的实现方法。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!