跳到主要内容

用制表器创建交互式表

Tabulator
(形象信用:未来)

+$Tables carry all kinds of advanced visual gimmicks intended to make them look better. Table rendering performance is more important than ever. Generating a few labels on the fly is not a problem, but doing so with complex tables containing images overloads systems.

+$Tables intended for the web are best generated with the Tabulator framework. Just like all the best网页设计工具+$it's designed to streamline your workflow. ThisJavaScript框架+$contains an advanced implementation of the virtual document object programming paradigm. This means it only creates a few widgets, which it recycles as the user scrolls through your list.

+$In addition, the framework also provides a wide range of convenience functions. Table sizes can be adjusted to the data which is currently being displayed. Element information can be obtained from a variety of sources including REST transfers. Developers interested in creating advanced table editing experiences can also rejoice.

+$The product supports filtering, sorting and lets users edit table data. An optional data validation process then prevents mistakes. Given that Tabulator is completely open source, there is little reason for programming your own table rendering engine.

+$Download the files that accompany this Tabulator tutorial这里

+$01. Load The Files

+$Tabulator consists of a CSS stylesheet and some JavaScript. The framework’s developers have a tight relationship with the UnPKG content delivery network. Our example code fetches resources there, and furthermore declares a tag responsible for displaying the table.

+$    

+$04. Analyse The Results

Tabulator

+$With just a few clicks, Tabulator can start sorting your data intelligently+$(Image credit: Tam Hanna)

+$Open the program and feast your eyes on the table shown in the figure accompanying this step. The framework provides intelligence for sorting. This is shown in the second figure, which was created by clicking the header off the table a few times to trigger sorting.

+$05. Change colours during program execution

+$Tabulator’s constructor offers a variety of parameters. While some of these parameters are limited to simply providing static data, we can also provide event handlers. rowFormatter gets invoked once for every row generated in the table. When run, the code will show the output shown in the figure accompanying this step.

+$var table = new Tabulator("#example-table", { . . . rowFormatter:function(row){ var data = row.getData(); if(data.col == "blue"){ row.getElement(). style.backgroundColor = "#A6A6DF"; } if(data.col == "red"){ row.getElement(). style.backgroundColor = "#A60000"; } },

+$06. Add Example Data

+$Demonstrating advanced features of the framework requires additional data. This can easily be fixed: simply return to the declaration of the table data field, and add a bunch of additional entries.

+$ 

+$15. Apply A Filter

Tabulator

+$Filters require three parameters+$(Image credit: Tam Hanna)

+$Apply filters via the setFilter method. It takes three parameters - first, the ID of the column to be used. Secondarily, the comparison operator is passed in, and finally, a comparison value. In the case of our example program, click the button to make three lines disappear.

+$

+$16. Use various filter operations

Tabulator

+$That list of Tabulator operator functions in full+$(Image credit: Tam Hanna)

+$Tabulator provides a total of seven operators which can be used by passing in their string. The figure accompanying this step was taken from the product documentation. It provides a description of the operator’s function.

+$17. Create custom lines – I

+$Our final “big” task involves replacing the entire row with a bit of custom mark-up. For that, we must start out by setting up rowFormatter and providing it with a generator function.

+$var table = new Tabulator(“#example-table”, { data:tableData, columns:[ {title:”Name”, field:”name”} ], height:”350px”, layout:”fitColumns”, resizableColumns:false, rowFormatter:function(row){ var element = row. getElement(), data = row.getData(), width = element. offsetWidth, rowTable, cellContents; while(element.firstChild) element.removeChild(element.firstChild);

+$18. Create custom lines - II

+$The second part of the routine involves creating the actual DOM snippet. Our code creates a TD tag containing the information for the current line and returns it to the framework after that.

+$rowTable = document. createElement("table") rowTable.style.width = (width - 18) + "px"; rowTabletr = document. createElement("tr"); cellContents = "" + data.id + ""; cellContents += "
Name: " + data.name + "
" rowTabletr.innerHTML = cellContents; rowTable. appendChild(rowTabletr); element.append(rowTable); }, }); table.setData(tableData);

+$19. Modify data at runtime

+$Tabulator is not limited to displaying static data. The code accompanying this step illustrates four ways how information can be changed during program execution. Keep in mind that changes to the actual array are not monitored — changing the values of the array does not lead to an automatic update.

+$$(“#add-row”).click(function(){ table.addRow({}); }); $(“#del-row”).click(function(){ table.deleteRow(1); }); $(“#clear”).click(function(){ table.clearData() }); $(“#reset”).click(function(){ table.setData(tabledata); });

+$20. Target Framework Elements

+$When Excel first let users apply styles, clarity improved. Being based on the concept of virtual DOM, the product generates a set of display widgets. They have a set of predefined IDs which are conveniently listed这里

+$21. Learn More

+$Tabulator’s documentation is structured in a slightly odd fashion. The gallery of examples found at这里+$makes for a great first point of contact – click the Documentation links next to a header to be forwarded to a more detailed description of the API in question.

+$This article was originally published in issue 292 of creative web design magazine网页设计者+$Buy Issue 292

相关文章:



翻译字数超限