第4.1.3章 WEB系统最佳实践页面实例 表格编辑

基本配置在其他章节中说明，这里不赘述
bootstrap table的requirejs配置参考,bootstrap table配置参考
x-editable帮助文档,x-editable示例
先看图1的效果，下面是没有开始编辑时的样子

下面是开始编辑的样子

1 bootstrap table表格编辑全局配置是什么
这里采取的方式是在dom元素内部编辑，还是一种编辑方式是popup，就是弹出dialog的那种。

require('bootstrap_table_edit');
$.fn.editable.defaults.mode = 'inline'; // popup inline
$.fn.editable.defaults.emptytext = '待填写';

2 表格中列做了哪些独特的设置呢
从下面js可以看出凡是配置了editable的属性，就支持x-editable的编辑方式，简单说明一下。type表示编辑框的控件类型，默认的是text；disabled用于控制控制是否可编辑；showbuttons表示是否显示确认、取消按钮；source只有select类型才会有，是select控件的值，格式为{value:’’,text:’’}；validate用于校验的方法.

function initMainGrid(){
    	var isSign = $('#isSign').val();
    	mainGrid = $('#main-grid').bootstrapTable({
    		sidePagination:'server',cache:false,method:'post',url:ctx+'/fontalRunLogItems/find',queryParams:queryParams,contentType: 'application/x-www-form-urlencoded',
    		pagination:false,search:false,
    		toolbar:'#main-grid-tb',singleSelect:false,striped:true,clickToSelect:true,
    		columns:[
    			{field:'item',title:'项目名称',sortable:true,width:100,align: 'center',valign: 'middle'},  
    			{field:'detail',title:'检查内容',sortable:true,width:100,align: 'center',valign: 'middle'}, 
    			{field:'unit',title:'单位',sortable:true,width:100,align: 'center',valign: 'middle'},   
				{field:'checkResult',title:'检查结果',sortable:true,width:100,align: 'center',valign: 'middle',editable:{
					type:'select',disabled:!isSign,showbuttons:false,source:checkResultCombo.getXeditableData(),validate:function(v){if (!$.trim(v)) return '检测结果不能为空';}
				}}, 
				{field:'measureValue',title:'测量值',sortable:true,width:100,align: 'center',valign: 'middle',editable:{showbuttons:false,disabled:!isSign}}, 
				{field:'remark',showbuttons:false,title:'备注',sortable:true,width:100,align: 'center',valign: 'middle',editable:{type:'text',showbuttons:false,disabled:!isSign}},
				{field:'events',title:'操作',sortable:false,width:100,align: 'center',valign: 'middle',formatter:fmtEvents,events:mainEvents}
    		],
    		uniqueId:'id',sortName:'detail',height:500,
    		onEditableSave:function(field, row, oldValue, $el){
    			$el.parent().parent().find('.edit').show();
    		}
    	});
    }

3 表格编辑如何保存呢
当编辑结束就会调用下面的方式，每个控件结束都会调用，难道每个控件编辑后都要向后台提交吗。所以我根据这位通道做了一些改进JS组件系列——BootstrapTable 行内编辑解决方案：x-editable

onEditableSave:function(field, row, oldValue, $el){
    			$el.parent().parent().find('.edit').show();
    		}

4 如果让一行记录编辑完一次性提交
从下面的代码可以看出，我只要利用好onEditableSave方法，只要有编辑，那么就显示出保存按钮。最后用户通过保存按钮做实际的提交，就可以很好解决这个问题。
保存后控制保存按钮隐藏掉就可以。

{field:'events',title:'操作',sortable:false,width:100,align: 'center',valign: 'middle',formatter:fmtEvents,events:mainEvents}

function fmtEvents(){
    	var mainGridPermissions = [
           '<a class="edit btn btn-primary btn-sm ladda-button" data-style="expand-left" data-size="1" href="javascript:void(0)" title="保存" style="display:none;"><span class="ladda-label">保存</span></a>'
    	].join('');
    	return mainGridPermissions;
    }

/**
     * 初始化主表格的事件绑定
     */
    function initMainGridEvents(){
    	mainEvents = {
    		'click .edit':function(e,value,row,index){
    			var me = this;
            	save(me,row);
        	},
    	};
    }

function save(me,row){
    	//
    	row.runLogId = $('#filter_eqs_runLogId').val();
    	var process= Ladda.create($(me)[0]);
		process.start();
		//
		$.ajax({
			url:ctx+'/fontalRunLogItems/save',
			type:'post',
			data:row,
			success:function(resp){
				if (resp.success){
					$(me).hide();
				} else{
					layer.msg(resp.msg);
				}
			}
		}).always(function(){process.stop();});
    }