BootStrap Table - Editable

需要引入文件

bootstrap-table-editable.js
bootstrap-editable.js
bootstrap-editable.css

注：如果页面有From+jquery.validate.js 表单验证，可能会引发 'settings' of undefined 的错误，此时 table 就不能放在From 中

1.非JS方式加载数据的表格编辑

            <table id="tabBypcsj"
                data-toggle="table"
                data-toolbar="#toolbar"
                data-toolbar-align="right"
                data-classes="table">
                <thead>
                    <tr>
                        <th data-field="MaterialName">材料名称</th>
                        <th data-field="NetWeight" data-type="text" data-editable="true">数量</th>
                        <th data-field="NetWeightDiff">差额</th>
                        <th data-field="MateriaPrice">单价</th>
                        <th data-field="MateriaAmount">金额</th>
                    </tr>
                </thead>
            </table>

$(document).ready(function () {
    var tabBypcsj = $("#tabBypcsj");
    tabBypcsj.on('editable-save.bs.table', function ($el, field, row, oldValue) {
        var num = row.NetWeight;
        var price = row.MateriaPrice;
        row["NetWeightDiff"] = $.WY.roundup(num - row.NetWeightOld, 3);
        row["MateriaAmount"] = $.WY.roundup(num * price, 3);
        tabBypcsj.bootstrapTable('updateRow', { index: row.rowId, row: row });
    });
});

2.非JS方式加载数据的表格下拉框自定义编辑

<table id="tabComplaints"
    data-toggle="table"
    data-height="666"
    data-pagination="true"
    data-page-size="10"
    data-show-footer="true"
    data-detail-view="true"
    data-detail-formatter="detailFormatter"
    data-click-to-select="true"
    data-classes="table table-no-bordered">
    <thead>
        <tr>
            <th data-field="Project" data-sortable="true">项目名称</th>
            <th data-field="ComplaintsType" data-sortable="true" data-formatter="typeFormatter">投诉分类</th>
            <th data-field="Content" data-sortable="true">投诉内容</th>
            <th data-field="UserName" data-sortable="true">投诉人</th>
            <th data-field="CreateTime" data-sortable="true">投诉时间</th>
            <th data-field="ComplaintsState" data-sortable="true">处理状态</th>
            <th data-field="ID" data-visible="false">ID</th>
            <th data-field="ComplaintsTypeID" data-visible="false">ComplaintsTypeID</th>
        </tr>
    </thead>
</table>

View Code

function typeFormatter(value, row, index) {
    var text = row.ComplaintsType;
    if (text == "") {
        text = "一般投诉";
    }
    return '<a href="#" data-type="select" data-title="修改投诉分类" data-IID="' + row.ID + '" data-text="' + text + '" data-value="' + row.ComplaintsTypeID + '">' + text + '</a>';
}

function initEdit() {
    $.each($("#tabComplaints a[data-type='select']"), function (i, item) {
        $(item).editable({
            type: 'select',
            title: $(item).attr("data-text"),
            source: function () {
                var result = [];
                $.WY.ajaxHandleSync("/Business/CustomerComplaints/CustomerComplaints/GetComplaintsTypes", {}, function (rlt) {
                    if (rlt.isSuccess) {
                        var model = rlt.model;
                        $.each(model, function (i, item) {
                            result.push({ value: item.Value, text: item.Text });
                        });
                    }
                    else {
                        alert(rlt.errorMesg);
                    }
                });
                return result;
            },
            validate: function (value) {
                if (!$.trim(value)) {
                    return '不能为空';
                }
            },
            showbuttons: true,
            success: function (response, newValue) {
                var iid = $(item).attr("data-IID");
                var data = {
                    customerComplaintsId: iid,
                    complaintsType: newValue,
                };
                jQuery.WY.ajaxHandle("/Business/CustomerComplaints/CustomerComplaints/UpdateComplaintsType", data, function (rlt) {
                    if (rlt.isSuccess) {
                    }
                    else {
                        alert(rlt.errorMesg);
                    }
                });

            }
        });

    });
}

View Code

BootStrap Table - Editable

推荐阅读