zoukankan      html  css  js  c++  java
  • 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
    
    
     }
      }

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

  • 相关阅读:
    9.11 eventbus
    9.10,,,实现new instanceof apply call 高阶函数,偏函数,柯里化
    9.9 promise实现 写完了传到gitee上面了,这里这个不完整
    9.5cors配置代码
    9.5 jsonp 实现
    9.5 http tcp https总结
    9.3 es6 class一部分 and es5 class 发布订阅
    8.30 cookie session token jwt
    8.30vue响应式原理
    warning: LF will be replaced by CRLF in renard-wx/project.config.json. The file will have its original line endings in your working directory
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/11656118.html
Copyright © 2011-2022 走看看