您的位置：首页 > Web前端 > BootStrap
bootstrap-table 实现表格增删改查

2017-12-07 10:45 1701 查看
bootstrap、bootstrap-table官网：http://bootstrap-table.wenzhixin.net.cn/documentation/

相关cs js 引用dns地址： http://www.bootcdn.cn/bootstrap/ 下载到本地加载速度会很快

最终效果：分页、增删改查，排序因为用不上就没加

不足：查了一堆资料，终于从前端小白，捣鼓出来了，但点击编辑想实现的是直接表格行内可编辑化，焦点离开后自动保存，有空再战

后端还有提供增删改查接口
<!DOCTYPE html>
<%@ page language="java" pageEncoding="utf-8" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
<base href="<%=basePath%>">
<title>apollo-platform</title>
<meta charset="utf-8">
<link rel="stylesheet" href="/bootstrap-table-examples-master/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/bootstrap-table-examples-master/assets/bootstrap-table/bootstrap-table.css">

<style>
.update {
color: #333;
margin-right: 5px;
}

.remove {
color: red;
margin-left: 5px;
}

.alert {
padding: 0 14px;
margin-bottom: 0;
display: inline-block;
}
</style>
<script src="/bootstrap-table-examples-master/assets/jquery.min.js"></script>
<script src="/bootstrap-table-examples-master/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="/bootstrap-table-examples-master/assets/bootstrap-table/bootstrap-table.js"></script>
<%--<script src="/bootstrap-table-examples-master/ga.js"/>--%>
</head>
<body>

<div class="container">
<h1>平台管理</h1>
<p class="toolbar">
<a class="create btn btn-default" href="javascript:">Create Item</a>
<span class="alert"></span>
</p>
<table id="table"
data-show-refresh="true"
data-show-columns="true"
data-search="true"
data-query-params="queryParams"
data-toolbar=".toolbar">
<thead>
<tr>
<th data-field="desc">平台名</th>
<th data-field="channel">id</th>
<th data-field="appcode">appcode</th>
<th data-field="cliientType">cliientType</th>
<th data-field="responseType">responseType</th>
<th data-field="dmpType">dmpType</th>
<th data-field="idea">idea</th>
<th data-field="idea2">idea2</th>
<th data-field="state">state</th>
<th data-field="action"
data-align="center"
data-formatter="actionFormatter"
data-events="actionEvents">Action
</th>
</tr>
</thead>
</table>
</div>

<div id="modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="input-group">
<span class="input-group-addon">desc</span>
<input class="form-control" type="text" name="desc" id="desc">
</div>
<div class="input-group">
<span class="input-group-addon">channel</span>
<input class="form-control" type="number" name="channel" id="channel">
</div>
<div class="input-group">

<span class="input-group-addon">appcode</span>
<input class="form-control" type="text" name="appcode" id="appcode">
</div>
<div class="input-group">
<span class="input-group-addon">cliientType</span>
<input class="form-control" type="text" name="cliientType" id="cliientType">
</div>
<div class="input-group">
<span class="input-group-addon">responseType</span>
<input class="form-control" type="text" name="responseType" id="responseType">
</div>
<div class="input-group">
<span class="input-group-addon">dmpType</span>
<input class="form-control" type="text" name="dmpType" id="dmpType">
</div>
<div class="input-group">
<span class="input-group-addon">idea</span>
<input class="form-control" type="text" name="idea" id="idea">
</div>
<div class="input-group">
<span class="input-group-addon">idea2</span>
<input class="form-control" type="text" name="idea2" id="idea2">
</div>
<div class="input-group">
<span class="input-group-addon">state</span>
<input class="form-control" type="text" name="state" id="state">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary submit">Submit</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>

var $table = $('#table').bootstrapTable({
url: "platform/getList",
toolbar: '#toolbar', //工具按钮用哪个容器
//striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
//queryParams: postQueryParams,//传递参数（*）
//sidePagination: "server",      //分页方式：client客户端分页，server服务端分页（*）
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
strictSearch: true,
//            height: table_h, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度,设置了行高后编辑时标头宽度不会随着下面的行改变，且颜色也不会改变？？？？
uniqueId: "id", //每一行的唯一标识，一般为主键列
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
paginationHAlign: "left",
singleSelect: true,
search: true,               //是否显示表格搜索，此搜索是客户端搜索，不会进服务端
//strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
clickToSelect: true, //是否启用点击选中行
paginationPreText: "<<",
paginationNextText: ">>"
}),
$modal = $('#modal').modal({show: false}),
$alert = $('.alert').hide();

$(function () {
// create event
$('.create').click(function () {
showModal($(this).text());
});

$modal.find('.submit').click(function () {
var row = {};
$modal.find('input[name]').each(function () {
row[$(this).attr('name')] = $(this).val();
});
$.ajax({
//                url: API_URL + ($modal.data('id') || ''),
url: "platform/add",
type: "post",
//                type: $modal.data('id') ? 'put' : 'post',
contentType: 'application/json',
data: JSON.stringify(row),
success: function () {
$modal.modal('hide');
$table.bootstrapTable('refresh');
showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item successful!', 'success');
},
error: function () {
$modal.modal('hide');
showAlert(($modal.data('id') ? 'Update' : 'Create') + ' item error!', 'danger');
}
});
});
});

function queryParams(params) {
return {};
}

function actionFormatter(value) {
return [
'<a class="update" href="javascript:" title="Update Item"><i class="glyphicon glyphicon-edit"></i></a>',
'<a class="remove" href="javascript:" title="Delete Item"><i class="glyphicon glyphicon-remove-circle"></i></a>',
].join('');
}

// update and delete events
window.actionEvents = {
'click .update': function (e, value, row) {
showModal($(this).attr('title'), row);
},
'click .remove': function (e, value, row) {
if (confirm('Are you sure to delete this item?')) {
$.ajax({
url: "platform/del?appcode=" + row.code,
type: 'delete',
success: function () {
$table.bootstrapTable('refresh');
showAlert('Delete item successful!', 'success');
},
error: function () {
showAlert('Delete item error!', 'danger');
}
})
}
}
};

function showModal(title, row) {
row = row || {
id: '',
state: 0
}; // default row value
$modal.data('id', row.code);
$modal.find('.modal-title').text(title);
for (var name in row) {
$modal.find('input[name="' + name + '"]').val(row[name]);
}
$modal.modal('show');
}

function showAlert(title, type) {
$alert.attr('class', 'alert alert-' + type || 'success')
.html('<i class="glyphicon glyphicon-check"></i> ' + title).show();
setTimeout(function () {
$alert.hide();
}, 3000);
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航