1.mvc5+ef6+Bootstrap 项目心得--创立之初
2.mvc5+ef6+Bootstrap 项目心得--身份验证和权限管理
3.mvc5+ef6+Bootstrap 项目心得--WebGrid
介绍
我们可以在web页面用HTML表格元素定义WebGrid显示数据,它以非常简单的方式呈现表格数据,支持自定义格式列,分页,排序,并通过AJAX异步更新。
WebGrid主要属性:
Source -数据来自哪里。 通常情况下,通过controller action传递model
DefaultSort -定义如何将数据排序。只要在这里提供列名。
RowsPerPage -每页表格显示的记录数。
CanPage -允许分页。
CanSort -允许通过点击列标题排序。
SelectedFieldName -获取查询字符串字段,用于指定所选行WebGrid实例的全名。
ajaxUpdateContainerId - 点击下一页,异步更新table
以下代码是项目中WebGrid的使用
@model IEnumerable<CarLoan.Models.FormShowedInfo>
@{
ViewBag.Title = "总部退单";
Layout = "~/Views/Shared/_Layout.cshtml";
var grid = new WebGrid(Model, canPage: true, rowsPerPage: , canSort: true, ajaxUpdateContainerId:"ajax_table");
int index = grid.PageIndex * grid.RowsPerPage;
}
<style>
.remark{
width:200px;
height:auto;
overflow:auto;
}
</style>
<div class="panel panel-primary common_panel"> <ul class="nav nav-tabs" role="tablist">
<li class="active">@Html.ActionLink("总部退单(" + Model.Count() + ")", "BackForm", "ApplyFor") </li>
<li>@Html.ActionLink("总部拒单", "RejectForm", "ApplyFor")</li>
</ul>
<div class="panel-body" id="ajax_table">
@grid.GetHtml(tableStyle: "table table-hover table-striped table-bordered",
columns: grid.Columns(
grid.Column(header: "序号", format: (item) => ++index),
grid.Column("CustomerName", "客户姓名", format: (data) => new HtmlString("<a href='/Customer/Details/"
+ data.ID + "' target='blank'>" + data.CustomerName + "</a>")),
grid.Column("IdNo", "身份证号"),
grid.Column("LoanType", "贷款类型", format: (item) => new HtmlString(Util.GetDisplayNameForEnum(item.LoanType))),
grid.Column("Money", "申请金额(元)", format: (item) => Util.GetFormatedAmount(item.Money)),
grid.Column("Reason", "退回原因", format: (data) => new HtmlString("<a class='popover-destroy' data-toggle='popover'" +
" data-container='body' title='备注' data-placement='right' data-content='"
+ data.Remark + "'>" + data.Reason + "</a>")),
grid.Column("Time", "退回时间"),
grid.Column(header: "操作", format: (item) => new HtmlString(
Html.ActionLink("修改资料", (item.IsRZZL) ? "ApplyForTableFinance" : "ApplyForTable", new { id = item.ID }, new { @class = "btn btn-primary" }) +
" <button type='button' class='btn btn-primary' onclick='StopLoan(" + item.id + ")'>客户终止贷款</button>"))),
mode: WebGridPagerModes.All, firstText: "第一页",
previousText: "上一页", nextText: "下一页", lastText: "最后一页", numericLinksCount: ) </div> </div>