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

下面是我的微信公眾號歡迎大家關注,互相認識交個朋友!!

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM