我错过了如何正确添加按钮吗?
Am I missing how add buttons properly?
我目前正在构建一个具有添加和删除行功能的新 table。我在 4.0 的文档中看到如何添加这些按钮。我能够让按钮显示出来,但是它们背后的功能不存在。
任何帮助或在这个问题上指出正确的方向都会很棒。先感谢您。
<head>
<link href="dist/css/tabulator.css" rel="stylesheet">
<link rel="stylesheet" href="landing_css.css">
<meta charset="ISO-8859-1">
</head>
<body>
<div id="example-table"></div>
<div id="tabulator-controls">
<button name="add-row">
+ Add Row
</button>
</div>
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript">
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
//data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"bottom", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:10, //allow 10 rows per page of data
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[ //Define Table Columns
{title:"Admin (Yes/No)", field:"admin", width:150, editor:"select", editorParams:{"Yes":"Yes", "No":"No"}},
{title:"First Name", field:"firstname", width:150, editor:"input"},
{title:"Last Name", field:"lastname", width:150, editor:"input"},
{title:"Job Title", field:"job", width:150, editor:"input"},
{title:"Email Address", field:"email", width:150, editor:"input"},
});
$("#add-row").click(function(){
table.addRow({});
});
</script>
I
问题是您正在使用选择器 #add-row
,这意味着它正在寻找具有 id 属性的元素"add-row"。您的按钮元素没有 id 属性,但有一个具有该值的 name 属性,在这种情况下,您需要使用以下选择器:
$('[name="add-row"]').click(function(){
table.addRow({});
});
我目前正在构建一个具有添加和删除行功能的新 table。我在 4.0 的文档中看到如何添加这些按钮。我能够让按钮显示出来,但是它们背后的功能不存在。
任何帮助或在这个问题上指出正确的方向都会很棒。先感谢您。
<head>
<link href="dist/css/tabulator.css" rel="stylesheet">
<link rel="stylesheet" href="landing_css.css">
<meta charset="ISO-8859-1">
</head>
<body>
<div id="example-table"></div>
<div id="tabulator-controls">
<button name="add-row">
+ Add Row
</button>
</div>
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript">
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
//data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"bottom", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:10, //allow 10 rows per page of data
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[ //Define Table Columns
{title:"Admin (Yes/No)", field:"admin", width:150, editor:"select", editorParams:{"Yes":"Yes", "No":"No"}},
{title:"First Name", field:"firstname", width:150, editor:"input"},
{title:"Last Name", field:"lastname", width:150, editor:"input"},
{title:"Job Title", field:"job", width:150, editor:"input"},
{title:"Email Address", field:"email", width:150, editor:"input"},
});
$("#add-row").click(function(){
table.addRow({});
});
</script>
I
问题是您正在使用选择器 #add-row
,这意味着它正在寻找具有 id 属性的元素"add-row"。您的按钮元素没有 id 属性,但有一个具有该值的 name 属性,在这种情况下,您需要使用以下选择器:
$('[name="add-row"]').click(function(){
table.addRow({});
});