第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();});    }