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

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

  • 相关阅读:
    算法学习:二分法从入门到精通
    TypeScript筑基笔记一:Visual Studio Code 创建Typescript文件和实时监控
    LeetCode 92. 反转链表 II
    LeetCode 1525. 字符串的好分割数目
    字节跳动-people后台一面面经
    LeetCode 117. 填充每个节点的下一个右侧节点指针 II
    LeetCode 1529. 灯泡开关 IV
    LeetCode 165. 比较版本号
    LeetCode 312. 戳气球
    LeetCode 605. 种花问题
  • 原文地址:https://www.cnblogs.com/wwwcf1982603555/p/11656118.html
Copyright © 2011-2022 走看看