mvc列表简便方法

引用3个js文件：bootstrap.min.js   bootstrap-table.min.js     bootstrap-table-zh-CN.min.js

@model System.Collections.IEnumerable
@using System.Reflection
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="~/Content/css/module.css" rel="stylesheet" />
<script src="~/Content/jquery-1.10.2.min.js"></script>
<script src="~/Content/bootstrap.min.js"></script>
<script src="~/Content/bootstrap-table.min.js"></script>
<script src="~/Content/bootstrap-table-zh-CN.min.js"></script>
<div class="c-bar clearfix" style="margin-bottom: 15px">
<span class="c-group">
<b>审核下发</b>
</span>
</div>
<div style="margin-bottom: 100px">
<div class="col-sm-9 text-left" style="margin-top:7px;">
<label>起止时间</label>
<input id="dateFrom" name="start" type="text" class="Wdate" autocomplete="off" οnclick="WdatePicker({ maxDate: '#F{$dp.$D(\'dateTo\')||\'%y-%M-%d\'}' })" />
-
<input id="dateTo" name="end" type="text" class="Wdate" autocomplete="off" οnclick="WdatePicker({ minDate: '#F{$dp.$D(\'dateFrom\')}', maxDate: '%y-%M-%d' })" />
<select class="send-select" id="identity">
<option value="">请选择身份类型</option>
<option value="推荐人">推荐人</option>
<option value="合作计划负责人">合作计划负责人</option>
</select>
<select class="send-select" id="sourse">
<option value="">请选择跟进方</option>
<option value="直销">直销</option>
<option value="经销商">经销商</option>
</select>
<select class="send-select" id="state">
<option value="">请选择下发状态</option>
<option value="未审核">未审核</option>
<option value="已下发">已下发</option>
<option value="不下发">不下发</option>
</select>
<button class="button-select" id="search">搜索</button>
<button class="button-select" id="clearSearch">清空搜索条件</button>
</div>
</div>
<table class="table table-striped table-bordered table-hover table-condensed" id="myGrid"></table>
<script src="~/Content/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
InitMainTable();
$("body").keydown(function () {
if (event.keyCode == "13") {//keyCode=13是回车键
$('#btnSumit').click();
}
});
});
var $table;
//初始化bootstrap-table的内容
function InitMainTable() {
//记录页面bootstrap-table全局变量$table，方便应用
//var queryUrl = '/Send/GetData?rnd=' + Math.random();
$table = $('#myGrid').bootstrapTable({
url: "@Url.Action("GetData")", //请求后台的URL（*）
method: 'post', //请求方式（*）
dataType: 'json',
contentType: "application/x-www-form-urlencoded",
queryParamsType: "limit",
//toolbar: '#myToolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
silent: true,
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
paginationLoop: true,
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页,并记录
pageSize: 10, //每页的记录行数（*）
pageList: [5, 10, 25, 50, 100, 200], //可供选择的每页的行数（*）
//search: true, //是否显示表格搜索
strictSearch: true,
searchText: "",
//showColumns: true, //是否显示所有的列（选择显示的列）
//showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 12, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
//height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
uniqueId: "Id", //每一行的唯一标识，一般为主键列
idField: "Id",//主键
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
formatLoadingMessage: function () {
return "<div class='sk-spinner sk-spinner-three-bounce'>" +
"<div class='sk-bounce1'></div>" +
"<div class='sk-bounce2'></div>" +
"<div class='sk-bounce3'></div>" +
"</div>";
},
//得到查询的参数
queryParams: function (params) {
//这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
var temp = {
pageSize: params.limit, //页面大小
pageNumber: (params.offset / params.limit) + 1, //页码
start: $("#dateFrom").val(), //自定义参数
end: $("#dateTo").val(),
identity: $("#identity").val(),
sourse: $("#sourse").val(),
state: $("#state").val(),
search: params.search
};
return temp;
},
columns: [{
field: '',
title: '序号',
sortable: true,
formatter: function (value, row, index) {
return (index + 1);
}
}, {
field: 'CreateTime',
title: '创建时间',
formatter: function (value, row, index) {
return toDate(value);
}
}, {
field: 'Identity',
title: '身份'
}, {
field: 'Demand',
title: '合作类型'
}, {
field: 'Province',
title: '省份'
}, {
field: 'City',
title: '城市'
}, {
field: 'Company',
title: '单位名称'
}, {
field: 'Name',
title: '姓名'
}, {
field: 'Recommender',
title: '单位负责人'
}, {
field: 'Source',
title: '跟进方'
}, {
field: 'State',
title: '下发状态',
formatter: function (value, row, index) {
if (value == null || value=="") {
return "未审核";
} else {
return value;
}
}
}, {
field: 'SendTime',
title: '下发时间',
formatter: toDate
}, {
field: 'Id',
title: '操作',
formatter: detail
}],
onLoadSuccess: function () {
console.log("数据加载成功");

},
onLoadError: function () {
console.log("数据加载失败");
},
});
}

function detail(value, row, index) {
if (row.State == null || row.State == "") {
return "<a href='@Url.Action("/Detail")?id="+ value +"' title='操作'><button class='button-detail'>审核</button></a>";
}
return "";
}

//日期转换
function toDate(cellval) {
//转换日期格式(时间戳转换为datetime格式)
var dateVal = cellval + "";
if (cellval != null) {
var date = new Date(parseInt(dateVal.replace("/Date(", "").replace(")/", ""), 10));
var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
//return date.getFullYear() + "-" + month + "-" + currentDate + " " + hours + ":" + minutes + ":" + seconds;
return date.getFullYear() + "-" + month + "-" + currentDate;
}
}

$(function () {
$("#search").click(function () {
$('#myGrid').bootstrapTable('refresh');
InitMainTable();
});

//清空搜索条件
$("#clearSearch").click(function () {
$("#identity option:first").prop("selected", 'selected');
$("#identity").change();
$("#sourse option:first").prop("selected", 'selected');
$("#sourse").change();
$("#state option:first").prop("selected", 'selected');
$("#state").change();
$("#dateFrom").val("");
$("#dateTo").val("");
$('#myGrid').bootstrapTable('refresh');
InitMainTable();
});
})
</script>

转载于:https://www.cnblogs.com/vision928/p/9828988.html