多行变成单行多列

Posted 2023-03-05

【中文标题】多行变成单行多列

【英文标题】：Multiple rows into single row and multiple columns

【发布时间】：2018-04-04 06:49:02

【问题描述】：

我是一名年轻的学徒，希望在 MVC 中构建他的第一个应用程序。我目前正在尝试构建一个管理页面，该页面将显示员工技能矩阵的结果。

所以我尝试显示信息的方式如下..

问题是……信息在一个表格中，如下……

我终其一生都无法弄清楚我是如何做到的。

这是我当前的表格代码。

 <div class="tblOverFlow">
        <table class="table">
            <thead class="thead-default">
                <tr>
                    <th>User</th>
                    <th>Skill</th>
                </tr>
                <tr>
                    <th></th>
                    @foreach (var tableRefDbSet in Model)
                    
                        <th>@tableRefDbSet.Skill </th>
                        <th>Interested?</th>
                    
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                
                    <td>@item.User</td>
                    <tr>
                            <td>@item.SkillLevel</td>
                            if (item.Interested == true)
                            
                                <td Style="background-color: green;">Y</td>
                            
                            else
                            
                                <td style="background-color: Red;">N</td>
                            
                    </tr>
                
            </tbody>
        </table>
    </div>
</div>

它仍然只是显示它们彼此堆叠在一起。我试过重新调整周围的一切，但它不会像我想要的那样做！

哦，忽略内联样式，它们只是在视觉上帮助我！

虽然我正在寻找答案，但简要说明我做错了什么也会有所帮助！

【参考方案1】：

下面是一个例子

控制器

public class UserController : Controller

    // GET: User
    public ActionResult Index()
    
        var users = new Users();

        users.Add(CreateUser("Bob", 2, true, 3, false, 1, true));
        users.Add(CreateUser("Sue", 1, true, 1, true, 0, false));
        users.Add(CreateUser("Margaret", 1, true, 1, false, 2, true));

        return View(users);
    

    private User CreateUser(string name,
                            int coffeeSkillLevel, bool coffeeInterested,
                            int typingSkillLevel, bool typingInterested,
                            int searchSkillLevel, bool searchInterested)
    
        const string skillCoffee = "Coffee";
        const string skillTyping = "Typing";
        const string skillSearching = "Google Search";

        var user = new User()  Name = name ;
        var userBobSkillCofeeMaking = new UserSkill
        
            Skill = skillCoffee,
            SkillLevel = coffeeSkillLevel,
            IsInterested = coffeeInterested
        ;

        var userBobSkillTyping = new UserSkill
        
            Skill = skillTyping,
            SkillLevel = typingSkillLevel,
            IsInterested = typingInterested
        ;

        var userBobSkillGoogleSearching = new UserSkill
        
            Skill = skillSearching,
            SkillLevel = searchSkillLevel,
            IsInterested = searchInterested
        ;

        user.UserSkills[skillCoffee] = userBobSkillCofeeMaking;
        user.UserSkills[skillTyping] = userBobSkillTyping;
        user.UserSkills[skillSearching] = userBobSkillGoogleSearching;

        return user;
    

用户模型

public class User

    public User()
    
        UserSkills = new Dictionary<string, UserSkill>();
    

    public string Name  get; set; 
    public Dictionary<string, UserSkill> UserSkills  get; set; 

    public List<string> UniqueSkills
    
        get  return UserSkills.Values.Select(x => x.Skill).Distinct().ToList(); 
    


public class Users : List<User>

    public List<string> UniqueSkills
    
        get
        
            var retVal = new List<string>();

            foreach (var user in this)
            
                retVal.AddRange(user.UniqueSkills);
            

            return retVal.Distinct().OrderByDescending(x => x).ToList();
        
    

    public int ColSpan => (UniqueSkills.Count * 2);

用户技能模型

public class UserSkill

    public string Skill  get; set; 
    public int SkillLevel  get; set; 
    public bool IsInterested  get; set; 

    public string Interested => IsInterested ? "Y" : "N";

cshtml

 table, td, th 
        border: 1px solid black;
    

    table 
        border-collapse: collapse;
        width: 100%;
    

    th 
        text-align: center;
    

<div>
    <table class="table-bordered">
        <thead>
            <tr>
                <th>User</th>
                <th colspan="@Model.ColSpan">Skill</th>
            </tr>
        </thead>
        <tbody>
            <tr style="font-weight: bold">
                <td></td>

                @foreach (var skill in Model.UniqueSkills)
                
                    <td>@skill</td>
                    <td>Interested</td>
                
            </tr>
            @foreach (var user in Model)
            
                <tr>
                    <td>@user.Name</td>

                    @foreach (var skill in Model.UniqueSkills)
                    

                        <td>@user.UserSkills[skill].SkillLevel.ToString()</td>
                        <td>@user.UserSkills[skill].Interested</td>
                    
                </tr>
            
        </tbody>
    </table>
</div>

最终结果

【讨论】：

所以我尝试了代码，出于某种原因，使用我自己的模型似乎只给出了同一行的多条记录。所以我最终得到了正确的列，但只有 3 个鲍勃！

另外，如果我从一个不断更新的表中获得无限数量的员工，这将如何工作？ code

不看代码就很难说出什么是错的，遵循相同的模式应该几乎可以解决问题。项目数量只是作为示例构建的，它从代码中迭代模型集合中存在的任意数量的用户。仅将第一行视为标题。

我认为它与 ... )

@skill.SkillLevel @skill.Interested `

如果技能不同，那么代码需要验证Null对象并在这种情况下添加空白td。