bootstraptable之uniqueId

如何设置每行唯一的标识符uniqueId

$('#dataTable').bootstrapTable('destroy').bootstrapTable({columns: [{field: 'OrganizeID',title: '部门编号',halign:'center',align:'center'},{field: 'TrueName',title: '姓名',halign:'center',align:'center',// visible: false},{field: 'UserName',title: '用户名',halign:'center',//表头居中显示align:'center'},{field: 'Phone',title: '电话',halign:'center',align:'center'},{field: 'Email',title: '邮箱',halign:'center',align:'center',},{title: '查看此行数据',align:'center',halign:'center',valign:'middle',formatter: function (value, row, index) {var data = row;return '<button class="btn btn-success" onclick="getData(this)">查看此行数据</button>';},}],data: tableData,striped:true,uniqueId:'ID',pagination:true,  //设置为 true 会在表格底部显示分页条。paginationLoop:false, //设置为 true 启用分页条无限循环的功能。pageSize:10,//每页初始显示的条数pageList:[5,10],});

tableData的数据结构如下
[{ID:'',OrganizeID:'',TrueName:'',UserName:'',PassWord:'',Phone:'',Email:''},   {ID:'',OrganizeID:'',TrueName:'',UserName:'',PassWord:'',Phone:'',Email:''},.....
]
uniqueId:'ID',中的ID,就是tableData中每个对象的ID属性。
设置了这个之后，就可以使用$('#dataTable').bootstrapTable('getRowByUniqueId', 1)获取某一行的数据，后面的1就是你要的那一行的uniqueId，也就是tableData中每个对象的ID属性的值。
设置完成之后，dom结构中出现了data-uniqueid,见下图

function getData(pointer) {var uniqueId = pointer.parentNode.parentNode.getAttribute('data-uniqueid');//rowData为此行的数据对象var rowData = $('#staArea').bootstrapTable('getRowByUniqueId', uniqueId);}

参考：
https://github.com/wenzhixin/bootstrap-table/issues/2600

bootstraptable之uniqueId相关推荐

Bootstrap-Table事件和方法
本文章为整理之后的,仅供参考官方文档地址:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 事件的调用方法,前面有过案例 $( ...
bootstrap 之 uniqueId
$('#dataTable').bootstrapTable('destroy').bootstrapTable({columns: [{field: 'OrganizeID',title: '部门编 ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
bootstrap拖动div_JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
var i_statuindex = 0;var arrdata =[];var m_oTable = null; $(function () {//1.初始化表格 m_oTable = newTab ...
bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
Bootstrap-table学习笔记（二）——前后端分页模糊查询
在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1,前端分页 2,后端分页 3,模糊查询前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. ...
bootstrap-table表格插件的使用案例
近期刚刚结束一个项目,总结一下之前做的一个后台管理系统中用到的bootstrap-table表格插件,下面是我做的一个案例(展示主要代码部分): //请求服务数据时所传参数function query ...
bootstraptable合并标题_Bootstrap-table 单元格合并、表头合并
1.页面引入js/css @*1.Jquery组件引用*@ @*2.bootstrap组件引用*@ @*3.bootstrap table组件以及中文包的引用*@ 2.页面定义一个table 3.初始 ...
Bootstrap-Table入门篇
首先要下载bootstrap Table插件所必须的js,地址:https://github.com/wenzhixin/bootstrap-table 了解官方文档地址:http://bootstr ...

bootstraptable之uniqueId

bootstraptable之uniqueId相关推荐

最新文章

热门文章