这里的View是来自 C#创建的带MVC5视图的控制器,是JQuery
表格:
//index需要返回这个model,这是控制器中
//第几页
int pageNumber = (page ?? 1);
//ToPagedList自动分页,第一个参数是页码,第二个是单页显示条数
return View(data.ToPagedList(pageNumber, 15));
//这是View中
@model PagedList.IPagedList<FundClear.Models.计提费用核算表>
@using PagedList.Mvc;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
<script>
$(document).ready(function () {
//查询按钮
$("#btnSubmit").click(function () {
var strFilter = "";
if ($("#productId").val().trim() != "")
strFilter += "&productId=" + $("#productId").val();
if ($("#sysDate1").val().trim() != "")
strFilter += "&sysDate1=" + $("#sysDate1").val();
if ($("#sysDate2").val().trim() != "")
strFilter += "&sysDate2=" + $("#sysDate2").val();
location.href = "/计提费用表/Index?page=1&flag=1" + strFilter;
});
$("#btnDelete").click(function () {
if ($(".checkPath:checked").length > 0) {
if (confirm("确定要删除所选指令吗?")) {
var ids = ",";
$(".checkPath:checked").each(function () {
ids += $(this).val() + ",";
});
$.ajax({
url: "/计提费用表/Delete",
datatype: "json",
data: { "ids": ids },
type: "get",
success: function (data) {
if (data) {
alert("删除成功");
location.href = document.URL;
}
}
});
}
}
else {
alert("请最少选择一条指令!");
}
});
$("#btnExport").click(function () {
$.ajax({
url: "/计提费用表/导出计提费用核算表",
type: "get",
data: { "productId": $("#productId").val(), "sysDate1": $("#sysDate1").val(), "sysDate2": $("#sysDate2").val() },
datatype: "json",
success: function (data) {
if (data) {
if (data.length > 100)
location.href = "/Account/AuthorizeFail";
else
location.href = "../../Excels/Common/" + data;
}
else {
alert("没有查询到任何数据.");
}
}
});
});
/** 判断知否为空 **/
function isNull(name) {
if (name == null || name == "") {
return true;
}
}
$("#saveExcelData").click(function () {
var formData = new FormData();
var name = $("#importFile").val();
console.log($("#importFile")[0].files[0])
formData.append("file", $("#importFile")[0].files[0]);
formData.append("name", name); //可以使用formData.append()传递多个参数
console.log(formData);
if (isNull(name)) {
alert("未选择导入文件!");
return;
}
$.ajax({
url: "/计提费用表/UploadExcel",
datatype: "json",
enctype: "multipart/form-data",
data: formData,
type: "post",
// 告诉jQuery不要去处理发送的数据
processData: false,
// 告诉jQuery不要去设置Content-Type请求头
contentType: false,
success: function (result) {
alert(result);
location.href = document.URL;
}
});
});
$('.chosen-select').chosen({
width: "200px",
search_contains: true,
no_results_text: "没有搜索到匹配项",
});
$("#listTable").on("click", ".checkPath", function () {
document.getElementById("checkPathAll").checked = $(".checkPath").length == $(".checkPath:checked").length;
});
$("#checkPathAll").click(function () {
var checked = this.checked;
$(".checkPath").each(function () {
this.checked = checked;
})
});
});
</script>
@{
ViewBag.Title = "计提费用表";
}
<h2>计提费用核算表</h2>
<div>
<p>
<input id="importFile" name="excelFile" type="file" value="选择要导入的文件">
</p>
<p>
<input type="button" id="saveExcelData" value="导入银行流水" />
@Html.ActionLink("初始数据维护", "Index", "初始数据维护表")
@Html.ActionLink("查看初始数据维护", "Index", "计提初始数据维护记录表")
<a href="../Excels/计提费用银行流水导入模板.xlsx" style="color: #ff0000; text-decoration: none;">下载导入模板</a>
</p>
</div>
<hr />
<p>
产品名称:
@Html.DropDownList("productId", (SelectList)ViewBag.Product_id, "全部", new { style = "width:330px;" })
实际发生日:
@Html.TextBox("sysDate1", ViewBag.SysDate1 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate1" })-
@Html.TextBox("sysDate2", ViewBag.SysDate2 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate2" })
<input type="button" id="btnSubmit" value=" 过滤 " />
<input type="button" id="btnDelete" value="批量删除" />
<input type="button" id="btnExport" value="导出计提费用核算表" />
</p>
<table class="table" id="listTable">
<tr>
<th>
<input type="checkbox" id="checkPathAll" />
</th>
<th>
流水变动日期
</th>
<th>
产品名称
</th>
<th>
规模变动
</th>
<th>
计提起始日
</th>
<th>
计提天数
</th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="productId" value="@item.id" class="checkPath" />
</td>
<td>
@(item.流水变动日期.ToString("yyyy-MM-dd"))
</td>
<td>
@Html.DisplayFor(modelItem => item.产品名称)
</td>
<td>
@if (item.申购或赎回 == "赎回")
{
@*@Html.DisplayFor(modelItem => item.规模变动)*@
@Html.Raw("<span style='color:red'>"+item.规模变动+"</span>");
}
else
{
@Html.DisplayFor(modelItem => item.规模变动)
}
</td>
<td>
@(item.计提起始日.ToString("yyyy-MM-dd"))
</td>
<td>
@Html.DisplayFor(modelItem => item.计提天数)
</td>
</tr>
}
</table>
<br />
页面 @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount
//这里是查询时需要带的条件
@Html.PagedListPager(Model, page => Url.Action("Index",
new
{
page,
flag = ViewBag.Flag,
productId = ViewBag.productId,
sysDate1 = ViewBag.SysDate1,
sysDate2 = ViewBag.SysDate2
}))
1. 空格转义字符
2. <br/> 换行
3. <hr/> 横线
4. 下载项目文件中已经存在的文件
<a href="../Excels/计提费用银行流水导入模板.xlsx" style="color: #ff0000; text-decoration: none;">下载导入模板</a>
5. 页面跳转,第一个参数是按钮名,第二个是控制器view文件下的cshtml文件名,第三个控制器名称
@Html.ActionLink("查看初始数据维护", "Index", "计提初始数据维护记录表")
6. 下拉框,默认显示全部,需要配合控制器中的ViewBag使用
产品名称:
@Html.DropDownList("productId", (SelectList)ViewBag.Product_id, "全部", new { style = "width:330px;" })
第一个参数是查询集合,第二个是查询字段,第三个是字段别名,第四个是条件值
ViewBag.Product_id = new SelectList(Product, "key", "key", productId);
7. 日期选择框
实际发生日:
@Html.TextBox("sysDate1", ViewBag.SysDate1 as string, new { onclick = "WdatePicker()", style = "width:185px;", id = "sysDate1" })
需要引入这个 <script src="~/Scripts/My97DatePicker/WdatePicker.js"></script>
8. // 文本框联动 改变一个值时另一个值变化 @readonly = "readonly"只读
<div class="form-group">
@Html.LabelFor(model => model.锁定结束净值日期, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.锁定结束净值日期, new { htmlAttributes = new { onclick = "WdatePicker({ skin: 'whyGreen'})", @id = "PortionConfirmationDate", @class = "form-control" } })
@Html.ValidationMessageFor(model => model.锁定结束净值日期, "", new { @class = "text-danger" })
</div>
</div>
$("#PortionConfirmationDate").blur(function () {
var 成立日期 = $('input[name=成立日期]').val();
var 到期日期 = $('input[name=到期日期]').val();
var 结束净值日期 = $('input[name=锁定结束净值日期]').val();
var 起始净值 = $('input[name=锁定开始净值]').val();
var 收益率 = $('input[name=收益率]').val();
var 锁定金额 = $('input[name=金额]').val();
var 锁定份额 = $('input[name=份额]').val();
var 账户ID = $('input[name=Cash_account_id]').val();
$.ajax({
url: "/现金管理锁定期合同表/锁定结束净值日期变更",
datatype: "json",
data: { "成立日期": 成立日期, "到期日期": 到期日期, "结束净值日期": 结束净值日期, "起始净值": 起始净值, "收益率": 收益率, "锁定金额": 锁定金额, "锁定份额": 锁定份额, "账户ID": 账户ID },
success: function (dt) {
if (dt)
{
$('input[name=锁定结束净值]').val(dt.净值);
$('input[name=奖励金额]').val(dt.奖励金额);
}
else {
$('input[name=锁定结束净值]').val(0);
$('input[name=奖励金额]').val(0);
}
}
});
});
9. 下拉菜单,href 可以跳转到对应的菜单页
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">固收合同 <span class="caret"></span></a>
<ul class="dropdown-menu" style="background-color: #D5B32B;">
<li><a href="/Fix_Contract">固收合同列表</a></li>
<li><a href="/基金确认函">基金确认函</a></li>
<li><a href="/固收合同导入">CRM导入合同列表</a></li>
</ul>
</li>