基于bootstrap table分页数据及行内编辑和导出数据（一）

最新推荐文章于 2024-08-17 01:00:00 发布

HI阡陌

最新推荐文章于 2024-08-17 01:00:00 发布

阅读量8.6k

点赞数 8

分类专栏： mvc 文章标签：基于bootstrap table分页数

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lzd1164961158/article/details/52528267

版权

mvc 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

第一步，导入相应的css和js文件

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />


<link href="~/Content/Swich/bootstrap-switch.min.css" rel="stylesheet" />


<link href="~/Content/bootstrap-table.min.css" rel="stylesheet" />

<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>


<script src="~/Content/laydate/laydate.js"></script>


<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>
</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>&nbsp修改',
'</button> ',
"<button class='remove btn btn-success btn-sm' type='button'>",
'<i class="glyphicon glyphicon-remove"></i>&nbsp删除',
'</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");
}

}

关注

8
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。