bootstrapTable内部编辑学习笔记

bootstrapTable内部编辑学习笔记

$(function () {
        var options = {
            url: prefix2 + "/list",
            id: "bootstrap-table—input",
            modalName: "经营参数",
            updateUrl: prefix2 + "/edit/{id}",
            removeUrl: prefix2 + "/remove",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showPageGo: true,
            pagination: false,
            columns: [
                {
                    field: 'id',
                    title: '序号',
                    visible: false
                },
                {
                    field: 'amountAssets',
                    title: '上一年净资产数额(万元)',
                    titleTooltip: "即开始实施股权激励的上一年,例如:今年做方案,明年1月1日起实施,则“上一年”就是指今年。",
                    // editable: true
                },
                {
                    field: 'operatingIncome',
                    title: '上一年营业收入(万元含税)',
                    titleTooltip: '指税后利润。',
                    // editable: true
                },
                {
                    field: 'netprofit',
                    title: '上一年净利润(万元)',
                    // editable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        // actions.push('<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
            ,
            /**
             * @param {点击列的 field 名称} field
             * @param {点击列的 value 值} value
             * @param {点击列的整行数据} row
             * @param {td 元素} $element
             */
            onClickCell: function (field, value, row, $element) {
                $element.attr('contenteditable', true);
                $element.blur(function () {
                    let index = $element.parent().data('index');
                    let tdValue = $element.html();
                    saveData(index, field, tdValue);
                })
            }
        };

        /**
         * 保存
         * @param index
         * @param field
         * @param value
         */
        function saveData(index, field, value) {
            $table.bootstrapTable('updateCell', {
                index: index,       //行索引
                field: field,       //列名
                value: value        //cell值
            });
            $.ajax({
                type: "post",
                url: prefix2 + "/saveAlltwo",
                data: JSON.stringify($table.bootstrapTable('getData')),
                contentType: 'application/json',
                success: function (result) {
                    if (typeof callback == "function") {
                        callback(result);
                    }
                    $.operate.successCallback(result);
                }
            })
        }

        $.table.init(options);
    });

第二种方法:

bootstrapTable内部编辑学习笔记

 showColumns: false,
            onEditableSave: onEditableSave,
            columns: [
                {
                    field: 'id',
                    title: '序号',
                    visible: false
                },
                {
                    field: 'amountAssets',
                    title: '上一年净资产数额(万元)',
                    editable: true,
                    editable : {
                        type : 'text',
                        title : '上一年净资产数额',
                        emptytext : "【名称】为空",
                        validate : function(value) {
                            if (value.length > 30) {
                                return '名称不能超过30个字符';
                            }
                            if (value.length == 0) {
                                return '名称不能为空';
                            }
                        }
                    }
                },
                {
                    field: 'profityear',
                    title: '上一年本年利润(万元)',
                    editable: true
                },

                                function onEditableSave(field, row, oldValue, $el) {
        //"字段名:" + field +
        $.modal.alertSuccess("当前值:" + row[field] + ",旧值:" + oldValue);
        $.ajax({
            type: "POST",
            url: prefix2 + '/edit',
            data: row,
            dataType: 'json',
            cache: false,
            success: function (data) {
                if ("success" == data) {
                    bootbox.alert("编辑成功");
                    $('#dataGrid').bootstrapTable('refresh');
                } else {
                    bootbox.alert(data);
                }
            },
            error: function () {
                bootbox.alert('编辑失败');
            },
            complete: function () {

            }
        });

    }
上一篇:bootstraptable进行增删操作后,getSelections出现问题的解决方案


下一篇:bootstraptable通过数据属性或javascript以表格格式显示数据