如何获取所有行值制表器？ [英] How to get all row values tabulator?

问题描述

我有使用制表符的可编辑表格。

一切正常，但问题是我点击保存按钮时无法获得所有行值

我正在尝试的是：

  $（document）.ready（function（）{var tabledata = [{id：1，name：Oli Bob，age：12，col：red，dob：}，{ id：2，姓名：Mary May，年龄：1，col：blue，dob：14/05/1982}，{id：3，姓名：Christine Lobowski，年龄：42 ，col：green，dob：22/05/1982}，{id：4，名称：Brendon Philips，年龄：125，col：orange，dob：01/08 / 1980}，{id：5，name：Margret Marmajuke，年龄：16，col：yellow，dob：31/01/1999}，]; var table = new Tabulator（＃example -table，{height：205，data：tabledata，layout：fitColumns，columns：[{title：Name，field：name，width：150}，{title：Age，field：年龄，可见：假}，{标题：F avourite Color，字段：col}，{title：出生日期，字段：dob，分类器：date，align：center}，]，footerElement：< button id ='保存'class ='左拉'标题='保存'>保存< /按钮> ，}）; $（document）.on（click，＃save，function（）{/ * var data = $（＃example-table）。tabulator（getData）; * / var data = $（'＃example-table'）。getData（）; console.log（'save clicked'）;}）;}）;  

 < script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min。 js>< / script>< link href =https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css\"rel =stylesheet>< script type =text / javascriptsrc =https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js>< / script>< script type = text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.1.5/js/jquery_wrapper.js>< / script>< div id =example-table >< / div>  

运行时显示错误

TypeError：$ .widget不是函数

当我尝试使用时：

  var data = $（＃example-table）。tabulator（getData）; 
  

我收到此错误：

TypeError：$（...）。tabulator不是函数

使用时：

  var data = $（'＃example-table'）。getData（）; 
  

错误是：

TypeError：$（...）。getData不是函数

当我尝试使用这个方法：

  $（＃example-table）。tabulator（{// table setup options}）; 
  

它没有显示任何内容（空白）。

<有人能告诉我什么是错的吗？或者给我参考如何获取所有行值？

您也可以尝试使用jsfiddle，检查这里

解决方案

问题是因为你声明了表变量在函数内部，所以它的范围是有限的。

如果你在全局范围内声明它，然后在函数内部分配它，那么它随处可见。

  //全局范围
 var table 
 
 //在表内分配 - 注意没有var 
函数generateGrid（）{
 table = new Tabulator（＃example-table，{.... 
} 
 
 //然后你可以使用它到处都是
 var data = table.getData（）; 
  

I have editable table using tabulator.

Everything is ok, but the problem is I can't get all row value when click "save button"

What I'm trying is:

$(document).ready(function() {
var tabledata = [
 	{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
 	{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
 	{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
 	{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
 	{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
 ];
 
var table = new Tabulator("#example-table", {
 	height:205,
 	data:tabledata,
 	layout:"fitColumns",
 	columns:[
	 	{title:"Name", field:"name", width:150},
	 	{title:"Age", field:"age", visible: false},
	 	{title:"Favourite Color", field:"col"},
	 	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
 	],
 	footerElement:"<button id='save' class='pull-left' title='Save'>Save</button> ",
});

	$(document).on("click", "#save", function(){
 		/* var data = $("#example-table").tabulator("getData"); */
 		var data = $('#example-table').getData();
   	    console.log('save clicked');
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.1.4/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.1.4/dist/js/tabulator.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/4.1.5/js/jquery_wrapper.js"></script>


<div id="example-table"></div>

When running it shows error

TypeError: $.widget is not a function

When I try using:

var data = $("#example-table").tabulator("getData");

I get this error:

TypeError: $(...).tabulator is not a function

when using:

var data = $('#example-table').getData();

the error is:

TypeError: $(...).getData is not a function

When I try to define the table using this method:

$("#example-table").tabulator({ //table setup options });

it's not showing anything (blank).

Can someone tell me what's wrong? Or give me the reference how to get all row values?

You can try in jsfiddle too, check here

解决方案

The issue is because you are declaring the table variable inside a function, so its scope is limited.

If you declare it in the global scope, and then assign it inside the function it will then be accessible everywhere.

//global scope
var table

//assign inside table - notice no "var"
function generateGrid(){
    table = new Tabulator("#example-table", { ....
}

//you can then use it everywhere
var data = table.getData();

这篇关于如何获取所有行值制表器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！