首页 > 其他 > 详细

bootstrap利用bootstrap-editable和bootstrap-table-editable对动态列编辑状态控制

时间:2019-10-11 20:06:30      阅读:370      评论:0      收藏:0      [点我收藏+]

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

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

 

技术分享图片

bootstrap利用bootstrap-editable和bootstrap-table-editable对动态列编辑状态控制

原文:https://www.cnblogs.com/wwwcf1982603555/p/11656118.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!