Boostrap-table.js+bootstrap-editable.js增删改查完整案例
来源：互联网 发布：狗狗商城软件 编辑：程序博客网 时间：2024/06/05 15:30
先上效果图： 
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)){ $remind.html(' <i class="icon icon-info-sign">部门名不能输入空格!</i>'); return; } if(name.length>20){ $remind.html(' <i class="icon icon-info-sign">部门名不能超过20个字符!</i>'); return; } //博主封装的ajax方法，详见我另外一篇博客 http://blog.csdn.net/u010543785/article/details/52366495 $.postJSON(baseUrl+"department/add",'{"name":"'+name+'","parentdepartId":"'+parentId+'"}',function(data){ if(data>0){ $("#departSel").css("display","none"); $("#departSel").val("*"); $("#nameInp").css("display","none"); $("#nameInp").val(""); $("#cancel").css("display", "none"); $remind.html(''); $("#add").html('<i class="glyphicon glyphicon-plus"></i> 新建'); $table.bootstrapTable('destroy');//表格销毁 oTable.Init(); $.gritter.add({ title: '提示', text: '新建部门成功!', sticky: false, time: 2500 }); initDepartSelect(); }else{ alert("新建部门失败，请联系技术人员!"); } }) }else { $("#nameInp").css("display", "block"); $("#departSel").css("display", "block"); $("#cancel").css("display", "inline-block"); $("#nameInp").focus(); $("#add").html('<i class="glyphicon glyphicon-ok-circle adding"></i> 确认'); } });});$("#cancel").click(function(){ $("#departSel").css("display","none"); $("#departSel").val("*"); $("#nameInp").css("display","none"); $("#nameInp").val(""); $("#add").html('<i class="glyphicon glyphicon-plus"></i> 新建'); $(".remind").html(''); $(this).css("display","none");});var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $table.bootstrapTable({ pagination: false, url: baseUrl + "department/queryAll", columns: [ { field: 'state', checkbox: true }, { title: '部门名', field: 'name', align: 'left', formatter: spanFormatter, sortable: true }, { title: '上级部门名', field: 'parentdepartName', align: 'left', formatter: nullFormatter, sortable: true }, { field: 'id', title: '操作', align: 'left', events: operateEvents, formatter: operateFormatter } ] }); } return oTableInit;}//操作window.operateEvents = { 'click .edit': function (e, value, row, index) { index = index+1;//tr所在行 var $row = $table.find("tbody tr:nth-child("+index+")"); //各字段的编辑 var $name = $row.find("td:nth-child(2) span"); var $parentdepartName= $row.find("td:nth-child(3) span"); if($(this).hasClass("editting")){//编辑完成 $(this).siblings("a").css("display","none"); $(this).find("i").removeClass("glyphicon-ok"); $(this).find("i").addClass("glyphicon-edit"); $(this).removeClass("editting"); $row.find(".editable").editable('toggleDisabled');//转成不可编辑状态 row.name = $name.html(); var parentId = $parentdepartName.attr("data-value"); row.parentdepartId = parentId=="null"?"":parentId; //博主封装的ajax方法，详见我另外一篇博客 http://blog.csdn.net/u010543785/article/details/52366495 $.putJSON(baseUrl+"department/update", JSON.stringify(row),function(data){//编辑请求 并返回值 if(data==1) { $.gritter.add({ title: '提示', text: '编辑部门成功!', sticky: false, time: 2000, }); }else{ alert("编辑失败，请联系技术人员！"); } }); }else{//开始编辑 $(this).siblings("a").css("display","inline-block"); $row.find(".editable").editable('toggleDisabled'); $(this).find("i").removeClass("glyphicon-edit"); $(this).find("i").addClass("glyphicon-ok"); $(this).addClass("editting"); //变成可编辑状态 $name.editable({//部门名 validate: function(value) { if(/(^\s+)|(\s+$)/g.test(value)){ return '部门名不能输入空格!'; } if(value.length>20){ return '部门名不能超过20个字符!'; } if($.trim(value) == '') return '部门名不能为空！'; } }); $parentdepartName.editable({//部门 type:'select2', emptytext: '无上级', showbuttons: false, select2: { width: '230px', minimumInputLength: 0, minimumResultsForSearch: -1, id: function (e) { return e.id; }, ajax: { url: baseUrl+"department/queryAll", dataType: 'json', data: function (term, page) { return { query: term }; }, results: function (data, page) { var datas =[{"id":"null","name":"无上级"}]; for(var i in data){ datas.push(data[i]); } return { results: datas }; } }, formatResult: function (depart) { return depart.name; }, formatSelection: function (depart) { $parentdepartName.attr("data-value",depart.id); return depart.name; }, initSelection: function (element, callback) { /* if(element.val()==""){ return; } return $.get(baseUrl+"department/queryById/"+element.val(), {}, function (data) { callback(data); }, 'json'); *///added dataType } } }); } }, 'click .cancel': function (e, value, row, index) {//取消编辑 index = index+1;//tr所在行 var $row = $table.find("tbody tr:nth-child("+index+")"); $row.find(".editable").editable('toggleDisabled'); $(this).siblings("a").find("i").removeClass("glyphicon-ok"); $(this).siblings("a").find("i").addClass("glyphicon-edit"); $(this).siblings("a").removeClass("editting"); $(this).css("display","none"); }};//批量删除操作$table.on('check.bs.table uncheck.bs.table ' + 'check-all.bs.table uncheck-all.bs.table', function () { $remove.prop('disabled', !$table.bootstrapTable('getSelections').length); // save your data, here just save the current page selections = getIdSelections(); // push or splice the selections if you want to save all data selections});$table.on('expand-row.bs.table', function (e, index, row, $detail) { if (index % 2 == 1) { $detail.html('Loading from ajax request...'); $.get('LICENSE', function (res) { $detail.html(res.replace(/\n/g, '<br>')); }); }});$remove.click(function () { var ids = getIdSelections(); //博主封装的ajax方法，详见我另外一篇博客 http://blog.csdn.net/u010543785/article/details/52366495 $.putJSON(baseUrl+"department/deletes","["+ids.toString()+"]",function(data){ if(data>0){ $table.bootstrapTable('remove', { field: 'id', values: ids }); $.gritter.add({ title: '提示', text: '删除部门成功!', sticky: false, time: 2500 }); }else{ alert("删除失败，请联系技术人员!"); } }); $remove.prop('disabled', true);});function getIdSelections() { return $.map($table.bootstrapTable('getSelections'), function (row) { return row.id });}//---formatter 格式化返回tdfunction spanFormatter(data) { return "<span style='cursor:pointer'>"+data+"</span>";}function nullFormatter(value, row) { if(value==""||value==null||value=="null") { return "<span style='cursor:pointer' data-value='"+row.parentdepartId+"'></span>"; } return "<span style='cursor:pointer' data-value='"+row.parentdepartId+"'>"+value+"</span>";}function operateFormatter(value, row, index) { return [ '<a class="edit" href="javascript:void(0)" title="编辑">', '<i class="glyphicon glyphicon-edit"></i>', '</a> ', '<a class="cancel" href="javascript:void(0)" title="取消编辑" style="display:none">', '<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');}//初始化部门下拉框function initDepartSelect() { //博主封装的ajax方法，详见我另外一篇博客 http://blog.csdn.net/u010543785/article/details/52366495 $.sanjiGetJSON(baseUrl + "department/queryAll", '', function (data) { $("#departSel").html(""); $("#departSel").append('<option value="*">请选择上级部门</option>'); for (var i = 0; i < data.length; i++) { $("#departSel").append('<option value="' + data[i].id + '">' + data[i].name + '</option>'); } //$("#departSel").select2(); });}该部门管理并没有查询功能，附上
查询功能
的例子：
$(document).ready(function(){ if(localStorage.getItem("rolesName")!="管理员"){//权限控制 $("#add").remove(); } //初始化下拉框 initRolesSelect(); //表格初始化 var oTable = new TableInit(); oTable.Init(); //查询 $("#queryBtn").click(function(){ $table.bootstrapTable('destroy');//表格销毁 oTable.Init() });});var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $table.bootstrapTable({ pagination: true, url: baseUrl + "user/query", queryParams: oTableInit.queryParams, columns: [ { field: 'state', checkbox: true }, { title: '用户名', field: 'username', align: 'left', formatter: spanFormatter, sortable: true }, { title: '真名', field: 'longname', align: 'left', sortable: true, formatter: nullFormatter }, { title: '角色', field: 'rolesName', align: 'left', sortable: true, formatter: rolesFormatter }, { title: '所在部门', field: 'departName', align: 'left', formatter: departFormatter }, { title: '最后一次登录', field: 'logTime', align: 'left', sortable: true, formatter: timeFormatter }, { field: 'id', title: '操作', align: 'left', events: operateEvents, formatter: operateFormatter } ] }); } //查询条件 oTableInit.queryParams = function(params){ var temp={ rolesId:$("#rolesSel").val()=="*"?null:$("#rolesSel").val(), departId:$("#departSel").val()=="*"?null:$("#departSel").val(), username:$("#usernameInp").val()==""?null:$("#usernameInp").val() } return temp; } return oTableInit; //一次性获取所有数据时responseHandler 这段代码不需要。 但是只获取单页数据时就需要该段代码提供总行数，以便显示分页信息/* oTableInit.responseHandler = function (res) { if (res != null) { return { "rows": res.rows, //查询到到单页里的数据 "total": res.total //总行数（数据库里查询到的总记录数量） }; } else { return { "rows": [], "total": 0 }; } } return oTableInit; */}附上获取单页数据的page模型，如一次性获取所有数据则不需要该模型
/** * 封装分页数据 * @param <T> */public class Page<T> { private List<T> rows;//数据 private int total;//总行数 public List<T> getRows() { return rows; } public void setRows(List<T> rows) { this.rows = rows; } public int computeTotal(int totalRows,int size) { if(totalRows==0){ return 1; } return (int) (totalRows % size == 0 ? totalRows / size : totalRows / size + 1); } public int getTotal() { return total; } public void setTotal(int total) { this.total = total; }附上java后台代码， springmvc获取单页数据的controller
/** * * @param @param psUser ps用户名 * @param @param psLongname ps用户真名 * @param @param departId 部门ID * @param @return * @return List<psRecord> * @throws * @date 2016年6月3日 */ @RequestMapping(value = "/queryByPage", method = RequestMethod.GET) public @ResponseBody Page<psRecord> query(@RequestParam String pageNumber, @RequestParam String pageSize,@RequestParam String daterange, @RequestParam String recordUser, @RequestParam String caller,@RequestParam String sort) { Page<psRecord> page = new Page<psRecord>(); int no = pageNumber == null ? 10 : Integer.parseInt(pageNumber); int size = pageSize == null ? 10 : Integer.parseInt(pageSize); List<psRecord> psRecords = null; HashMap<String,String> map = new HashMap<String,String>(); try { String[] dateranges = new String(daterange.getBytes("iso8859-1"),"UTF-8").split(" "); String startDate="",endDate = ""; if(dateranges.length>1){ startDate = dateranges[0]; endDate = dateranges[2]; } map.put("startDate", startDate); map.put("endDate", endDate); map.put("recordUser", new String(recordUser.getBytes("iso8859-1"),"UTF-8")); map.put("caller", new String(caller.getBytes("iso8859-1"),"UTF-8")); psRecords = psRecordService.queryByPage(startDate,endDate,new String(recordUser.getBytes("iso8859-1"),"UTF-8") ,new String(caller.getBytes("iso8859-1"),"UTF-8"),size*(no-1),size,sort); //返回的数据初始化page page.setRows(psRecords); page.setTotal(psRecordService.count(map)); } catch (Exception e) { e.printStackTrace(); } return page; }对代码如有问题，私信我~
1 0
- Boostrap-table.js+bootstrap-editable.js增删改查完整案例
- Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
- js增删查改
- bootstrap-table 实现表格增删改查
- JS实现增删改查
- js json 增删改查
- js json 增删改查
- js实现增删改查
- js增删改查列表
- angulas.js 增删改查
- Bootstrap 增删改查
- Jersey复杂案例 完整的增删改查Restful服务
- JS对数据库进行增删改查
- 纯js增删改查页面
- js实现user增删改查
- js实现的增删改查
- node js 连接mysql 增删改查
- Extjs 增删改查基本功能页面Js
- Xamarin Android布局文件没有智能提示
- 使用DOS命令操作Windows防火墙
- Android CountDownTimer倒计时器的使用
- [SCOI2005]骑士精神
- Android面试题
- Boostrap-table.js+bootstrap-editable.js增删改查完整案例
- 异常处理commit already called
- android studio retrolambda的使用
- C++子类父类构造函数的关系
- debian 中定时任务cron使用
- iOS多线程的初步研究（九）-- dispatch源
- [Android] ImageView.ScaleType设置图解
- iOS通讯录开发、获取
- IOS 调用百度地图（SDK） 进行定位以及自定义位置弹出框（气泡）
