javascript - 制表器 - 如何仅提取数据并保存为 json 对象
问题描述
有没有办法将制表器表中的所有数据保存到 jquery/javascript 中的变量中?我注意到他们有一个
table.downloadToTab("json");
很酷的方法,但我不想打开新的浏览器,我只想保存到一个变量中。
我知道我可以编写自己的 javascript / jquery 代码来循环遍历行和单元格,但看起来他们没有使用传统的表格,<tr>
但<td>
一切都是具有特定类名的。
例如,这是为制表符表中的一行数据创建的所有 HTML:
<div class="tabulator-row tabulator-selectable tabulator-row-odd" role="row" style="padding-left: 30px;">
<div class="tabulator-cell tabulator-row-handle tabulator-frozen tabulator-frozen-left" role="gridcell" title="" style="width: 30px; position: absolute; left: 0px; height: 29px;">
<div class="tabulator-row-handle-box">
<div class="tabulator-row-handle-bar"></div>
<div class="tabulator-row-handle-bar"></div>
<div class="tabulator-row-handle-bar"></div>
</div>
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="id" title="" style="width: 150px; height: 29px;">
2134561
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="first_name" tabindex="0" title="" style="width: 150px; height: 29px;">
jane
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="last_name" tabindex="0" title="" style="width: 150px; height: 29px;">
doe
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="company" tabindex="0" title="" style="width: 150px; height: 29px;">
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="email" tabindex="0" title="" style="width: 150px; height: 29px;">
janedoe@testing.ca
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="title" tabindex="0" title="" style="width: 150px; height: 29px;">
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="registered" title="" style="width: 150px; height: 29px;">
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="speak" aria-checked="false" title="" style="width: 167px; text-align: center; height: 29px;">
<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve">
<path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"></path>
</svg>
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="paid" aria-checked="false" title="" style="width: 167px; text-align: center; height: 29px;">
<svg enable-background="new 0 0 24 24" height="14" width="14" viewBox="0 0 24 24" xml:space="preserve">
<path fill="#CE1515" d="M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z"></path>
</svg>
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
<div class="tabulator-cell" role="gridcell" tabulator-field="example" title="" style="width: 167px; height: 29px;">
<a href="mailto://email" target="_blank">janedoe@testing.ca</a>
<div class="tabulator-col-resize-handle"></div>
<div class="tabulator-col-resize-handle prev"></div>
</div>
</div>
很多html!但我可以编写代码......我只是想知道是否有更好的方法。
解决方案
您可以使用制表符的getData()
方法:
var array = table.getData();
这会将所有表的数据作为二维数组返回。如果您只想获取当前过滤的数据(对用户可见),则true
作为参数传递:
var array = table.getData(true);
如果您需要以某种方式传输/保存这些数据,您可以使用本机JSON.stringify()
函数生成 JSON:
var json = JSON.stringify(array);
推荐阅读
- testing - 如何使用 TestCafe 向上和向下滚动?
- amazon-redshift - 无法在 Redshift 存储过程中动态截断表
- java - Testing Spring Boot Library Modules
- python - 转换一个opencv脚本
- c# - Physics2D.OverlapCircleAll 未检测到其他游戏对象
- vue.js - 我可以将什么放入 Vuex 状态?
- html - 无法制作有效的响应式网站,因为定位
- r - 将日期作为标题和每个日期的多个观察值转置一个小标题
- python - Luigi 任务和包装器失败
- python-3.x - 尝试通过 Python Gitlab api 将 gz 文件上传到 Gitlab