如何在EJS的表格中的特定单元格中排列数据

时间:2019-08-29 12:39:27

标签: html mysql node.js ejs

我正在尝试以表格形式在home.ejs上显示记录,在这里,我无法在单个单元格中显示与一条特定记录相关联的多条记录的编码

在这里我对一个Task_Name有3条注释,根据我的代码,记录显示在每一行中,这意味着总共显示2X3 6行,但是我需要显示一个Task_Name-所有注释都需要在单行中显示,然后我只得到2行

很抱歉,请提供详细的逻辑或解决方案

当前输出

预期产量

输出屏幕截图

enter image description here

EJS部分:

<% for(var i=0; i < status_info.length; i++) { %>
    <tr>
        <td><%= i+1 %></td> 
        <td><%= status_info[i].Task_Name %></td>
        <td><%= status_info[i].status_Name %></td>
        <td><%= status_info[i].Cmnt_Details %>
    </tr>
<% } %>

server.js:

app.get('/',(req, res)=>{
    var getQuery = "select * from table_info"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            res.render('DashPrac',{status_info:result});
            // console.log(result.length)
        }
    })
});

我从数据库中获取的数据

[ RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Trying to load the data in all the tables...',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Checked the details',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Architecture Design',
Cmnt_Details: 'Testing is going on',
status_Name: 'WIP' },
 RowDataPacket {
Task_Name: 'Testing Plan',
Cmnt_Details: 'Teting plan to be prepared',
status_Name: 'InProgress' } ]

2 个答案:

答案 0 :(得分:0)

您需要更改查询和结果集才能获得此输出。这是一个可以为您服务的解决方案。

server.js

app.get('/',(req, res)=>{
    var getQuery = "select * from table_info order by Task_Name, status_Name"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            let prevObj={};
            let filteredResult=result.map(e=>{
              let newElem={...e}
              if(newElem.status_Name === prevObj.status_Name)
                newElem.status_Name="";
              if(newElem.Task_Name ===prevObj.Task_Name)
                newElem.Task_Name="";
              prevObj={...e}
              return newElem;
            })
            res.render('DashPrac',{status_info:filteredResult});
            // console.log(result.length)
        }
    })
});

其余代码可以保持不变。它将达到您需要的结果。

如果您想将所有注释直接与sql查询结合起来。

app.get('/',(req, res)=>{
    var getQuery = "select Task_Name, status_Name,group_concat(Cmnt_Details) as Cmnt_Details from table_info group by Task_Name, status_Name"        
    mysqlConnection.query(getQuery,function(err,result){
        if(err) throw err
        else {
            res.render('DashPrac',{status_info:result});
            // console.log(result.length)
        }
    })
});

答案 1 :(得分:0)

我在上面第二个@Dhruv的答案,但是,如果您不想在server.js中进行任何更改,而是想使用EJS,则您的代码应类似于:

<% 
var prevTask_Name = status_info[0].Task_Name;
var prevStatus_Name = status_info[0].status_Name;

for(var i=0; i < status_info.length; i++) {  
    <tr>
        <td>
%>
<%= i+1 %></td> 
<%  if(i == 0 )
    {
%>
        <td><%= status_info[i].Task_Name %></td>
<%  }
    else
    {
        if(status_info[i].Task_Name == prevTask_Name)
        {
%>
            <td>&nbsp;</td>
<%
        }
        else
        {
%>
            <td><%= status_info[i].Task_Name %></td>
<%      }
    }
    if(i == 0 )
    {
%>
        <td><%= status_info[i].status_Name %></td>
<%  }
    else
    {
        if(status_info[i].status_Name == prevStatus_Name)
        {
%>
            <td>&nbsp;</td>
<%      }
        else
        {
%>
            <td><%= status_info[i].Status_Name %></td>
<%      }
    }
%>  
        <td><%= status_info[i].status_Name %></td>
        <td><%= status_info[i].Cmnt_Details %>
<% 
prevTask_Name = status_info[i].Task_Name;
prevStatus_Name = status_info[i].status_Name;
} %>