bootstrap 之 uniqueId

bootstrap 之 uniqueIddataTable bootstrapTab destroy bootstrapTab columns field OrganizeID title 部门编号 halign center align center

$('#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 ''; }, }], data: tableData, striped:true, uniqueId:'ID', //ID可以为data里的唯一标识字段 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:''},     ..... ]

设置了这个之后,就可以使用$(‘#dataTable’).bootstrapTable(‘getRowByUniqueId’, 1)获取某一行的数据,后面的1就是你要的那一行的uniqueId,也就是tableData中每个对象的ID属性的值。

使用uniqueId还有个好处就是指定行更新,当你操作了一行数据之后,想要它立刻展示修改后的内容而又不想刷新页面,uniqueId就排上用场了:

// id:uniqueid row:更新之后的行内容 $("#dataTable").bootstrapTable('updateByUniqueId', { id: target.id, row: target });

当然获整个行内容配合 getSelections更好:

$("#dataTable").bootstrapTable('getSelections');
function getData(pointer) {         var uniqueId = pointer.parentNode.parentNode.getAttribute('data-uniqueid');         //rowData为此行的数据对象         var rowData = $('#staArea').bootstrapTable('getRowByUniqueId', uniqueId); }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/206069.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月19日 下午4:33
下一篇 2026年3月19日 下午4:33


相关推荐

  • pycharm调试教程_程序调试时应当用

    pycharm调试教程_程序调试时应当用Python入门:使用PyCharm调试Python程序面向Python初学者PyCharm集成运行环境   在了解Python编程之前,我们需要先弄明白如何编写运行代码。所以非常有必要先讲解一下Python的集成开发环境,也就是IDE(IntegratedDevelopmentEnvironment)。PyCharm是一款优秀的开源Python语言集成开发工具。PyCharm…

    2022年8月26日
    7
  • 如何编写优秀的单元测试用例「建议收藏」

    如何编写优秀的单元测试用例「建议收藏」优秀单元测试的定义​单元测试:一段自动化的代码,这段代码调用被测试的工作单元,之后对这个工作单元的单个最终结果的某些假设进行检验。单元测试几乎都是用单元测试框架进行编写。单元测试容易编写,快速运行,可自动化,可靠,可读,可维护,结果稳定。  集成测试:对一个工作单元进行的测试,这个测试对被测试的工作单元没有完全的控制,并使用该单元的一个或多个真实依赖物,例如数据库、系统时间、系统文件等  工作单元:从调用系统一个公共方法到产生一个测试可见的最终结果,其间这个系统发生的行为。一个

    2022年6月15日
    41
  • 讯飞星辰Agent开发平台已全面支持MCP

    讯飞星辰Agent开发平台已全面支持MCP

    2026年3月14日
    2
  • WerFault.exe 占用CPU 100%的问题处理[通俗易懂]

    WerFault.exe 占用CPU 100%的问题处理[通俗易懂]转载自:https://technet.microsoft.com/en-us/library/cc754364(v=ws.11).aspx关于禁用WerFault.exe进程的操作方法,网络上的其它设置都不生效,通过官方给出的操作,完美的禁用了此进程,适用于win2008。AppliesTo:WindowsServer2008R2WindowsErrorRe…

    2022年6月15日
    38
  • oracle查找数据库中所有表_oracle查看某个表的索引

    oracle查找数据库中所有表_oracle查看某个表的索引ORACLE查询数据中所存在的表,搜索指定的表

    2022年4月22日
    84
  • 阿里图床api_阿里远程图床

    阿里图床api_阿里远程图床介绍:一款非常美观且极简响应式的阿里图床PHP源码服务器要求支持php修复了浏览器复制出错的bug网盘下载地址:http://kekewl.cc/3NvM8RdOWui0图片:

    2025年6月5日
    4

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号