如何创建这种类型的网格视图请帮忙 [英] How to create this type of grid view please help
问题描述
我目前正在设计mvc4中的gridview
并需要帮助设计这种类型的gridview
i只需要知道设计部分数据输入部分我会做的我自己
如果有人可以帮助我，我会非常感激
i am currently designing a gridview in mvc4
and need help in designing this type of gridview
i just need to know the designing part data inputing part i will do it myself
if anyone can assist me with this would be really grateful
这篇关于如何创建这种类型的网格视图请帮忙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
点击此处获取gridview设计
我尝试过：
@ {
ViewBag.Title =ShowResult;
Layout =〜/ Views / Shared / _Layout.cshtml;
WebGrid grid = new WebGrid（来源：Model，canSort：false）
}
ShowResult
@foreach（模型中的var项目）
{
@ grid.GetHtml（htmlAttributes：new {id =GridT，width =900px}，
列：grid.Columns（
grid.Column（，）
）
）
click here for gridview design
What I have tried:
@{
ViewBag.Title = "ShowResult";
Layout = "~/Views/Shared/_Layout.cshtml";
WebGrid grid = new WebGrid(source:Model,canSort:false)
}
ShowResult
@foreach (var item in Model)
{
@grid.GetHtml( htmlAttributes:new {id="GridT",width ="900px"},
columns:grid.Columns(
grid.Column("",)
)
)
推荐答案
您好，
请参阅以下文章以供参考。只是HTML和CSS，这很简单。你一定可以尝试。
使用CSS灵活的盒子 - CSS | MDN [ ^ ]
谢谢Hello,
Follow the below article for reference. Just the HTML and CSS and that is simple. You try and surely you can.
Using CSS flexible boxes - CSS | MDN[^]
Thanks
这不完全是网格视图。
尽管我喜欢解决方案1的优雅（但我从未尝试过这样的东西），你可能会注意到一些CSS属性是特定于浏览器的，例如-webkit -柔性。也就是说，它可能会影响浏览器兼容性。查看兼容性图表。看起来这篇Mozilla文章假设它应该按照Mozilla浏览器中的标准工作，并且在WebKit浏览器上使用Webkit特定属性，忘记IE的大多数版本（甚至不想尝试： - ））。 />
所以，我建议一些更基本的选择。您可以使用其所有嵌套元素实现类似于HTML table 元素的行为，但是，或者，没有所有这些元素，只需使用div。为此，您可以使用属性 display ，其值为table，table-row和table-cell（我可以看到，这对您来说已经足够了）您还需要调整宽度，填充，垂直对齐等。
This is not exactly a grid view.
Even though I like the elegance of Solution 1 (but I never tried such things), you may notice that some CSS properties are browser-specific, such as -webkit-flex. That said, it can compromise browser compatibility. Look at the compatibility chart. It looks like this Mozilla article assumes that it all should work as per standard in Mozilla browsers, and with Webkit-specific properties on WebKit browsers, forget about most versions of IE (don't even want to try :-)).
So, I would suggest some more basic alternative. You can achieve the behavior similar to HTML table element, with all its nesting element, but, alternatively, without all these elements, just with div. For this purpose, you can use the property display with values "table", "table-row" and "table-cell" (as I can see, it's enough for your purpose. You will also need to adjust width, padding, vertical align, etc.
我终于弄明白，希望那些不知道如何使用像我这样的div的人可以帮到这个
i finally figured it out hopefully people who dont know how to use div like me can be helped by this
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<table style="width:100%">
<tr>
<th rowspan="4">Name</th>
<th rowspan="2">hello</th>
<th colspan="3">Telephone</th>
<th rowspan="2">head</th>
</tr>
<tr>
<td>name</td>
<td>phone</td>
<td>email</td>
</tr>
<tr>
<td>Bill Gates</td>
<td rowspan="2">555 77 854</td>
<td rowspan="2">555 77 855</td>
<td rowspan="2">2222222222</td>
<td rowspan="2">status</td>
</tr>
<tr>
<td>2ndhello</td>
</tr>
</table>
</body>
</html>
