可編輯的table插件 簡單用法理解

先看效果，就醬，點擊時顯示彈框，修改後保存輸入的值，固然還能夠換成下拉框，選項框等來代替輸入框，功能多樣，結合bootstarp會變得更美觀

git地址：https://vitalets.github.io/x-editable/index.html

第一步引包：<script src="/public/libs/assets/global/plugins/bootstrap-editable/bootstrap-editable/js/bootstrap-editable.js"

第二步：初始化

var FormEditable = function () {

    $.mockjaxSettings.responseTime = 500;

    var log = function (settings, response) {
        var s = [],
            str;
        s.push(settings.type.toUpperCase() + ' url = "' + settings.url + '"');
        for (var a in settings.data) {
            if (settings.data[a] && typeof settings.data[a] === 'object') {
                str = [];
                for (var j in settings.data[a]) {
                    str.push(j + ': "' + settings.data[a][j] + '"');
                }
                str = '{ ' + str.join(', ') + ' }';
            } else {
                str = '"' + settings.data[a] + '"';
            }
            s.push(a + ' = ' + str);
        }
        s.push('RESPONSE: status = ' + response.status);

        if (response.responseText) {
            if ($.isArray(response.responseText)) {
                s.push('[');
                $.each(response.responseText, function (i, v) {
                    s.push('{value: ' + v.value + ', text: "' + v.text + '"}');
                });
                s.push(']');
            } else {
                s.push($.trim(response.responseText));
            }
        }
        s.push('--------------------------------------\n');
        $('#console').val(s.join('\n') + $('#console').val());
    };

    var initAjaxMock = function () {
        //ajax mocks

        $.mockjax({
            url: '/post',
            response: function (settings) {
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/error',
            status: 400,
            statusText: 'Bad Request',
            response: function (settings) {
                this.responseText = '請輸入正確的值';
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/status',
            status: 500,
            response: function (settings) {
                this.responseText = 'Internal Server Error';
                log(settings, this);
            }
        });

        $.mockjax({
            url: '/groups',
            response: function (settings) {
                this.responseText = [{
                    value: 0,
                    text: 'Guest'
                }, {
                    value: 1,
                    text: 'Service'
                }, {
                    value: 2,
                    text: 'Customer'
                }, {
                    value: 3,
                    text: 'Operator'
                }, {
                    value: 4,
                    text: 'Support'
                }, {
                    value: 5,
                    text: 'Admin'
                }];
                log(settings, this);
            }
        });

    }

    var initEditables = function () {

        //set editable mode based on URL parameter
        if (App.getURLParameter('mode') == 'inline') {
            $.fn.editable.defaults.mode = 'inline';
            $('#inline').attr("checked", true);
        } else {
            $('#inline').attr("checked", false);
        }

        //global settings
        $.fn.editable.defaults.inputclass = 'form-control';
        $.fn.editable.defaults.url = '/post';

        $('.username').editable({
            url: '/post',
            type: 'text',
            pk: 1,
            name: 'username',
            title: '請輸入要修改的值',
            validate: function (value) {
                if ($.trim(value) == '') return '輸入不能爲空';
            },
            success: function (response, newValue) {

                var obj = {
                    tid: $(this).attr('tid'),
                    type: $(this).attr('type'),
                    fieldName: $(this).attr('fieldName'),
                    value: parseFloat(newValue),
                    cityCode: selCityCode
                };
                console.log(obj);
                if (response.status == 'error') {
                    return response.msg; //msg will be shown in editable form
                } else {
                    //調用個人接口函數
                }

            }
        });

    }

    return {
        init: function () {

            // inii ajax simulation
            initAjaxMock();

            // init editable elements
            initEditables();


        }

    };

}();

jQuery(document).ready(function () {    FormEditable.init();});//具體本身看代碼吧。。。