Question

我目前正在构建具有添加和删除行功能的新表。我在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

Answer 1

问题是您正在使用选择器#add-row，这意味着它正在寻找具有 id 属性的“ add-row”元素。您的button元素没有id属性，但是具有具有该值的name属性，在这种情况下，您需要使用以下选择器：

$('[name="add-row"]').click(function(){
    table.addRow({});
});

我是否缺少正确添加按钮的方式？

1 个答案: