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
}
}
下面是我的微信公众号欢迎大家关注,互相认识交个朋友!!
春有百花秋有月,夏有凉风冬有雪!