添加一个垂直滚动内Asp.net mvc4应用的WebGrid [英] Add a vertical scroll to a webgrid within Asp.net mvc4 application

问题描述

我在我的asp.net应用mvc4使用的WebGrid

 ＆LT; TD＆GT;
                   @ grid.GetHtml（TABLESTYLE：table_div
                   headerStyle：table_header
                   列：grid.Columns（
                   grid.Column（喃德拉propriété，喃德拉propriété，canSort：假的，格式为：@＆LT;标签＆gt; @ Html.Raw（@ item.PName）LT; /标签＆gt;），
                   grid.Column（Valeur德拉propriété，Valeur德拉propriété，canSort：假的，格式为：@＆LT;标签＆gt; @ Html.Raw（@ item.PName）LT; /标签＆gt;），
                   grid.Column（，，canSort：假的，格式为：@＆LT;跨度＆GT; @ {我++;＆LT;输入名称=正确@（@ I）TYPE =复选框/＆GT;}＆LT; /跨度＆GT）））
            ＆LT; / TD＆GT;
 

的CSS

  .table_div {
    溢出-Y：滚动;
    宽度：400像素;
    高度：200像素;
    位置：相对;
}
 

我想一个垂直滚动添加到我的网格，但没有奏效。

生成的HTML

 ＆LT;表类=table_div＆GT;
    ＆LT;＆THEAD GT;
        ＆所述; TR类=table_header＆GT;
            百分位范围=山口＆GT;
喃德拉propriété＆LT; /第i
            百分位范围=山口＆GT;
Valeur德拉propriété＆LT; /第i
            百分位范围=山口＆GT;
            ＆LT; /第i
        ＆LT; / TR＆GT;
    ＆LT; / THEAD＆GT;
    ＆LT;＆TBODY GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT;标签＆gt;＆POIDS LT; /标签＆gt;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;标签＆gt;＆POIDS LT; /标签＆gt;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度＆GT;＆LT;输入名称=proper0类型=复选框＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;
        ＆所述; TR＆GT;
            ＆LT; TD＆GT;＆LT;标签＆gt;＆taille LT; /标签＆gt;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;标签＆gt;＆taille LT; /标签＆gt;＆LT; / TD＆GT;
            ＆LT; TD＆GT;＆LT;跨度＆GT;＆LT;输入名称=proper1类型=复选框＆GT;＆LT; / SPAN＆GT;＆LT; / TD＆GT;
        ＆LT; / TR＆GT;    ＆LT; / TBODY＆GT;
    ＆LT; /表＆gt;
 

1. 什么是错误？


2. 我怎样才能解决这个问题？

解决方案

把你的表类的div内 .table_div

您结构应该是这样的：

 ＆LT; D​​IV CLASS =table_div＆GT;
   ＆LT;表＆gt; ..
＆LT; / DIV＆GT;
 

I have used a WebGrid in my asp.net mvc4 application

 <td >
                   @grid.GetHtml(tableStyle:"table_div",
                   headerStyle:"table_header",
                   columns: grid.Columns(
                   grid.Column("Nom de la propriété","Nom de la propriété",canSort:false,format:@<label>@Html.Raw(@item.PName)</label>),
                   grid.Column("Valeur de la propriété","Valeur de la propriété",canSort:false,format:@<label>@Html.Raw(@item.PName)</label>), 
                   grid.Column("","",canSort:false,format:@<span>@{i++;<input name="proper@(@i)" type="checkbox" />}</span>)))
            </td> 

Css

.table_div {
    overflow-y: scroll;
    width: 400px;
    height: 200px;
    position: relative;
}

I'd like to add a vertical scrolling to my grid but it didn't work.

Generated Html

<table class="table_div">
    <thead>
        <tr class="table_header">
            <th scope="col">
Nom de la propriété            </th>
            <th scope="col">
Valeur de la propriété            </th>
            <th scope="col">
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><label>poids</label></td>
            <td><label>poids</label></td>
            <td><span><input name="proper0" type="checkbox"></span></td>
        </tr>
        <tr>
            <td><label>taille</label></td>
            <td><label>taille</label></td>
            <td><span><input name="proper1" type="checkbox"></span></td>
        </tr>

    </tbody>
    </table>

1. What is the error?
2. How can i fix it?

解决方案

Put your table inside a div with class .table_div

Your structure should be like :

<div class="table_div">
   <table> ..
</div>

这篇关于添加一个垂直滚动内Asp.net mvc4应用的WebGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！