bootstrap利用bootstrap-editable和bootstrap-table-editable对

发布时间：2020-12-17 21:19:07 所属栏目：安全来源：网络整理

导读：1、引入bootstrap-table-editable.js和bootstrap-editable.js 2、在列表字段属性加入下面代码（可编辑） editable: { type: ‘select‘,title: ‘评标意见‘,disabled:true,source: [{ value: "0",text: "请选择" },{ value: "1",text: "首选" },{ value: "2

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,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);
                }
　　}

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!