关于bootstrap table 的可编辑列表的实例

　　最近被安排到一个新的项目里，首先被分配了一个成果管理的模块，虽然是简单的增删改查，但是也费了不少功夫。

其中耽误最长的时间就是form中嵌套了两个可编辑列表的子表。废话不说上干货 = =

参考资料 1. http://bootstrap-table.wenzhixin.net.cn/documentation/ api

　　　　2. http://blog.csdn.net/lzxadsl/article/details/49181127

//2017.10.17补充相关版本的bootstrap及edit.js

链接: https://pan.baidu.com/s/1gflGSW7 密码: ef5a

20180913 更新链接

链接: https://pan.baidu.com/s/1vPdFzr3XL7QKkGGP5bk_aQ 密码: kq97

界面图：

jsp代码：

简单的一个按钮和一个普通的table

<div class="my_table_bar">

                    <div class="col-xs-10 bar_title">

                        <p align="center">

                            <strong>成果的知识产权情况</strong>

                        </p>

                    </div>

                    <div class="col-xs-2 bar_option">

                        <a class="insert" href="javascript:addRow(2);" title="新增行">

                            <i class="glyphicon glyphicon-plus" id="editTable_add_kjcg"></i>

                            新增

                        </a>

                    </div>

                </div>

                <table id="reportTable2" class="table table-bordered table-hover"></table>

js代码：

/*

 * @param 主表ID

 * 加载可编辑列表公共方法*/

function loadEditTable(pid){

    //重置table内数据

    $('#reportTable1').bootstrapTable('destroy');//这里必须要添加这个销毁，否则新增、修改、查看的切换可编辑列表中的数据可能加载出现问题。

    $('#reportTable2').bootstrapTable('destroy');

    $('#reportTable1').bootstrapTable({

        method: 'get',

        url:contextPath + '/cggl/getHJQKTable.do?code='+pid,

        editable:true,//开启编辑模式

        clickToSelect: true,

        cache : false,

        columns: [

            {field:"JX_NAME",title:"所获奖项明称",align:"center",edit:{required:true,type:'text' }},

            {field:"JX_ORG",title:"奖励单位",align:"center",edit:{type:'text' }},

            {field:"JX_TIME",title:"奖励年度",align:"center",edit:{type:'text' }},

            {field:"JX_RANK",title:"授奖等级",align:"center",edit:{type:'text' }},

            {field:"operate",title:"操作",align:"center",formatter : operateFormatter1,edit:false}

        ],

        onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发

            if(reason === 'save') {

                var $td = $el.closest('tr').children();

                $td.eq(-1).html((row.price*row.number).toFixed(2));

                $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动

            } else if(reason === 'nochange') {

                $el.closest('tr').next().find('.editable').editable('show');

            }

        },

        onEditableSave: function (field, row, oldValue, $el) {

              $table = $('#reportTable1').bootstrapTable({});

              $table.bootstrapTable('updateRow', {index: row.rowId, row: row});

        }

    });

    $('#reportTable2').bootstrapTable({

        method: 'get',

        url:contextPath + '/cggl/getZscqTable.do?code='+pid,

        editable:true,//开启编辑模式

        clickToSelect: true,

        cache : false,

        columns: [

            {field:"ZSCQ_XS",title:"知识产权形式",align:"center",edit:{required:true ,type:'text'}},

            {field:"ZSCQ_NAME",title:"所获知识产权项目名称",align:"center",edit:{type:'text'}},

            {field:"ZSCQ_CODE",title:"知识产权号",align:"center",edit:{type:'text'}},

            {field:"ZSCQ_TIME",title:"授权时间",align:"center",edit:{type:'text'}},

            {field:"operate",title:"操作",align:"center",formatter : operateFormatter2,edit:false}

        ],

        onEditableSave: function (field, row, oldValue, $el) {

              $table = $('#reportTable1').bootstrapTable({});

              $table.bootstrapTable('updateRow', {index: row.rowId, row: row});

        }

    });  

}

PS：上面提到的destroy方法，如果不加的话，很多时候可编辑列表都是直接调用的缓存中的数据。举个例子，就是我先打开新增，可编辑列表中是没有数据的，再打开修改的话，可编辑列表同样会没有数据，很奇怪，但是具体的原因我也没有找到，ajax 中 cache也已经设置成了false。头大

java代码：

其实我感觉后台是没必要贴的，但是想想我在查阅资料的时候，网上找的资料大多数不全，所以换位思考下，我就全贴出来了。

这里有一个点就是我先把主表保存了，返回了插入数据的ID，然后用这个ID作为外键，将子表数据新增。

其他的话，修改我是先删除ID关联的子表所有数据，然后再新增。（这里如果有更好的方法记得@我，谢谢大神）

    /**

     * 新增

     * 包括对成果获奖情况和知识产权情况的保存

     */

    @SuppressWarnings("rawtypes")

    @RequestMapping("/add.do")

    public void addToCggl() {

        HttpServletRequest request = getRequest();

        HttpServletResponse response = getResponse();

        try {

            // 全路径对象或者表名

            String className = request.getParameter(OBJECTID_PARAMETER).trim();

            //获取对应的子表数据

            String hjqk = request.getParameter("hjqk").trim();

            String zscq = request.getParameter("zscq").trim();

            // JDBC处理方式

            Map entityValue = assembleParameterMap(request.getParameterMap());

            entityValue.remove("objectId");

            //将子表数据移除

            entityValue.remove("hjqk");

            entityValue.remove("zscq");

            jdbcService.saveCommonObject(className, entityValue);

            String parentID = entityValue.get("ID").toString();

            //调用子表的保存方法

            saveEditTable(parentID,hjqk,zscq);

            String msg = MsgUtil.getI18NTipMessage(CoreTipDefine.ADDT_0001);

            commonResult(response, true, msg);

        } catch (Exception e) {

            e.printStackTrace();

            String msg = MsgUtil.getI18NExpMessage(e);

            commonResult(response, false, msg);

        }

    }

子表传过来的值是json字符串。下面就是在java中对json字符串的转换，因为字段不多，所以也没用Gson。

    List<Map<String, String>> list = new ArrayList<Map<String, String>>();

        List<Map<String, String>> list1 = new ArrayList<Map<String, String>>();

        // 首先把字符串转成 JSONArray 对象

        JSONArray json = JSONArray.fromObject(hjqk);

        JSONArray json1 = JSONArray.fromObject(zscq);

        if (json.size() > 0) {

            for (int i = 0; i < json.size(); i++) {

                JSONObject job = json.getJSONObject(i); // 遍历 jsonarray

                                                        // 数组，把每一个对象转成 json 对象

                Map<String, String> map = new HashMap<String, String>();

                // 得到 每个对象中的属性值

                map.put("CG_ID", code);

                map.put("JX_NAME", job.get("JX_NAME").toString());

                map.put("JX_ORG", job.get("JX_ORG").toString());

                map.put("JX_TIME", job.get("JX_TIME").toString());

                map.put("JX_RANK", job.get("JX_RANK").toString());

                map.put("id", UUIDGenerator.generateUUID());

                list.add(map);

            }

        }

最后是bootstrap-table-edit.js

/**

 * 可编辑表格插件

 * 如果编辑表格中有用到，下拉框和日期，必须先引入

 * bootstrap-select 和 bootstrap-datetimepicker两个控件

 * @author lizx <851697971@qq.com>

 * @version 1.0

 * @date 2015-10-13

 */

(function($){

    'use strict';

    $.extend($.fn.bootstrapTable.defaults, {

        editable: false

    });

    var BootstrapTable = $.fn.bootstrapTable.Constructor,

        _init = BootstrapTable.prototype.init,

        _initBody = BootstrapTable.prototype.initBody,

        _onSort = BootstrapTable.prototype.onSort,

        _append = BootstrapTable.prototype.append,

        _initHeader = BootstrapTable.prototype.initHeader ;

    //添加编辑表格默认属性,如何edit设置为false时，表示该列不可编辑

    $.extend(true,BootstrapTable.COLUMN_DEFAULTS,{

        edit:{

            type:'text'//目前只支持 文本:text 下拉:select 日期:date

        }

     });

    BootstrapTable.prototype.init = function () {

        _init.apply(this, Array.prototype.slice.apply(arguments));

        var that = this;

        that.prevEditRow = null;//上一次编辑的行

        that.columns = {};//列配置信息

        that.insertRowVal = {};//新插入行的默认值

        that.enableAppend = true;//允许添加新行

        if (that.options.editable) {

            var columnObj = this['getColumns']();

            $.each(columnObj,function(i,obj){

                $.each(obj,function(z,col){

                    if(!isNaN(col.fieldIndex) && col.fieldIndex >= 0){

                        if(col.checkbox)col.edit = false;

                        that.columns['column'+col.fieldIndex] = col;

                        that.insertRowVal[col.field] = '';

                    }

                });

            });

            //this.initEdit();

        }

    };

    /*BootstrapTable.prototype.initHeader = function(){

        _initHeader.apply(this, Array.prototype.slice.apply(arguments));

        this.$container.find('.fixed-table-header').addClass('success');

    };*/

    BootstrapTable.prototype.initBody = function () {

        var that = this;

        _initBody.apply(this, Array.prototype.slice.apply(arguments));

        if (!that.options.editable) return;

        this.initEdit();

        //如果列是下拉框，则转换值为对应的文本

        $.each(that.columns,function(indx,col){

            if(col.edit && col.edit.type == 'select'){

                col.edit = $.extend({},$.fn.bootstrapSelect.defaults,col.edit);

                if(col.edit.data.length > 0){

                    that.$body.find('>tr').each(function(){

                        if(that.getData().length < 1)return true;

                        var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据

                        var $td = $(this).find('td').eq(col.fieldIndex);

                        $.each(col.edit.data,function(i,data){

                            if(data[col.edit.valueField] == rowData[col.field]){

                                $td.html(data[col.edit.textField]);

                            }

                        });

                    });

                }

                else if(col.edit.url){

                    $.ajax({

                        url:col.edit.url,

                        type:'post',

                        data:col.edit.paramsType == 'json' ? JSON.stringify(col.edit.params) : col.edit.params,

                        dataType:'json',

                        success: function(jsonLst) {

                            col.edit.onLoadSuccess.call(this,jsonLst);

                            that.$body.find('>tr').each(function(){

                                if(that.getData().length < 1)return true;

                                var rowData = that.data[$(this).data('index')];//当前点击td所在行的数据

                                var $td = $(this).find('td').eq(col.fieldIndex);

                                $.each(jsonLst,function(i,data){

                                    if(data[col.edit.valueField] == rowData[col.field]){

                                        $td.html(data[col.edit.textField]);

                                    }

                                });

                            });

                            col.edit.data = jsonLst;

                            col.edit.url = null;

                        },

                        error: function(xhr, textStatus, errorThrown){

                            col.edit.onLoadError.call(this);

                            col.edit.data = [];

                            col.edit.url = null;

                            throw col.field+' 列下拉框数据加载失败';

                        }

                    });

                }

            }

        });

    };

    //根据行号删除指定行

    BootstrapTable.prototype.removeRow = function (rowNum) {

        var that = this;

        var len = that.options.data.length;

        if (isNaN(rowNum)){

            return;

        }

        if(that.$body.find('.editable-select').data('index') != rowNum){

            recover(that);

        }

        //删除数据

        that.options.data.splice(rowNum,1);

        if (len === that.options.data.length){

            return;

        }

        var oldClass = {};//保存被标记修改的样式

        that.$body.find('>tr').each(function(indx){

            if($(this).hasClass('editable-modify')){

                if(indx > rowNum){

                    oldClass[indx-1] = 'editable-modify';

                }

                else{

                    oldClass[indx] = 'editable-modify';

                }

            }

        });

        //this.prevEditRow = null;

        //this.$body.find('>tr').removeClass('editable-select');

        that.initBody();

        //将标记改变过行的样式从新设置回去

        for(var key in oldClass){

            that.$body.find('>tr').eq(key).addClass(oldClass[key]);

        }

        //this.initEdit();

        //没有数据时给提示加上样式

        if(that.getData().length < 1){

            that.$body.find('>tr').addClass('no-records-found');

        }

    };

    BootstrapTable.prototype.append = function (){

        var that = this;

        //if(!that.enableAppend)return;

        var oldClass = {};//保存被标记修改的样式

        that.$body.find('>tr').each(function(indx){

            if($(this).hasClass('editable-modify') || $(this).hasClass('editable-insert')){

                oldClass[indx] = 'editable-modify';

            }

        });

        arguments[0] = $.extend({},that.insertRowVal,arguments[0]);

        _append.apply(this,Array.prototype.slice.apply(arguments));

        if (that.options.editable){

            //that.initEdit();

            setTimeout(function (){

                //将标记改变过行的样式从新设置回去

                for(var key in oldClass){

                    that.$body.find('>tr').eq(key).addClass(oldClass[key]);

                }

                that.$body.find('>tr:last').addClass('editable-modify');

                that.$body.find('>tr:last').addClass('editable-insert');//双重保险，防止在快速点击添加时，为给新增行设置editable-modify属性

                that.$body.find('>tr:last').click();

            },60);

        }

    };

    BootstrapTable.prototype.onSort = function () {

        _onSort.apply(this, Array.prototype.slice.apply(arguments));

        var that = this;

        if (that.options.editable) {

            this.initEdit();

        }

    };

    BootstrapTable.prototype.getData = function () {

        return (this.searchText || this.searchCallback) ? this.data : this.options.data;

    };

    //获取全部的数据

    BootstrapTable.prototype.getAllData = function () {

        return this.options.data;

    };

    BootstrapTable.prototype.getColumns = function () {

        return this.options.columns;

    };

    /**

     * 获取有被修改过行的值

     */

    BootstrapTable.prototype.getModiDatas = function (){

        var that = this;

        var datas = [];

        that.$body.find('.editable-modify').each(function(){

            if(that.data[$(this).data('index')]){

                datas.push(that.data[$(this).data('index')]);

            }

        });

        return datas;

    };

    /**

     * 获取指定列的和，参数为列下标

     */

    BootstrapTable.prototype.getColTotal = function (num){

        var retVal = 0;

        this.$body.find('>tr').each(function(){

            var colNum = 0;

            if($(this).hasClass('editable-select')){

                colNum = $(this).find('td').eq(num).find('input').val();

            }

            else{

                colNum = $(this).find('td').eq(num).html();

            }

            if(!isNaN(colNum)){//是数字才做想加

                retVal += Number(colNum);

            }

        });

        return retVal;

    };

    /**

     * 创建可编辑表格

     */

    BootstrapTable.prototype.initEdit = function(){

        var that = this,

        data = this.getData();

        //this.$body.find('> tr').unbind('click').on('click'

        //this.$body.delegate('>tr','click'

        this.$body.find('> tr').unbind('click').on('click',function(){

            var $tr = $(this);

            if($tr.hasClass('editable-select') || data.length < 1 || $tr.hasClass('no-records-found')){

                return;

            }

            $tr.removeClass('no-records-found');

            recover(that);

            that.prevEditRow = $tr;

            $tr.addClass('editable-select');//给当前编辑行添加样式，目前样式为空只做标识使用

            that.$body.find('> tr').not(this).removeClass('editable-select');

            $tr.find('td').closest('td').siblings().html(function(i,html){

                initTrClick(that,this);

            });

        });

        //鼠标点击事件

        $(document).bind('mousedown',function(event){

            var $target = $(event.target);

            if(!($target.parents().andSelf().is(that.$body)) && !($target.parents().andSelf().is($('.datetimepicker')))){

                setTimeout(function () {

                    recover(that);

                    //that.prevEditRow = null;

                    //that.$body.find('> tr').removeClass('editable-select');

                },10);

            };

        });

    };

    $.fn.bootstrapTable.methods.push('getColumns',

        'getModiDatas','removeRow','getColTotal','getAllData');

    /**

     * 给tr添加点击事件

     */

    function initTrClick(that,_this){

        that.enableAppend = true;

        var $td = $(_this);

        var $tr = $td.parent();

        var rowData = that.data[$tr.data('index')];//当前点击td所在行的数据

        var tdIndex = $tr.children().index($td);//当前点击的td下标

        var tdOpt = that.columns['column'+tdIndex];

        if(rowData.IS_TYPING!="0"&&rowData.IS_TYPING!="2"){//判断接口取数方式

        if(!tdOpt.edit || typeof tdOpt.edit != 'object'){

            return ;

        }

        $td.data('field',tdOpt.field);

        if(!$td.data('oldVal')){

            $td.data('oldVal',$.trim(rowData[tdOpt.field]));

        }

        var height = $td.innerHeight() - 3;

        var width = $td.innerWidth() - 2;

        $td.data('style',$td.attr('style'));//保存原来的样式

        $td.attr('style','margin:0px;padding:1px!important;');

        var placeholder = '';

        if(tdOpt.edit.required == true){

            placeholder = '必填项';

        }

        var value = rowData[tdOpt.field] == null || rowData[tdOpt.field] == ''?'':rowData[tdOpt.field];

        $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;">'

                    +'<input type="text" placeholder="'+placeholder+'" value="'+value+'" style="margin-left: 0px; margin-right: 0px; padding-top: 1px; padding-bottom: 1px; width:100%;height:100%">'

                +'</div>');

        $td.width(width);

        var $input = $td.find('input');

        if(!tdOpt.edit.type || tdOpt.edit.type == 'text'){

            if(tdOpt.edit['click'] && typeof tdOpt.edit['click'] === 'function'){

                $input.unbind('click').bind('click',function(event){

                    tdOpt.edit['click'].call(this,event);

                });

            }

            if(tdOpt.edit['focus'] && typeof tdOpt.edit['focus'] === 'function'){

                $input.unbind('focus').bind('focus',function(event){

                    tdOpt.edit['focus'].call(this,event);

                });

            }

            $input.unbind('blur').on('blur',function(event){

                if(tdOpt.edit['blur'] && typeof tdOpt.edit['blur'] === 'function'){

                    tdOpt.edit['blur'].call(this,event);

                }

            });

            /*$input.unbind('keyup').on('keyup',function(event){

                debugger;

                var reg=new RegExp("/[^\d{1,}\.\-\d{1,}|\d{1,}]/g");

                if(!reg.test($input.val())){

                    $input.val($input.val().replace(/[^\d{1,}\.\-\d{1,}|\d{1,}]/g, ""));

                }

            });*/

        }

        else if(tdOpt.edit.type == 'select'){

            $input.bootstrapSelect(tdOpt.edit);

        }

        else if(tdOpt.edit.type == 'date'){

            $td.html('<div style="margin:0;padding:0;overflow:hidden;border:solid 0px red;height:'+(height)+'px;width:'+(width)+'px;" class="input-group date form_datetime" data-link-field="dtp_editable_input">'

                        +'<input class="form-control" type="text" value="'+value+'">'

                        +'<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>'

                    +'</div>'

                    +'<input type="hidden" id="dtp_editable_input" value="'+value+'"/>'

            );

            that.$body.find('.form_datetime').datetimepicker({

                weekStart: 1,

                todayBtn:  1,

                autoclose: 1,

                todayHighlight: 1,

                startView: 2,

                forceParse: 0,

                language:'zh-CN',

                format: 'yyyy-mm-dd hh:ii:ss',

                pickerPosition: 'bottom-left',

                showMeridian: 1

            });

        }

        }else{

            return;

        }

    }

    /**

     * 恢复tr，使之处于不可编辑状态

     */

    function recover(that){

        var isModi = false;//判断行值是否变动过

        if(that.prevEditRow != null){

            that.prevEditRow.find('td').closest('td').siblings().html(function(i,html){

                $(this).attr('style',$(this).data('style'));

                var textVal = $(this).find('input[type="text"]').val();

                var hiddenVal = $(this).find('input[type="hidden"]').val();

//                if(typeof $(this).find('input[type="text"]').bootstrapSelect('getText') != 'object'){

                if(typeof $(this).find('input[type="text"]') != 'object'){

                    $(this).find('input[type="text"]').bootstrapSelect('destroy');

                }

                if(textVal != undefined){

                    if($(this).data('oldVal') != (hiddenVal?hiddenVal:$.trim(textVal)) && $(this).data('field')) {

                        that.data[that.prevEditRow.data('index')][$(this).data('field')] = hiddenVal?hiddenVal:$.trim(textVal);

                        isModi = true;

                    }

                    if(that.columns['column'+i].edit.required == true){

                        if(textVal == null || textVal == ''){

                            that.enableAppend = false;

                            return '<span style="color:red;">必填项不能为空</span>';

                        }

                    }

                    return $.trim(textVal);

                }

            });

            //新值跟旧值不匹配证明被改过

            if(isModi || that.prevEditRow.hasClass('editable-insert')){

                that.prevEditRow.addClass('editable-modify');

            }

            else{

                that.prevEditRow.removeClass('editable-modify');

            }

            that.prevEditRow = null;

            that.$body.find('> tr').removeClass('editable-select');

        }

    }

})(jQuery);

2017/08/03

对新增，删除调用方法的补充

function operateFormatter1(value, row, index) {

    return [

      "<a class=\"remove\" href='javascript:removeRow("+index+",1)' title=\"删除改行\">",

      "<i class='glyphicon glyphicon-remove'></i>",

      "</a>     "

    ].join('');

  }

function operateFormatter2(value, row, index) {

    return [

      "<a class=\"remove\" href='javascript:removeRow("+index+",2)' title=\"删除改行\">",

      "<i class='glyphicon glyphicon-remove'></i>",

      "</a>     "

    ].join('');

  }

$('#reportTable1','#reportTable2').on( 'click', 'td:has(.editable)', function (e) {

    //e.preventDefault();

    e.stopPropagation(); // 阻止事件的冒泡行为

   $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态

} );

//可编辑列表新增一行

function addRow(mark){

    var rows = [];

    //通过mark来判断为哪个可编辑框创建新一行

    if(mark == 1){

         $('#reportTable1').bootstrapTable('append',rows);

    }else if(mark == 2){

        $('#reportTable2').bootstrapTable('append',rows);

    }

}

//删除指定行

function removeRow(deleteIndex,mark){

    if(mark == "1"){

        $('#reportTable1').bootstrapTable('removeRow', deleteIndex);

    }else if(mark == "2"){

        $('#reportTable2').bootstrapTable('removeRow', deleteIndex);

    }

}

好了，基本就是这些。

巴特西

关于bootstrap table 的可编辑列表的实例

最新文章

热门文章