时间：2021-07-01 10:21:17 帮助过：40人阅读
注意：当为gridPrinter（）print方法添加一个onclick事件时，需要使用app.“methodName（）”调用TaffyDB方法。这是因为JavaScript“this”“对象指向Click事件，而非TaffyDB。
现在需要为水果（Fruit）栏添加一个sort::true的标志，以确定它为可排序列：
var
// #NEW# add sortable:true to your custom fruit column
|
令人惊讶是可以轻松地添加自定义列和记录级交互（功能）。只要在gridPrinter()中添加callme()方法，在init()函数中直接增加新的列很容易。这样就使得gridPrinter()具有通用性：完全控制输出。
本例中添加了行号列和删除按钮列。点击删除按钮时将删除该行记录，还可以通过点击Fruit列重新排序。
|
# |
Fruit |
water |
fiber |
fat |
protein |
sugar |
Delete |
|
1 |
Apple |
84 |
2.3 |
0 |
0.4 |
11.8 |
Delete |
|
2 |
Apricot |
87 |
2.1 |
0 |
1 |
8 |
Delete |
|
3 |
Banana |
76 |
2.7 |
0 |
1.2 |
20.4 |
Delete |
|
4 |
Fig |
80 |
2 |
0 |
1 |
19 |
Delete |
|
5 |
Grapefruit, Red |
90 |
1.4 |
0 |
0.9 |
6.6 |
Delete |
|
6 |
Guava |
81 |
5.3 |
0 |
1 |
17 |
Delete |
|
7 |
Kiwi Fruit |
84 |
2.1 |
0 |
1.1 |
8.8 |
Delete |
|
8 |
Lemon |
96 |
1.8 |
0 |
0 |
3 |
Delete |
|
9 |
Lime |
91 |
0.3 |
0 |
0 |
7 |
Delete |
|
10 |
Mandarin / Tangerine |
88 |
1.9 |
0 |
0.9 |
9.5 |
Delete |
|
11 |
Mango |
84 |
1 |
0 |
0 |
15 |
Delete |
|
12 |
Orange |
87 |
1.8 |
0 |
1 |
10.6 |
Delete |
|
13 |
Papaya |
91 |
0.6 |
0 |
0 |
8 |
Delete |
|
14 |
Passion Fruit |
88 |
3.3 |
0.4 |
2.6 |
5.8 |
Delete |
|
15 |
Peach |
89 |
1.4 |
0 |
1 |
7.9 |
Delete |
|
16 |
Pear |
86 |
2.1 |
0 |
0.3 |
11.5 |
Delete |
|
17 |
Plum |
84 |
2.2 |
0 |
0.8 |
9.6 |
Delete |
为了正常工作，需要在列数组配置（对象）添加对callme()的支持。这些方法在每行渲染时被调用，结果将插入该行及其列所在的单元。
如下为新的表格打印（输出）方法：
|
vargridPrinter = function (config,taffyCollection) { var app = { sortColumn:function (col) { var s = {}; if (((this.lastSort) ? this.lastSort == col : s[col] = "logicaldesc"; this.orderBy([s]); this.lastSort = col + ‘desc‘ } else { s[col] = "logical"; this.orderBy([col]); this.lastSort = col; } this.print(); }, print: function(){ var thebody = document.createElement("tbody"); config.columns = config.columns || TAFFY.getObjectKeys(this.first()); var newRow = document.createElement("tr"); for (var x = 0; x < config.columns.length; x++) { var newCell = document.createElement("td"); newCell.appendChild(document.createTextNode( TAFFY.isObject(config.columns[x]) ? config.columns[x]["display"] : config.columns[x] )); if (TAFFY.isObject(config.columns[x]) && !TAFFY.isUndefined(config.columns[x].sortable) && config.columns[x].sortable) { newCell.colName = config.columns[x]["name"]; newCell.onclick = function () { app.sortColumn(this.colName); } } newRow.appendChild(newCell); } thebody.appendChild(newRow); this.forEach(function(r, c){ var newRow = document.createElement("tr"); for (var x = 0; x < config.columns.length; x++) { var newCell = document.createElement("td"); newCell.appendChild( (TAFFY.isObject(config.columns[x]) && !TAFFY.isUndefined(config.columns[x].name)) ? document.createTextNode(r[config.columns[x].name]) : // #NEW# add condition for custom columns with callme methods (TAFFY.isObject(config.columns[x]) && !TAFFY.isUndefined(config.columns[x].callme)) ? config.columns[x].callme(r,c) : // #NEW# otherwise add column as normal TAFFY.isString(config.columns[x]) ? document.createTextNode(r[config.columns[x]]) : document.createTextNode("") ); newRow.appendChild(newCell); } thebody.appendChild(newRow); }); var thetable = document.createElement("table"); thetable.appendChild(thebody); thetable.border=1; document.getElementById(config.containerID).innerHTML = ""; document.getElementById(config.containerID).appendChild(thetable); } } app = TAFFY.mergeObj(app,taffyCollection); return app; } |
现在需要为callme()方法定义两个新列。请记住，为在单元格中显示，需要返回要显示的内容。
|
varinit = function () { fruit = gridPrinter({ containerID: "displayGridDiv", columns: [ // #NEW# create new column with a callme function to render row number { display: "#", callme: function(r, c){ // #NEW# create text node to display row number return document.createTextNode((c+1)); } }, { name: "food", display: "Fruit", sortable: true }, "water", "fiber", "fat", "protein", "sugar", // #NEW# create new column with a callme function to render delete { display: "Delete", callme: function(r, c){ // #NEW# create a tag to return to the print function var op = document.createElement("strong"); op.onclick = function(){ // #NEW# on click of the strong tag remove record and reprint grid fruit.remove(c); fruit.print(); }; op.appendChild(document.createTextNode("Delete")); return op; } }] },TAFFY(fruits)); fruit.print(); } |
注意：传入callme()中的r和c的值是由TaffyDB提高的。r是该行的记录对象而c是行号。
可以很容易为gridPrinter()不断加入新功能，采用这种方法有可能建立一个难以预想的复杂应用，简洁地将数据管理和界面组件分离。
想了解更多的东西请登录TaffyDB.com，在那里你会找到入门篇章、FAQ，以及邮件列表。
原文链接：http://taffydb.com/JavaScript_table_grid_application.htm
TaffyDB: Javascript数据库教程
标签：添加 快捷 apr 基本 2.7 return ssi gic start