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

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

  • 相关阅读:
    ehcache memcache redis 三大缓存男高音
    tomcat启用压缩的方式
    Linux rpm 命令参数使用详解[介绍和应用]
    rpm常用命令及rpm参数介绍
    RPM 命令大全
    BZOJ2298: [HAOI2011]problem a(带权区间覆盖DP)
    BZOJ2037: [Sdoi2008]Sue的小球(区间DP)
    HDU3507 Print Article(斜率优化DP)
    线性代数学习笔记(几何版)
    HDU 2065 "红色病毒"问题(生成函数)
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/11656118.html
Copyright © 2011-2022 走看看