[英]knockout databind jquery datatable to add a row
我正在研究一本书淘汰蓝图,其中作者展示了一种自定义绑定 jquery 数据表的方法。 但是我在添加新行时遇到了一些困难。 这是填写表格并点击添加数据表变空时的小提琴。 http://jsfiddle.net/LkqTU/33382/
我相信数据表没有成功销毁和重新创建。
这是自定义绑定。
ko.bindingHandlers.dataTable = {
init: function(element, valueAccessor, allBindingsAccessor) {
var value = valueAccessor(),
allBindings = ko.utils.unwrapObservable(allBindingsAccessor()),
options = allBindings.dataTableOptions || {},
$element = $(element);
$element.dataTable(options);
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$element.dataTable().fnDestroy();
});
value.subscribe(function(oldValue) {
console.log('one');
$element.dataTable().fnDestroy();
$element.find("tbody tr").remove();
}, null, "beforeChange");
value.subscribe(function() {
console.log('two');
$element.dataTable(options);
}, null);
}
}
您可以运行下面的整个代码段,或使用上面的小提琴。 谢谢
ko.bindingHandlers.dataTable = { init: function(element, valueAccessor, allBindingsAccessor) { var value = valueAccessor(), allBindings = ko.utils.unwrapObservable(allBindingsAccessor()), options = allBindings.dataTableOptions || {}, $element = $(element); $element.dataTable(options); ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $element.dataTable().fnDestroy(); }); value.subscribe(function(oldValue) { $element.dataTable().fnDestroy(); $element.find("tbody tr").remove(); }, null, "beforeChange"); value.subscribe(function() { $element.dataTable(options); }, null); } } function employee(id, firstName, lastName, phone, dept) { var self = this; this.id = ko.observable(id); this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.phone = ko.observable(phone); this.dept = ko.observable(dept); } function model() { var self = this; this.employees = ko.observableArray([ new employee('1', 'Joe', 'Smith', '333-657-4366', 'IT') ]); this.id = ko.observable(''); this.firstName = ko.observable(''); this.lastName = ko.observable(''); this.phone = ko.observable(''); this.dept = ko.observable(''); this.add = function() { self.employees.push(new employee( this.id(), this.firstName(), this.lastName(), this.phone(), this.dept() )); // console.log(ko.toJSON(self.employees)) } } var mymodel = new model(); $(document).ready(function() { ko.applyBindings(mymodel); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table data-bind="dataTable: employees"> <thead> <tr> <th>Id</th> <th>First</th> <th>Last</th> <th>Phone</th> <th>Dept</th> </tr> </thead> <tbody data-bind="foreach: employees"> <tr> <td data-bind="text: id"></td> <td data-bind="text: firstName"></td> <td data-bind="text: lastName"></td> <td data-bind="text: phone"></td> <td data-bind="text: dept"></td> </tr> </tbody> </table> <p style="padding-top: 20px;"> Id: <input data-bind="textInput: id" /> </p> <p> First: <input data-bind="textInput: firstName" /> </p> <p> Last: <input data-bind="textInput: lastName" /> </p> <p> phone: <input data-bind="textInput: phone" /> </p> <p> dept: <input data-bind="textInput: dept" /> </p> <p> <input type="button" value="add employee" data-bind="click: add" /> </p>
我在您的第一个中看到的问题是您在销毁 DataTable 后没有更新 html 表。
我在这里更新了第二个下标: http : //jsfiddle.net/bindrid/LkqTU/33392/
value.subscribe(function(rowData) {
var $tb = $element.find("tbody");
$.each(rowData, function(idx, item) {
$tb.append("<tr><td>" + item.id() + "</td><td>" + item.firstName() + "</td><td>" + item.lastName() + "</td><td>" + item.phone() + "</td><td>" + item.dept() + "</td></tr>");
});
不知道这是否是最好的方法,但到目前为止我想出了这个。
ko.bindingHandlers.dataTable = { init: function(element, valueAccessor, allBindingsAccessor) { var value = valueAccessor(), rows = ko.toJS(value); allBindings = ko.utils.unwrapObservable(allBindingsAccessor()), options = allBindings.dataTableOptions || {}, $element = $(element); $element.dataTable(options); ko.utils.domNodeDisposal.addDisposeCallback(element, function() { $element.dataTable().fnDestroy(); }); }, update: function(element, valueAccessor, allBindings, viewModel, bindingContext) { var value = valueAccessor(), rows = ko.toJS(value); console.log(rows); $(element).find("tbody tr").remove(); var table = $(element).DataTable(); table.clear().draw(); $.each(rows, function(index, row) { var myArray = []; $.each(row, function(key, value) { myArray.push(value) }); table.row.add(myArray).draw().node() }); } } function employee(id, firstName, lastName, phone, dept) { var self = this; this.id = ko.observable(id); this.firstName = ko.observable(firstName); this.lastName = ko.observable(lastName); this.phone = ko.observable(phone); this.dept = ko.observable(dept); } function model() { var self = this; this.employees = ko.observableArray('') this.id = ko.observable(''); this.firstName = ko.observable(''); this.lastName = ko.observable(''); this.phone = ko.observable(''); this.dept = ko.observable(''); this.add = function() { self.employees.push(new employee( this.id(), this.firstName(), this.lastName(), this.phone(), this.dept() )); // console.log(ko.toJSON(self.employees)) } } var mymodel = new model(); $(document).ready(function() { ko.applyBindings(mymodel); mymodel.employees.push(new employee('1', 'Joe', 'Smith', '333-657-4366', 'IT')) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <table data-bind="dataTable: employees"> <thead> <tr> <th>Id</th> <th>First</th> <th>Last</th> <th>Phone</th> <th>Dept</th> </tr> </thead> <tbody> </tbody> </table> <p style="padding-top: 20px;"> Id: <input data-bind="textInput: id" /> </p> <p> First: <input data-bind="textInput: firstName" /> </p> <p> Last: <input data-bind="textInput: lastName" /> </p> <p> phone: <input data-bind="textInput: phone" /> </p> <p> dept: <input data-bind="textInput: dept" /> </p> <p> <input type="button" value="add employee" data-bind="click: add" /> </p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.