通过网上查了查资料,自己测试,记录一下自己对Bootstrap Table的新得。
刚入行,萌新,还望大佬们指教,嘻嘻。
示例图放两张吧先,哒家~~
资源下载,有积分的捧个场,实在没有的留qq微信邮箱啥的,找我要。
谢谢支持!!
https://download.csdn.net/download/weixin_44594300/11503869
行内编辑
1引入主要文件
bootstrap.min.js
bootstrap.min.css
bootstrap-table.js
bootstrap-table-zh-CN.js
可实现增删改查
引入以上即可
(其他实用插件)
可以自己百度琢磨琢磨
导出插件 实现导出
tableExport.js
bootstrap-table-export.js
行内编辑插件
bootstrap-editable.min.js
bootstrap-table-editable.min.js
日期插件 实现日期选择(示例图)
bootstrap-datetimepicker.js
bootstrap-datetimepicker.zh-CN.js
bootstrap-datetimepicker.min.css
表单验证插件 验证表单
bootstrapValidator.min.js
bootstrapValidator.min.css
1.1数据绑定
Html
<div class="table-responsive" style="min-width: 430px;">
<table id="tableGrid" class="table table-bordered table-striped table-hover"></table>
</div>
js
$(function () {
//1.初始化Table
var oTable = new Table_Init();
oTable.Init();
//2.初始化Button的点击事件
var oButton_Init = new Button_Init();
oButton_Init.Init();
});
var Table_Init = function () {
var oTable_Init = new Object();
//初始化Table
oTable_Init.Init = function () {
$('#tableGrid').bootstrapTable({
url: '/ceshi/GetDepartment', //请求后台的URL(*)
method: 'post', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTable_Init.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 542, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle: false, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
showExport: true, //是否显示导出按钮
align: "left",
halign: "center",
columns: [{
checkbox: true
}, {
width: 60,
field: 'ID',
title: '序号'
}, {
width: 100,
field: 'name',
title: '物资名称',
editable: true
},
{
width: 140,
field: 'symbol',
title: '标准或图号',
editable: true
},
{
field: 'type',
title: '规格型号',
width: 80,
editable: true
}, {
width: 50,
field: 'price',
title: '单价',
editable: true
}, {
width: 80,
field: 'Receivingunit',
title: '计量单位',
editable: true
}, {
width: 100,
field: 'Number',
title: '需求数量',
editable: true
}, {
width: 60,
field: 'money',
title: '金额',
editable: {
type: 'text',
title: '金额',
//行内表单验证
validate: function (v) {
if (isNaN(v)) return '金额必须是数字';
var money = parseInt(v);
if (money <= 0) return '金额必须是正整数';
}
}
}, {
width: 100,
field: 'time',
title: '到货时间',
editable: true
}, {
width: 140,
field: 'Telephone',
title: '收货人及电话',
editable: true
}, {
width: 140,
field: 'arrival',
title: '到货地点',
editable: true
}, {
field: 'unit',
title: '收货单位',
width: 100,
editable: true
},
{
width: 140,
field: 'remarks',
title: '备注',
editable: true
}
],
//行内编辑
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/ceshi/Edit",
data: row,
dataType: 'JSON',
success: function (data, status) {
if (status == "success") {
alert('提交数据成功');
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
});
};
//得到查询的参数
oTable_Init.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令(desc,asc)
name: $("#txt_search_name").val() //查询条件
};
return temp;
};
后台
2//注 修改bootstrap-table.js 将内容注释实现表头不错位,且增加样式
/*解决宽度和换行*/
.table {
table-layout: fixed;
word-break: break-all;
}
/*表头居中*/
.table th, .table td {
text-align: center;
vertical-align: middle!important;
}
.table_list_box {
table-layout: fixed !important;
}
增加JS代码
$(function () {
$(window).resize(function () {
$('#tableGrid').bootstrapTable('resetView');
});
});
3表头固定Table JS中添加 height属性
4查询实现
4.1后台
public JsonResult GetDepartment(int limit, int offset, string name)
{
var lstRes = new List<Model>();
lstRes = Dal.GetSelect();
var cxname = name;
if (cxname != "")
{
var rows = lstRes.Skip(offset).Take(limit).ToList().Where(u => u.name == name);
var lstRess = new List<Model>();
foreach (var item in rows)
{
lstRess.Add(item);
}
var total = lstRess.Count;
return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}
else
{
var total = lstRes.Count;
var rows = lstRes.Skip(offset).Take(limit).ToList();
return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
}
}
4.2前台HTML+js部分
<form class="form-horizontal">
<label for="txt_search_name" class="col-sm-1 control-label" style="text-align: right; margin-top: 15px; min-width: 100px;">物资名称</label>
<div class="col-sm-3" style="margin-top: 10px;">
<input id="txt_search_name" type="text" class="form-control">
</div>
<label for="txt_search_symbol" class="col-sm-1 control-label" style="text-align: right; margin-top: 15px; min-width: 100px;">标准或图号</label>
<div class="col-sm-3" style="margin-top: 10px;">
<input id="txt_search_symbol" type="text" class="form-control">
</div>
<div class="col-sm-1">
<button type="button" id="btn_query" class="btn btn-primary" style="margin-top: 10px;">查询</button>
</div>
</form>
js获取查询框数据
//得到查询的参数
oTable_Init.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小
offset: params.offset, //页码
sort: params.sort, //排序列名
sortOrder: params.order, //排位命令(desc,asc)
name: $("#txt_search_name").val() //查询条件
4.4 定义查询按钮点击事件
//查询按钮
$("#btn_query").click(function () {
var $table = $("#tableGrid");
$table.bootstrapTable('refresh');//刷新Table,Bootstrap Table 会自动执行重新查询
})
5新增删除修改弹窗
5.1主要js代码
//删除按钮
$("#btnDelete").click(function () {
var rows = $("#tableGrid").bootstrapTable('getSelections');
console.log(rows);
if (rows.length == 0) {// rows 主要是为了判断是否选中,下面的else内容才是主要
alert("请先选择要删除的记录!");
return;
} else {
if (confirm("确定要删除吗?")) {
alert("确定");
var arrays = new Array();// 声明一个数组
$(rows).each(function () {// 通过获得别选中的来进行遍历
arrays.push(this.ID);// cid为获得到的整条数据中的一列
});
var idcard = arrays.join(','); // 获得要删除的id
console.log(idcard);
$.ajax({
type: "post",
url: "/ceshi/Delete?idcard=" + idcard,
success: function () {
$("#tb_departments").bootstrapTable('refresh');
alert("删除成功");
location = location;
},
error: function () {
toastr.error('Error');
},
complete: function () {
}
})
}
return;
}
});
//修改按钮
$(".btnEdit").click(function () {
var rows = $("#tableGrid").bootstrapTable('getSelections');
if (rows.length > 1 || rows.length <= 0) {
alert("请选择一行数据编辑");
} else {
for (var name in rows[0]) {
$('#Editmodal').find('input[name="' + name + '"]').val(rows[0][name]);
}
$('#Editmodal').modal('show');
}
});
//新增按钮
$(".btnAdd").click(function () {
$('#Addmodal').modal('show');
})
5.2表单提交,这里我用的bootstrapValidator表单验证的表单提交方法
5.3Html代码新增弹窗,修改一样
6行内编辑,需要引用开头说的行内编辑插件
添加如下代码就可以啦。
后台
//行内编辑
public ActionResult Edit(Model s)
{
Dal.EditByID(s);
//反序列化之后更新
return Json(new { }, JsonRequestBehavior.AllowGet);
}
排序后台 网上搜到的方法,忘记大佬名字了,项目中没用到,大家可以自己尝试
/// <summary>
/// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
/// </summary>
/// <returns>指定对象的集合</returns>
public override ActionResult FindWithPager()
{
//检查用户是否有权限,否则抛出MyDenyAccessException异常
base.CheckAuthorized(AuthorizeKey.ListKey);
string where = GetPagerCondition();
PagerInfo pagerInfo = GetPagerInfo();
var sort = GetSortOrder();
List<TestUserInfo> list = null;
if (sort != null && !string.IsNullOrEmpty(sort.SortName))
{
list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
}
else
{
list = baseBLL.FindWithPager(where, pagerInfo);
}
//Json格式的要求{total:22,rows:{}}
//构造成Json的格式传递
var result = new { total = pagerInfo.RecordCount, rows = list };
return ToJsonContent(result);
}
排序JS
//得到查询的参数
queryParams : function (params) {
//这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
var temp = {
rows: params.limit, //页面大小
page: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortOrder: params.order //排位命令(desc,asc)
};
return temp;
}
数据格式