X-editable 自定义字段类型不尊重覆盖的默认值

Posted 2023-05-08

【中文标题】X-editable 自定义字段类型不尊重覆盖的默认值

【英文标题】：X-editable custom field type not respecting overridden defaults

【发布时间】：2013-07-13 07:08:23

【问题描述】：

我有一个自定义 x 可编辑输入类型，用于输入城市并选择呈现如下所示的国家/地区：

注意底部的按钮；这是因为初始化代码包含showbuttons: 'bottom':

$('#location').editable(
    url: '/post',
    title: 'Enter city and country',
    showbuttons: 'bottom',
    value: 
        city: "Napier",
        country: "nz"
    ,
    sourceCountry: [
        value: "af", text: "Afghanistan",
        ...
        value: "zw", text: "Zimbabwe"
    ]
);

但是对于这个小部件来说，在侧面渲染按钮是没有意义的；所以我希望按钮默认在那里； 因此我尝试为这种可编辑类型设置默认值：

Location.defaults = $.extend(, $.fn.editabletypes.abstractinput.defaults, 
    tpl: '' +
        '<div class="editable-location">' +
        '<label><span>City: </span><input type="text" name="city"></label>' +
        '</div>' +
        '<div class="editable-location">' +
        '<label><span>Country: </span><select name="country"></select></label>' +
        '</div>',

    inputclass: '',
    showbuttons: 'bottom',
    sourceCountry: []
);

但是showbuttons 键被忽略了；其他人都很好，但不是这个。那么如何设置可编辑类型的默认值呢？

这是可编辑的代码，

(function ($) 
    "use strict";

    var Location = function (options) 
        this.sourceCountryData = options.sourceCountry;
        this.init('location', options, Location.defaults);
    ;

    //inherit from Abstract input
    $.fn.editableutils.inherit(Location, $.fn.editabletypes.abstractinput);

    $.extend(Location.prototype, 

        render: function () 
            this.$input = this.$tpl.find('input');
            this.$list = this.$tpl.find('select');

            this.$list.empty();

            var fillItems = function ($el, data) 
                if ($.isArray(data)) 
                    for (var i = 0; i < data.length; i++) 
                        if (data[i].children) 
                            $el.append(fillItems($('<optgroup>', 
                                label: data[i].text
                            ), data[i].children));
                         else 
                            $el.append($('<option>', 
                                value: data[i].value
                            ).text(data[i].text));
                        
                    
                
                return $el;
            ;

            fillItems(this.$list, this.sourceCountryData);


        ,

        value2html: function (value, element) 
            if (!value) 
                $(element).empty();
                return;
            
            var countryText = value.country;
            $.each(this.sourceCountryData, function (i, v) 
                if (v.value == countryText) 
                    countryText = v.text.toUpperCase();
                
            );
            var html = $('<div>').text(value.city).html() + ' / ' + $('<div>').text(countryText).html();
            $(element).html(html);
        ,

        html2value: function (html) 
            return null;
        ,

        value2str: function (value) 
            var str = '';
            if (value) 
                for (var k in value) 
                    str = str + k + ':' + value[k] + ';';
                
            
            return str;
        ,

        str2value: function (str) 
            return str;
        ,

        value2input: function (value) 
            if (!value) 
                return;
            
            this.$input.filter('[name="city"]').val(value.city);
            this.$list.val(value.country);
        ,

        input2value: function () 
            return 
                city: this.$input.filter('[name="city"]').val(),
                country: this.$list.val()
            ;
        ,

        activate: function () 
            this.$input.filter('[name="city"]').focus();
        ,

        autosubmit: function () 
            this.$input.keydown(function (e) 
                if (e.which === 13) 
                    $(this).closest('form').submit();
                
            );
        
    );

    Location.defaults = $.extend(, $.fn.editabletypes.abstractinput.defaults, 
        tpl: '' +
            '<div class="editable-location">' +
            '<label><span>City: </span><input type="text" name="city"></label>' +
            '</div>' +
            '<div class="editable-location">' +
            '<label><span>Country: </span><select name="country"></select></label>' +
            '</div>',

        inputclass: '',
        showbuttons: 'bottom', //WHY ISN'T THIS WORKING!!!
        sourceCountry: []
    );

    $.fn.editabletypes.location = Location;

(window.jQuery));

【问题讨论】：

我去了你的 jsfiddle，我看到了底部的按钮。这不是你想要的行为吗？

他发了一个，但它是 404，所以我删除了它。

确定一下，您使用的是 x-editable 1.1.1+ 版本吗？

【参考方案1】：

您可能有旧版本的 x-editable。您可以在用于将其包含在文档的 <head> 中的链接中找到版本。

只有 1.1.1 及更高版本支持 showbuttons 命令。

如果这不是问题，请告诉我，我会看看我还能解决什么问题。