在NodeJS中将Tabulator与ExpressJS结合使用

问题描述

我正在尝试安装制表符（http://tabulator.info/docs/4.0/quickstart）的默认示例。我在NodeJS项目中安装了Tabulator。

我的路由定义在index.js文件中如下所示：

app.get("/",(req,res) => {
    var table = new tabulator("#example-table",{
        height:205,layout:"fitColumns",//fit columns to width of table (optional)
        columns:[ 
            {title:"Name",field:"name",width:150},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],rowClick:function(e,row){
            alert("Row " + row.getData().id + " Clicked!!!!");
        },});
  
      var tabledata = [
      {id:1,name:"Oli Bob",age:"12",col:"red",dob:""},{id:2,name:"Mary May",age:"1",col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",age:"42",col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",age:"125",col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",age:"16",col:"yellow",dob:"31/01/1999"},];
    res.render("index",{ title: "Home"});
});

然后我在index.pug中添加了一个div：

div.example-table

但是，出现以下错误：

ReferenceError: document is not defined
    at Tabulator.initializeElement (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:9223:19)
    at new Tabulator (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\tabulator-tables\dist\js\tabulator.js:8612:12)
    at app.get (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\index.js:37:17)
    at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
    at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:137:13)
    at Route.dispatch (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\route.js:112:3)
    at Layer.handle [as handle_request] (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\layer.js:95:5)
    at C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:281:22
    at Function.process_params (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\SESA509216\Box\Perso\Scripts\LMS\Audit-Trail\node_modules\express\lib\router\index.js:275:10)

我想，Tabulator应该以某种方式在客户端初始化。但我不知道如何...

解决方法

我解决了我的问题。

我在index.js中加入了制表器表css和js到应用程序配置的路径：

app.use(express.static(path.join(__dirname,"node_modules/tabulator-tables/dist/css")));
app.use(express.static(path.join(__dirname,"node_modules/tabulator-tables/dist/js")));

然后，我将制表器的css和js文件导入前端：

link(rel="stylesheet" href="tabulator.min.css")
script(type='text/javascript' src="tabulator.min.js")

最后，我将示例脚本复制到了我的页面中：

div.example-table(id="example-table")
    script.  
      //create Tabulator on DOM element with id "example-table"
      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)
        layout:"fitColumns",//fit columns to width of table (optional)
        columns:[ //Define Table Columns
          {title:"Name",field:"name",width:150},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],rowClick:function(e,row){ //trigger an alert message when the row is clicked
          alert("Row " + row.getData().id + " Clicked!!!!");
        },});
      
      //define some sample data
      var tabledata = [
        {id:1,name:"Oli Bob",age:"12",col:"red",dob:""},{id:2,name:"Mary May",age:"1",col:"blue",dob:"14/05/1982"},{id:3,name:"Christine Lobowski",age:"42",col:"green",dob:"22/05/1982"},{id:4,name:"Brendon Philips",age:"125",col:"orange",dob:"01/08/1980"},{id:5,name:"Margret Marmajuke",age:"16",col:"yellow",dob:"31/01/1999"},];
      
      //load sample data into the table
      table.setData(tabledata);

非常感谢您的帮助！

似乎您正在尝试在控制器的响应中使用制表符。

Tabulator设计为在客户端而非服务器端运行。您将需要返回一些带有script标签的HTML，然后在DOM节点上构建该表。

您还将实例化制表符，其小写字母“ T”应为new Tabulator

我建议您需要做的是创建一个HTML页面来显示该表，例如http://tabulator.info/basic/4.8的源代码可以做到，尽管您还需要提供源JS和CSS文件来进行演示。工作时，您可以将本地文件路径更改为CDN Links，以进行快速演示。

然后，您需要使用 sendFile 函数和html文件的路径，将此页面与ExpressJS一起提供

// viewed at http://localhost:8080
app.get('/',function(req,res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

express express express pug tabulator