先上效果图:
Boostrap-table.js简单表格可视化可参考我的另外一篇博文:Boostrap-table.js的表格数据可视化 集成bootstrap-table-editable.js
该完整案例是典型的部门管理,通过ajax发出增删改查请求:
html代码:
<section class="panel">
<header class="panel-heading">
部门列表
</header>
<div id="toolbar" style="margin: 10px">
<section class="panel">
<div class="panel-body">
<form class="form-inline">
<button id="remove" class="btn btn-danger" disabled>
<i class="glyphicon glyphicon-trash"></i> 删除
</button>
<div class="form-group">
<input class="form-control" id="nameInp" placeholder="输入新建部门名" style="display: none">
</div>
<div class="form-group" >
<select class="form-control" id="departSel" style="display: none;">
</select>
</div>
<a id="add" class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i> 新建
</a>
<a id="cancel" class="btn btn-warning" style="display:none">
<i class="icon icon-remove-circle">取消</i>
</a>
<span class="remind"></span>
</form>
</div>
</section>
</div>
<table id="departTable">
</table>
</section>
至于js的引用得参考我另外篇博客
js代码
/**
* Created by ASUS on 2016/5/31. 部门管理
*/
$table = $("#departTable");
$remove = $('#remove');
$(document).ready(function(){
initDepartSelect();
//表格初始化
var oTable = new TableInit();
oTable.Init();
//查询
/* $("#queryBtn").click(function(){
$table.bootstrapTable('destroy');//表格销毁
oTable.Init()
});*/
$("#add").click(function(){
var name = $("#nameInp").val();
var parentId =$("#departSel").val();
parentId = parentId=="*"?"":parentId;
var $remind = $(".remind");
if($(this).find("i").hasClass("adding")){
//提交新建数据
if(name==''){
$remind.html(' <i class="icon icon-info-sign">部门名不能为空!</i>');
return;
}
if(/(^\s+)|(\s+$)/g.test(name)){