在NodeJS中使用制表符和ExpressJS

2g32fytz 于 2022-12-22 发布在 Node.js

关注(0)|答案(4)|浏览(98)

我正在尝试安装Tabulator的默认示例（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"});
});

然后我在索引中添加了一个div。pug：

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)

我想，制表器应该在客户端进行初始化。但是我不知道如何...

node.js

来源：https://stackoverflow.com/questions/64050248/use-tabulator-with-expressjs-in-nodejs

4条答案

按热度按时间

tzdcorbm1#

我解决了我的问题。
我将tabulator-tables css & js路径加入到index.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);

非常感谢您的帮助！

赞(0）回复(0）举报 2022-12-22

pexxcrt22#

这看起来像是你试图在控制器的响应中使用制表符。
制表符是设计来运行客户端，而不是服务器端。你需要返回一些HTML与脚本标记，然后建立一个DOM节点上的表。
您还使用小写字母“T”示例化制表符，应为new Tabulator
我建议您需要做的是创建一个HTML页面来显示该表，例如http://tabulator.info/basic/4.8的源代码就可以了，尽管您还需要提供源JS和CSS文件以使演示工作，或者您可以更改CDN链接的本地文件路径以进行快速演示。
然后，您需要使用***sendFile***函数和html文件的路径，通过ExpressJS提供此页面

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

赞(0）回复(0）举报 2022-12-22

ycl3bljg3#

要将表数据从节点传递到pug文件中的脚本，请执行以下操作：

// node index.js
let data = [
    {id : 1, name : 'Adam', zip : '11101'},
    {id : 2, name : 'Bob', zip : '95134'}
];
res.render('table.pug', { table_data: data });

// table.pug
div.example-table(id="example-table")
      script.
        var table = new Tabulator("#example-table", {
          columns:[
            {title:"Name", field:"name"},
            {title:"ZIP", field:"zip"}
          ]
        });

        //load sample data into the table
        table.setData(!{JSON.stringify(table_data)});

赞(0）回复(0）举报 2022-12-22

kyks70gy4#

我是如何让Tabulator在nodejs和express中启动和运行的。首先用npm i tabulator-tables在你的nodejs/express项目中安装Tabulator表。然后按如下步骤操作：
在我的例子中，主要的Javascript文件是“app.js”。
在“app.js”中：使用静态文件为他们服务：

// Use static files
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")));

在html文档的<head>部分，在我的例子中是“index.html”：

<head>
<!-- Tabulator Tables -->
<link rel="stylesheet" href="tabulator.min.css">
<script src="tabulator.min.js"></script>

</head>

在“index.html”的主体部分，在应该显示表格的位置放置一个div：

<div id="example-table"></div>

此外，在“index.html”中，在结束body标记之前引用脚本文件：

<!-- Document ready -->
<script src="index.js"></script>
</body>

最后但同样重要的是在“index.js”文件中：

//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"},
];

//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)
    data:tabledata, //assign data to table
    layout:"fitColumns", //fit columns to width of table (optional)
    columns:[ //Define Table Columns
        {title:"Name", field:"name", width:150},
        {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
    ],
});

//trigger an alert message when the row is clicked
table.on("rowClick", function(e, row){ 
   alert("Row " + row.getData().id + " Clicked!!!!");
});

然后启动node app.js，在浏览器中打开index.html，如果表格出现，并且当你点击其中一行时收到一条消息，那么一切都很好，希望这能有所帮助。

赞(0）回复(0）举报 2022-12-22

我来回答

在NodeJS中使用制表符和ExpressJS

4条答案

相关问题

热门标签

最新问答