bootstrap表格 行编辑状态_bootstrap利用bootstrap-editable和bootstrap-table-editable对动态列编辑状态控制...

1、引入bootstrap-table-editable.js和bootstrap-editable.js

2、在列表字段属性加入下面代码(可编辑)

editable: {

type: 'select',

title: '评标意见',

disabled:true,

source: [{ value: "0", text: "请选择" },{ value: "1", text: "首选" }, { value: "2", text: "备选" }]

},

formatter : function(value,row, index) {

if(row.calibrationSet==1){

return 1;

}else if(value){

return value;

}else {

return 0;

}

}

3、保存(利用jqury对其事件进行监听并保存)

//监听段落行编辑进行保存

$("#bootstrap-table").on("editable-save.bs.table", function ( $el, field,row,oldValue) {

//保存编辑

$.ajax({

type: "post",

url: prefix+"/saveedit",

data: row,

dataType: 'JSON',

success: function (data, status) {

if (status == "success") {

alert('提交数据成功');

}

},

error: function () {

alert('编辑失败');

},

});

}

);

4、不可编辑的控制

在响应触发事件或者业务要求的条件下进行加载控制(不可在全部html页面渲染完成后才执行可以在其数据加载成功时进行控制)

eg:

onLoadSuccess: function (data) {

var data = $('#bootstrap-table').bootstrapTable('getData', true);

//查看页面对相关数据的隐藏和控制

if(leaseLeasorDemandinfo.operationstatus){

$("button:eq(0)").hide();

$("button:eq(2)").hide();

$("#zcrynames").prop({disabled: true});

//$('#bootstrap-table').editable('toggleDisabled', true);存在bug

$('#bootstrap-table a[data-name=pbyj].editable').editable('toggleDisabled');

*******备注：bootstrap-table为table的id，pbyj为字段的field

}

}

下面是我的微信公众号欢迎大家关注，互相认识交个朋友！！