基於bootstrap table分頁資料及行內編輯和匯出資料（一）
第一步，匯入相應的css和js檔案
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<!-----swich按鈕需要的css檔案-->
<link href="~/Content/Swich/bootstrap-switch.min.css" rel="stylesheet" />
<!-----表格需要的css檔案-->
<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />
<!-----行內編輯需要的css檔案-->
<link href="~/Content/bootstrap-editable.css" rel="stylesheet" />
<script src="~/Content/jquery.min.js"></script>
<script src="~/Content/bootstrap.min.js"></script>
<!----匯出表格的外掛-->
@*<script src="~/Content/bootstrap-table-export.min.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>*@
<!-----編輯檔案需要的指令碼-->
<script src="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table.min.js"></script><!--表格需要的指令碼--->
<script src="~/Content/bootstrap-table-zh-CN.min.js"></script>
<!------laydate日期外掛-->
<script src="~/Content/laydate/laydate.js"></script>
<!------lswichjs外掛-->
<script src="~/Content/Swich/bootstrap-switch.min.js"></script>
@*
注意 使用表格外掛時圖示會有顯示不出來的情況
只需要把fonts資料夾複製一份放在根目錄下即可
*@
佈局頁面：
<body>
<div>
<!-----表格-->
<table id="tb_departments" class=" table table-bordered table-striped" style="text-align:center;"></table>
<!-----頭部按鈕-->
<div id="toolbar">
<button class="btn btn-primary" type="button"><i class="glyphicon glyphicon-plus"></i> 新增</button>
</div>
@*彈出層*@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true" style="position:absolute;top:20%;left:10%;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">
×
</button>
<h4>
你想幹什麼？？
</h4>
</div>
<div class="modal-body">
是否確定操作？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success"
data-dismiss="modal" id="qx">
關閉
</button>
<a class="btn btn-success" id="save">
確定
</a>
</div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
</body>
jq部分
<script>
var id;//用於接收id
var type;//用於判斷編輯的列
$(function () {
laydate.skin('dahong');//載入面板 dahong是面板名，在laydate>skins中
//重新載入表格資料
$("#btnsearch").click(function () {
//獲取選中行的id/資料
$.map($("#tb_departments").bootstrapTable('getSelections'), function (row) {
id = row.id;
});
var txt = $("#txt").val();
var reg = (/\w+[@{Html.Raw("@");}]{1}\w+[.]\w+/); //驗證郵箱、
if (reg.test(txt)) {
$("#tb_departments").bootstrapTable('refresh');//重新載入資料
} else {
alert("郵箱不合法");
}
});
$table = $("#tb_departments");
$("#tb_departments").bootstrapTable({
url: '@Url.Action("AjaxPage")',
method: 'get',
toolbar: "#toolbar",//按鈕容器
striped: true,//使表格帶有條紋
pagination: true,//顯示底部分頁工具欄
pageSize: 5,
cache: false,//是否啟用快取
pagenumber: 1,
pageList: [10, 15, 20],
idField: 'id',//標識主鍵
showToggle: false, //是否顯示詳細檢視和列表檢視的切換按鈕
cardView: false,//設定為True時顯示名片（card）佈局
showColumns: true, //顯示隱藏列
showRefresh: true, //顯示重新整理按鈕
singleSelect: true,//複選框只能選擇一條記錄
search: false,//是否顯示搜尋框
toolbarAlign: "left",//工具欄對齊方式
searchOnEnterKey: false,//回車搜尋
clickToSelect: true,//點選行選中單選/複選
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
queryParams: queryParams, //引數
showRefresh: true,//是否顯示重新整理按鈕
minimumCountColumns: 2,//最少允許顯示的行數
cardView: false, //是否顯示詳細檢視
detailView: false, //是否顯示父子表
//showExport: true, //是否顯示匯出
//exportDataType: "basic", //basic', 'all', 'selected'.
columns: [
{ checkbox: true, width: "5%", title: "選擇", align: 'center' },
{
field: 'id', title: '編號', width: '15%', align: 'center'
},
{
field: 'email', title: '郵箱', width: '15%', align: 'center',
formatter: function (value) {
return '<span class="sort">' + (value == null ? "123" : value) + '</span>';
},
events: {
//點選事件
'click .sort': function (e, value, row, index) {
id = row.id;
type = "email";
}
}
},
{
field: 'pwd', title: '密碼', width: '15%', align: 'center',
formatter: function (value) {
return '<span class="sort">' + (value == null ? "123" : value) + '</span>';
},
events: {
//點選事件
'click .sort': function (e, value, row, index) {
id = row.id;
type = "pwd";
}
}
},
//切換按鈕
{
field: 'IsShow',
title: '首頁顯示',
width:'10%',
formatter: function (value, row) {
var check = "checked";
if (!value) {
check = "";
}
var kongjian =
'<input class="switch" classid=' + row.Classid + ' type="checkbox" ' + check + ' />';
return kongjian;
}
},
{
field: 'logintime', title: '登入時間', width: '15%', align: 'center',
formatter: function (value) {
return ' <input name="time" class="inline laydate-icon" value="' + (value == null ? "請選擇日期" : value) + '" id="time" style="width:240px;">';
},
events: {
//點選事件
'click #time': function (e, value, row, index) {
laydate({ istime: true, format: "YYYY-MM-DD hh:mm:ss" });//時間外掛的事件
id = row.id;
type = "logintime";
}
}
},
{
field: 'ss', title: '操作', align: 'center',
formatter: function (value, row, index) {
return [
'<button class="edit btn btn-success btn-sm" type="button">',
'<i class="glyphicon glyphicon-edit"></i> 修改',
'</button> ',
"<button class='remove btn btn-success btn-sm' type='button'>",
'<i class="glyphicon glyphicon-remove"></i> 刪除',
'</button> ',
].join('');
},
events: {//事件
'click .remove': function (e, value, row, index) {//formatter中點選刪除按鈕事件
//機制：click表示點選，.remove表示class名
$table.bootstrapTable('check', index);
getDelete(row.id);
},
}
},
],
// /行內編輯的程式碼
//注意 要使用該方法 field列中必須用
// formatter: function (value) {
// return '<span class="sort">' + parseInt(value == null ? "123" : value) + '</span>';
// }這種方式繫結資料
onLoadSuccess: function () {//載入成功顯示底部的綠線，表示可以編輯
$('.switch').bootstrapSwitch({
size: 'large',//設定包裹按鈕容器的大小，可選null, 'mini', 'small', 'normal', 'large'
onColor: "success",//開關按鈕左邊的顏色
offColor: "warning",//開關按鈕右邊邊的顏色 可選值 'primary', 'info', 'success', 'warning', 'danger', 'default'
onText: "點我啊",//開關按鈕左邊的文字
offText: "別點我",
labelText: "點選切換",//開關按鈕中間的Label文字
});//swich按鈕的切換
//按鈕個改變事件開始
$('.switch').on('switchChange.bootstrapSwitch', function (event, state) {
//這裡寫對應的邏輯程式碼；state表示開關的狀態
alert("當前狀態"+state);
});
//序號
$(".sort").editable({
type: 'text',
pk: 1,
title: '修改資料',
placement: 'bottom',
validate: function (value) {
var sort = $.trim(value);//修改的資料
if (value==""||value==null) {
return '請輸入資訊';
}
$.ajax({
url: '@Url.Action("EditList")',
data: {
pwd: sort,
id: id,
type:type
},
success: function (data) {
if (data === 'true') {
alert("修改成功");
$table.bootstrapTable('refresh');//修改成功後重新載入資料
} else {
alert("修改失敗");
}
},
error: function () {
alert("伺服器錯誤");
}
});
return '';
}
});
},
formatLoadingMessage: function () {//載入事件
return "請稍等，正在載入中...";
},
formatNoMatches: function () { //沒有匹配的結果
return '無符合條件的記錄';
},
});
//返回的引數列表
function queryParams(params) {
var temp = { //這裡的鍵的名字和控制器的變數名必須一直，這邊改動，控制器也需要改成一樣的
pagesize: params.limit, //頁面大小
pageindex: params.offset / params.limit + 1, //頁碼
Title: $("#txt").val(),
};
return temp;
}
//刪除方法、
function getDelete(Getid) {
if (Getid == "" || Getid == null) {//判斷傳回的id是否有資料
alert("請選擇行");
} else {
$("#myModal").modal('show');//顯示模態框
$("#save").click(function () {//當確定按鈕被點選執行事件
$.ajax({
url: "@Url.Action("Delete")",
data: { getid: Getid },
type: 'post',
success: function (data) {
if (data == "true") {
$("#myModal").modal('hide');//刪除成功後關閉模態框
$table.bootstrapTable('refresh');//刪除後重新重新整理表格
}
},
error: function (error) {
alert("error");
}
});
});
$("#qx").click(function () {//點選取消按鈕關閉模態框
$("#myModal").modal('hide');
});
}
}
$("#addbtn").click(function () {
$("#AddmyModal").modal('show');
});
$("#add").click(function () {
var email = $("#firstname").val(), pwd = $("#lastname").val();
if (email==""||pwd=="") {
alert("請輸入資訊");
} else {
$.ajax({
url: '@Url.Action("Add")',
type: 'post',
data: { email: email, pwd: pwd },
success: function (data) {
if (data == "true") {
alert("新增成功");
$("#tb_departments").bootstrapTable('refresh');//重新整理
$("#AddmyModal").modal('hide');//關閉模態框
} else {
alert("新增失敗");
}
}, error: function (error) {
alert('error');
}
});
}
});
})
</script>
後臺用mvcpage分頁實現
匯入名稱空間
using Webdiyer.WebControls.Mvc;
//顯示資料
public ActionResult AjaxPage(int pageindex,int pagesize=5) {
string title = Request["Title"];
var ss=db.m_user.ToList();
PagedList<m_user> list;
if (string.IsNullOrWhiteSpace(title))
{
list= db.m_user.OrderByDescending(n => n.id).ToList().ToPagedList(pageindex, pagesize);
}
else
{
list = db.m_user.Where (n=>n.email.Contains(title)).OrderByDescending(n => n.id).ToList().ToPagedList(pageindex, pagesize);
}
//返回的json資料
var obj = new
{
total = ss.Count(),
rows = list.Select(c=>new {
id=c.id,
email=c.email,
pwd= c.pwd,
logintime= c.logintime.ToString()
})
};
return Json(obj, JsonRequestBehavior.AllowGet);
}
//刪除的方法
public ActionResult Delete(string Getid)
{
int id = int.Parse(Getid);
m_user m = db.m_user.Find(id);
db.m_user.Remove(m);
if (db.SaveChanges()>0)
{
return Content("true");
}
else
{
return Content("false");
}
}
//修改的方法
public ActionResult EditList()
{
var s = Request["pwd"].ToString();
int id =int.Parse( Request["id"].ToString());
var type = Request["type"].ToString();
m_user m = db.m_user.Where(n=>n.id==id).FirstOrDefault();
if (type=="email")
{
m.email = s;
} if (type=="pwd")
{
m.pwd = s;
} if (type=="logintime")
{
m.logintime =DateTime.Parse(s);
}
if (db.SaveChanges()>0)
{
return Content("true");
}
else
{
return Content("false");
}
}