Question

FooTable v2允许用户将DOM元素 - 行注入表中 - 并且排序仍然有点工作。 FooTable v3是一个完整的重写，表中的数据完全由FooTable管理。原始DOM由FooTable.init重构。添加到DOM将意味着FooTable排序和过滤将不知道添加的记录。据我所知，向FooTable v3添加新行的正确方法是调用编辑组件的函数“addRow”。

FooTable的原作者已经假设了许多东西 - 比如开发人员会想要使用弹出窗口来询问值。在我的情况下，当添加一行时，我不希望弹出一个编辑器窗口来询问值。我只是想以编程方式/动态地向表中添加一个空行，而不使用任何可运行的UI组件。

如何调用此功能？什么是正确的语法。

我通过......开始我的桌子。

$(document).ready(function () {
    $('.my-footable').footable({
        "editing": {
            "enabled":"true"
        }
    });
});

...我在按钮上有一个点击事件......

$(document).on("click", "#myButton", function (event) {

        var editing = FooTable.get(".my-footable").use(FooTable.Editing);

});

...但我对如何调用addRow感到难过 - 以及我传递的参数......

有什么想法吗？

Answer 1

$(document).ready(function() {

  var columns_name = ['id', 'first name', 'last name', 'job title'],
    columns = [],
    rows = [{
      'id': 1,
      'first_name': 'Dennise',
      'last_name': 'Fuhrman',
      'job_title': 'High School History Teacher'
    }];
  /**
  	Creating a new object with the help of columns_name array with
  	having key title and name and then pushing it to the columns array. We'll
  	pass that array in the footable init object.
  */
  for (var i = 0; i < columns_name.length; i++) {
    var column = columns_name[i];
    /**
    	In name key replacing spaces with underscore so that it will match with
    	the keys in row array of object
    */
    columns.push({
      title: column,
      name: column.replace(/ /g, "_")
    });
  }

  var ft_init_options = {
    columns: columns,
    rows: rows,
    editing: {
      enabled: true,
      alwaysShow: true,
      allowAdd: true,
      allowEdit: false,
      addRow: function() {
        /**
        	Creating new row with empty columns having input field
        */
        var values = {
          'id': '<input type="text">',
          'first_name': '<input type="text">',
          'last_name': '<input type="text">',
          'job_title': '<input type="text">'
        }
        ft.rows.add(values);
      },
      deleteRow: function(row) {
        if (confirm('Are you sure you want to delete the row?')) {
          row.delete();
        }
      }
    }
  };

  var ft = FooTable.init('#editing-example', ft_init_options);
});

/**
	Remove the following comments if you want to remove the border from the inputs
	and want to display when they are in focus

	*/


/**
	textarea:focus, input:focus{
		border-width: 2px;
		border-style: inset;
		border-color: initial;
		border-image: initial;
	}
	textarea, input {
		border : none;
	}

	**/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fooplugins.github.io/FooTable/compiled/footable.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>

<div class="container-fluid">
  <hr>
  <h1 class="text-center"> FooTable Editing Example with inputs in row</h1>
  <hr>
  <table id="editing-example" class="table"></table>
</div>

如果代码段不起作用，请查看jsfiddle

如何使用FooTable v3向表中添加空行

1 个答案: