Boostrap-table.js+bootstrap-editable.js增删改查完整案例-CSDN博客

本文提供了一个使用Bootstrap-table.js和bootstrap-editable.js实现的部门管理增删改查的完整案例。案例中通过AJAX进行CRUD操作，包括HTML和JS代码示例，并给出了查询功能的实现。同时，文章还提供了SpringMVC后台获取单页数据的Controller代码参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：
这里写图片描述
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;
            }