java和bootstrap实现行内编辑

实现BootstrapTable单个单元格编辑后立马提交保存、批量编辑已经选中的单元格后提交保存的实现。

排序有点乱了，随便记一下吧，
大概就是引入这三个文件，

首先引入x-editable相关的js、css文件：

<!-- 单元格编辑 bootstrap table editable --> 
<link href="<%=basePath%>static/bootstrapStatic/editable/css/bootstrap-editable.css" rel="stylesheet"> 
<script src="<%=basePath%>static/bootstrapStatic/editable/js/bootstrap-editable.js"></script> 
<script src="<%=basePath%>static/bootstrapStatic/editable/js/bootstrap-table-editable.js"></script>
<!-- 单元格编辑 bootstrap table editable -->

当然bootstrap的一些基础文件也要的吧，比如：

<script src="static/js/jquery-1.11.1.min.js"></script>

<script src="static/bs/js/bootstrap.min.js"></script>
反正俺也是个半吊子， 

然后变色的地方自己按要求改一下，比如url接口，data好像是直接拿了那一行的数据？因为我只改了一个备注列，下次可以试试是不是一行。。。，id应该是用了field : 'id'传到接口那边也用@RequestParam Integer id接一下，要改的列也这样。
看起来难，搞起来还是可以搞的，大概就这样吧。
 

 

其中bootstrap-editable.css、bootstrap-editable.js需要下载 x-editable开源项目 后在文件夹中找到。
bootstrap-table-editable.js文件自己创建，然后拷贝下面的源码：

/** * bootstrap-table-editable.js * @author zhixin wen <wenzhixin2010@gmail.com> * extensions:https://github.com/vitalets/x-editable */!function ($) {'use strict';$.extend($.fn.bootstrapTable.defaults, { editable:true, onEditableInit: function () { return false; }, onEditableSave: function (field, row, oldValue, $el) { return false; }, onEditableShown: function (field, row, $el, editable) { return false; }, onEditableHidden: function (field, row, $el, reason) { return false; }});$.extend($.fn.bootstrapTable.Constructor.EVENTS, { 'editable-init.bs.table':'onEditableInit', 'editable-save.bs.table': 'onEditableSave', 'editable-shown.bs.table': 'onEditableShown', 'editable-hidden.bs.table': 'onEditableHidden'});var BootstrapTable = $.fn.bootstrapTable.Constructor, _initTable = BootstrapTable.prototype.initTable, _initBody = BootstrapTable.prototype.initBody;BootstrapTable.prototype.initTable =function () { var that = this; _initTable.apply(this, Array.prototype.slice.apply(arguments)); if(!this.options.editable) { return; } $.each(this.columns, function (i, column) { if (!column.editable) { return; } var_formatter = column.formatter; column.formatter = function (value, row, index) { var result = _formatter ? _formatter(value, row, index) : value; return ['<a href="javascript:void(0)"', ' data-name="' + column.field + '"', ' data-pk="' + row[that.options.idField] + '"', ' data-value="' + result + '"', '>' + '</a>' ].join(''); }; });};BootstrapTable.prototype.initBody = function () { var that = this; _initBody.apply(this,Array.prototype.slice.apply(arguments)); if (!this.options.editable) { return; } $.each(this.columns, function (i, column) { if (!column.editable) { return; } that.$body.find('a[data-name="' + column.field +'"]').editable(column.editable) .off('save').on('save', function (e, params) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index], oldValue = row[column.field]; row[column.field] = params.submitValue; that.trigger('editable-save', column.field, row, oldValue, $(this)); }); that.$body.find('a[data-name="' + column.field + '"]').editable(column.editable) .off('shown').on('shown', function (e, editable) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index]; that.trigger('editable-shown', column.field, row, $(this), editable); }); that.$body.find('a[data-name="' + column.field +'"]').editable(column.editable) .off('hidden').on('hidden', function (e, reason) { var data = that.getData(), index = $(this).parents('tr[data-index]').data('index'), row = data[index]; that.trigger('editable-hidden', column.field, row, $(this), reason); }); }); this.trigger('editable-init');};}(jQuery);

正确引用js、css文件后，就可以去实现单元格编辑了。

1、单个单元格编辑马上ajax提交保存

<script type="text/javascript"> //查询参数
function queryParams(params) { return { limit : params.limit, offset : params.offset, nextPage : params.pageNumber,search : $('#search').val(), type : $('#type').val(), status : $('#status').val(), startTime : $('#startTime').val(),endTime : $('#endTime').val(), }; } $(function() { $('#dataGrid') .bootstrapTable( { url :'${prefix}/selectModelVoListPage', method : 'post', toolbar : '#toolbar', contentType : 'application/x-www-form-urlencoded', striped : true, showColumns : true, showRefresh : true, pagination : true, pageSize : 10, sortName : 'id',sidePagination : 'server', queryParamsType : 'limit', queryParams : queryParams, rowStyle: function (row, index) { //这里有5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (row.status == 0) { strclass = 'danger';//还有一个active } else if(row.status == 1) { strclass = 'active'; } else { return {}; } return {classes: strclass } },
onEditableSave: function (field, row, oldValue, $el) {//编辑单元格事件 $.ajax({ type : "POST", url :'appMenuGarden/editCell', data : row, dataType : 'json', cache : false, success : function(data) { if ("success" == data) { bootbox.alert("编辑成功");
$('#dataGrid').bootstrapTable('refresh'); } else { bootbox.alert(data); } }, error: function () { bootbox.alert('编辑失败'); }, complete: function () { } }); },
columns : [ { field : 'name', title : '功能名称', align : 'center', width : 100 }, { field : 'showName', title : '展示名称', align : 'center', width : 100, editable: { type: 'text', validate: function (value) { if ($.trim(value) == '') {return '展示名称不能为空!'; } } } }, { field : 'sortNo', title : '排序', align : 'center', width : 100, editable: { type:'text', validate: function (value) { if ($.trim(value) == '') { return '排序不能为空!'; } } } } ] }); });</script>

上面的代码可以实现单个表格的编辑，效果如图，输入内容后点击√确定后会触发onEditableSave方法执行ajax请求提交数据保存。

 

 

2、批量编辑已经选中行的单元格统一保存实现

<script type="text/javascript"> //查询参数 function queryParams(params) { return { limit : params.limit, offset : params.offset, nextPage : params.pageNumber, name : $('#name3').val(), type : "2", status : "1", gardenIds : $('#gardenIds').val(), }; } $(function() { $('#dataGrid').bootstrapTable({ url : 'appMenu/menuForSelect', method :'post', toolbar : '#toolbar', contentType : 'application/x-www-form-urlencoded', striped : true, /* pagination : true, */pageSize : 9999999, sidePagination : 'server', queryParamsType : 'limit', queryParams : queryParams, columns : [ {checkbox : true }, { field : 'name', title : '功能名称', width : 150 }, { field : 'showName', title : '展示名称', align :'center', width : 100, formatter : function(value, row, index) { if(typeof(value) == 'undefined'){ row.showName = row.name; return row.name; } else { return value; } }, editable: { type: 'text', validate: function (value) { if($.trim(value) == '') { return '展示名称不能为空!'; } } } }, { field : 'sortNo', title : '排序', align : 'center', width: 100, editable: { type: 'text', validate: function (value) { if ($.trim(value) == '') { return '排序不能为空!'; } } } } ] }); });</script><script type="text/javascript"> function addgardenMenus() { bootbox.confirm("是否添加所选中的选项？",function(result) { if (result) { var menuRows = ""; var rowList = $('#dataGrid').bootstrapTable('getSelections'); for(var i = 0; i < rowList.length; i++) { menuRows += rowList[i].id + "-" + rowList[i].showName + "-" + rowList[i].sortNo +","; } $.ajax({ type : "POST", url : 'appMenuGarden/addGardenMenus', data : { gardenIds : gardenIds, menuRows : menuRows, }, dataType : 'json', cache : false, success : function(data) { if ("success" == data) { bootbox.alert("添加成功"); top.Dialog.close(); } else { bootbox.alert("添加失败!"); top.Dialog.close(); } } }); } }); }</script>

上面的代码可实现对已经勾选的行单元格批量编辑好之后，统一提交保存。效果如图，对于勾选中的两行进行单元格编辑后，点击保存按钮触发我们定义的addgardenMenus()方法执行数据提交保存的操作。