Javascript CSS锁定<;部门>;无论浏览器窗口大小,是否都已就位?
我已经在我的MVC5/EF代码第一个应用程序中使用了Javascript CSS锁定<;部门>;无论浏览器窗口大小,是否都已就位?,javascript,jquery,html,css,asp.net-mvc,Javascript,Jquery,Html,Css,Asp.net Mvc,我已经在我的MVC5/EF代码第一个应用程序中使用了 <div class="assetList"> @*Images in Columns: https://gridmvc.codeplex.com/discussions/440977*@ @try { @Html.Grid(Model).Columns(columns => { columns.Add().Encoded(false).San
<div class="assetList">
@*Images in Columns: https://gridmvc.codeplex.com/discussions/440977*@
@try
{
@Html.Grid(Model).Columns(columns =>
{
columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Edit/@o.Id" class="btn btn-primary btn-sm noDecoration"><span class="glyphicon glyphicon-pencil"></span> @*Edit*@</a>).SetWidth(15);
columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Delete/@o.Id" class="btn btn-danger btn-sm noDecoration"><span class="glyphicon glyphicon-remove-circle"></span> @*Delete*@</a>).SetWidth(15);
columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="#" class="btn btn-default btn-sm noDecoration verifyBtn" onclick="verifyAsset(@o.Id)"><span class="glyphicon glyphicon-ok"></span> @*View*@</a>).SetWidth(15);
@*columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Details/@o.Id" class="btn btn-default btn-sm noDecoration"><span class="glyphicon glyphicon-eye-open"></span> @*View*</a>).SetWidth(15);*@
columns.Add(o => o.Status.status_description).Titled("Status").RenderValueAs(o => o.Status.status_description).Sanitized(false).Encoded(false).Sortable(true).Filterable(true).SetWidth(20);
columns.Add(o => o.Location.location_dept).Titled("Dept").RenderValueAs(o => o.Location.location_dept).SetWidth(20);
columns.Add(o => o.Location.location_room).Titled("Room").RenderValueAs(o => o.Location.location_room).SetWidth(20);
columns.Add(o => o.owner).Titled("Owner").RenderValueAs(o => o.owner).SetWidth(20);
columns.Add(o => o.Type.type_description).Titled("Type").RenderValueAs(o => o.Type.type_description).SetWidth(20);
columns.Add(o => o.Manufacturer.manufacturer_description).Titled("Manufacturer").RenderValueAs(o => o.Manufacturer.manufacturer_description).SetWidth(20);
columns.Add(o => o.Model.model_description).Titled("Model").RenderValueAs(o => o.Model.model_description).SetWidth(20);
columns.Add(o => o.Vendor.vendor_name).Titled("Vendor").RenderValueAs(o => o.Vendor.vendor_name).SetWidth(20);
columns.Add(o => o.description).Titled("Desc").RenderValueAs(o => o.description).SetWidth(20);
columns.Add(o => o.asset_tag_number).Titled("Asset Tag #").RenderValueAs(o => o.asset_tag_number).SetWidth(20);
columns.Add(o => o.serial_number).Titled("Serial #").RenderValueAs(o => o.serial_number).SetWidth(20);
columns.Add(o => o.ip_address).Titled("IP Addr").RenderValueAs(o => o.ip_address).SetWidth(20);
columns.Add(o => o.mac_address).Titled("Mac Addr").RenderValueAs(o => o.mac_address).SetWidth(20);
columns.Add(o => o.po_number).Titled("PO #").RenderValueAs(o => o.po_number).SetWidth(20);
columns.Add(o => o.invoice_number).Titled("Inv. #").RenderValueAs(o => Convert.ToString(o.invoice_number)).SetWidth(20);
columns.Add(o => o.cost).Titled("Cost").RenderValueAs(o => "$" + Convert.ToString(o.cost)).SetWidth(20);
columns.Add(o => o.note).Titled("Note").RenderValueAs(o => o.note).SetWidth(20);
columns.Add(o => o.acquired_date).Titled("Acq. Date").RenderValueAs(o => Convert.ToString(o.acquired_date)).SetWidth(20);
columns.Add(o => o.disposed_date).Titled("Disp. Date").RenderValueAs(o => Convert.ToString(o.disposed_date)).SetWidth(20);
columns.Add(o => o.verified_date).Titled("Ver. Date").RenderValueAs(o => Convert.ToString(o.verified_date)).SetWidth(20);
columns.Add(o => o.created_date).Titled("Crtd. Date").RenderValueAs(o => Convert.ToString(o.created_date)).SetWidth(20);
columns.Add(o => o.created_by).Titled("By").RenderValueAs(o => o.created_by).SetWidth(20);
columns.Add(o => o.modified_date).Titled("Mod. Date").RenderValueAs(o => Convert.ToString(o.modified_date)).SetWidth(20);
columns.Add(o => o.modified_by).Titled("By").RenderValueAs(o => o.modified_by).SetWidth(20);
}).WithPaging(10).Sortable().Filterable().WithMultipleFilters();
}
catch (NullReferenceException ex)
{
return;
}
</div>
我遇到的一个问题是,Pager
将显示在滚动div中网格的正下方。这意味着如果用户向右滚动查看记录数据,他们必须向左滚动才能访问Pager
为了解决这个问题,我添加了以下.css,以直观地将页面导航放置在滚动
之外:
您能否将.grid pager
元素移出.asset list
(可能通过编程方式)并分配位置:relative代码>具有适当的上边距?@collapsar,也许。。。你有没有一个例子或想法来说明这一点?在我的编辑中,我添加了当前为我的寻呼机呈现的确切HTML。
.assetList {
width: 100%;
overflow-x: scroll;
border: 1px solid black;
margin-top: 20px;
min-width: 800px;
display: block;
height: 530px;
}
.assetList table, tr, td, th {
border: 1px solid black;
}
.assetList tr {
width: 1%;
white-space: nowrap;
}
/* When GridMVC is longer than <div>, overflow with scroll */
.grid-table {
overflow-x: scroll;
}
.grid-pager {
position: fixed;
margin: 25px;
margin-bottom: 100px;
}
</tbody>
</table>
<div class="grid-footer">
<div class="grid-pager">
<ul class="pagination">
<li><a href="?grid-page=2">«</a></li>
<li><a href="?grid-page=1">1</a></li>
<li><a href="?grid-page=2">2</a></li>
<li class="active"><span>3</span></li>
</ul>
</div>