关于bootstraptable的可编辑列表的实例
最近被安排到⼀个新的项⽬⾥，⾸先被分配了⼀个成果管理的模块，虽然是简单的增删改查，但是也费了不少功夫。其中耽误最长的时间就是form中嵌套了两个可编辑列表的⼦表。废话不说上⼲货 = =
//2017.10.17补充相关版本的bootstrap及edit.js
20180913 更新链接
界⾯图：
jsp代码：
简单的⼀个按钮和⼀个普通的table
<div class="my_table_bar">
<div class="col-xs-10 bar_title">
<p align="center">
<strong>成果的知识产权情况</strong>
</p>
</div>
<div class="col-xs-2 bar_option">
<a class="insert" href="javascript:addRow(2);" title="新增⾏">
<i class="glyphicon glyphicon-plus" id="editTable_add_kjcg"></i>
新增
</a>
</div>
</div>
<table id="reportTable2" class="table table-bordered table-hover"></table>
js代码：
/*
* @param 主表ID
* 加载可编辑列表公共⽅法*/
function loadEditTable(pid){
//重置table内数据
$('#reportTable1').bootstrapTable('destroy');//这⾥必须要添加这个销毁，否则新增、修改、查看的切换可编辑列表中的数据可能加载出现问题。
$('#reportTable2').bootstrapTable('destroy');
$('#reportTable1').bootstrapTable({
method: 'get',
url:contextPath + '/cggl/getHJQKTable.do?code='+pid,
editable:true,//开启编辑模式
clickToSelect: true,
cache : false,
columns: [
{field:"JX_NAME",title:"所获奖项明称",align:"center",edit:{required:true,type:'text' }},
{field:"JX_ORG",title:"奖励单位",align:"center",edit:{type:'text' }},
{field:"JX_TIME",title:"奖励年度",align:"center",edit:{type:'text' }},
{field:"JX_RANK",title:"授奖等级",align:"center",edit:{type:'text' }},
{field:"operate",title:"操作",align:"center",formatter : operateFormatter1,edit:false}
],
onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
if(reason === 'save') {
var $td = $el.closest('tr').children();
$td.eq(-1).html((row.price*row.number).toFixed(2));
$el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下⼀⾏移动
} else if(reason === 'nochange') {
$el.closest('tr').next().find('.editable').editable('show');
}
},
onEditableSave: function (field, row, oldValue, $el) {
$table = $('#reportTable1').bootstrapTable({});
$table.bootstrapTable('updateRow', {index: wId, row: row});
}
});
$('#reportTable2').bootstrapTable({
method: 'get',
url:contextPath + '/cggl/getZscqTable.do?code='+pid,
editable:true,//开启编辑模式
clickToSelect: true,
cache : false,
columns: [
{field:"ZSCQ_XS",title:"知识产权形式",align:"center",edit:{required:true ,type:'text'}},
{field:"ZSCQ_NAME",title:"所获知识产权项⽬名称",align:"center",edit:{type:'text'}},
{field:"ZSCQ_CODE",title:"知识产权号",align:"center",edit:{type:'text'}},
{field:"ZSCQ_TIME",title:"授权时间",align:"center",edit:{type:'text'}},
{field:"operate",title:"操作",align:"center",formatter : operateFormatter2,edit:false}
],
onEditableSave: function (field, row, oldValue, $el) {
$table = $('#reportTable1').bootstrapTable({});
$table.bootstrapTable('updateRow', {index: wId, row: row});
}
});
}
PS：上⾯提到的destroy⽅法，如果不加的话，很多时候可编辑列表都是直接调⽤的缓存中的数据。举个例⼦，就是我先打开新增，可编辑列表中是没有数据的，再打开修改的话，可编辑列表同样会没有数据，很奇怪，但是具体的原因我也没有到，ajax 中 cache也已经设置成了false。头⼤
java代码：
其实我感觉后台是没必要贴的，但是想想我在查阅资料的时候，⽹上的资料⼤多数不全，所以换位思考下，我就全贴出来了。这⾥有⼀个点就是我先把主表保存了，返回了插⼊数据的ID，然后⽤这个ID作为外键，将⼦表数据新增。
其他的话，修改我是先删除ID关联的⼦表所有数据，然后再新增。（这⾥如果有更好的⽅法记得@我，谢谢⼤神）
/**
* 新增
* 包括对成果获奖情况和知识产权情况的保存
*/
@SuppressWarnings("rawtypes")
@RequestMapping("/add.do")
public void addToCggl() {
HttpServletRequest request = getRequest();
HttpServletResponse response = getResponse();
try {
// 全路径对象或者表名
String className = Parameter(OBJECTID_PARAMETER).trim();
//获取对应的⼦表数据
String hjqk = Parameter("hjqk").trim();
String zscq = Parameter("zscq").trim();
// JDBC处理⽅式
Map entityValue = ParameterMap());
//将⼦表数据移除
jdbcService.saveCommonObject(className, entityValue);
String parentID = ("ID").toString();
//调⽤⼦表的保存⽅法
saveEditTable(parentID,hjqk,zscq);
String msg = I18NTipMessage(CoreTipDefine.ADDT_0001);
commonResult(response, true, msg);
} catch (Exception e) {
e.printStackTrace();
bootstrap项目String msg = I18NExpMessage(e);
commonResult(response, false, msg);
}
}
⼦表传过来的值是json字符串。下⾯就是在java中对json字符串的转换，因为字段不多，所以也没⽤Gson。
List<Map<String, String>> list = new ArrayList<Map<String, String>>();
List<Map<String, String>> list1 = new ArrayList<Map<String, String>>();
// ⾸先把字符串转成 JSONArray 对象
JSONArray json = JSONArray.fromObject(hjqk);
JSONArray json1 = JSONArray.fromObject(zscq);
if (json.size() > 0) {
for (int i = 0; i < json.size(); i++) {
JSONObject job = JSONObject(i); // 遍历 jsonarray
// 数组，把每⼀个对象转成 json 对象
Map<String, String> map = new HashMap<String, String>();
// 得到每个对象中的属性值
map.put("CG_ID", code);
map.put("JX_NAME", ("JX_NAME").toString());
map.put("JX_ORG", ("JX_ORG").toString());
map.put("JX_TIME", ("JX_TIME").toString());
map.put("JX_RANK", ("JX_RANK").toString());
map.put("id", ateUUID());
list.add(map);
}
}
最后是bootstrap-table-edit.js
/
**
* 可编辑表格插件
* 如果编辑表格中有⽤到，下拉框和⽇期，必须先引⼊
* bootstrap-select 和 bootstrap-datetimepicker两个控件
* @author lizx <851697971@qq>
* @version 1.0
* @date 2015-10-13
*/
(function($){
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
editable: false
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_init = BootstrapTable.prototype.init,
_initBody = BootstrapTable.prototype.initBody,
_onSort = Sort,
_append = BootstrapTable.prototype.append,
_initHeader = BootstrapTable.prototype.initHeader ;
//添加编辑表格默认属性，如何edit设置为false时，表⽰该列不可编辑
$.extend(true,BootstrapTable.COLUMN_DEFAULTS,{
edit:{
type:'text'//⽬前只⽀持⽂本:text 下拉:select ⽇期:date
}
});
BootstrapTable.prototype.init = function () {
_init.apply(this, Array.prototype.slice.apply(arguments));
var that = this;
that.prevEditRow = null;//上⼀次编辑的⾏
that.insertRowVal = {};//新插⼊⾏的默认值
if (that.options.editable) {
var columnObj = this['getColumns']();
$.each(columnObj,function(i,obj){
$.each(obj,function(z,col){
if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){
if(col.checkbox)col.edit = false;
that.insertRowVal[col.field] = '';
}
});
});
//this.initEdit();
}
};
/*BootstrapTable.prototype.initHeader = function(){
_initHeader.apply(this, Array.prototype.slice.apply(arguments));
this.$container.find('.fixed-table-header').addClass('success');
};*/
BootstrapTable.prototype.initBody = function () {
var that = this;
_initBody.apply(this, Array.prototype.slice.apply(arguments));
if (!that.options.editable) return;
this.initEdit();
/
/如果列是下拉框，则转换值为对应的⽂本
$.lumns,function(indx,col){
if(col.edit && pe == 'select'){
col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit);
if(col.edit.data.length > 0){
that.$body.find('>tr').each(function(){
Data().length < 1)return true;
var rowData = that.data[$(this).data('index')];//当前点击td所在⾏的数据
var $td = $(this).find('td').eq(col.fieldIndex);
$.each(col.edit.data,function(i,data){
if(data[col.edit.valueField] == rowData[col.field]){
$td.html(data[Field]);
}
});
});
}
else if(col.edit.url){
$.ajax({
url:col.edit.url,
type:'post',
data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params, dataType:'json',
success: function(jsonLst) {
LoadSuccess.call(this,jsonLst);
that.$body.find('>tr').each(function(){
Data().length < 1)return true;
var rowData = that.data[$(this).data('index')];//当前点击td所在⾏的数据
var $td = $(this).find('td').eq(col.fieldIndex);
$.each(jsonLst,function(i,data){
if(data[col.edit.valueField] == rowData[col.field]){
$td.html(data[Field]);
}
});
});
col.edit.data = jsonLst;
col.edit.url = null;
},
error: function(xhr, textStatus, errorThrown){
LoadError.call(this);
col.edit.data = [];
col.edit.url = null;
throw col.field+' 列下拉框数据加载失败';
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论