我有一个用于输入城市的自定义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));
最佳答案
可能你有一个旧版本的x-editable。您可以在您使用的链接中找到版本,将其包含在< head>的文件。
只有1.1.1及更高版本支持showbuttons命令。
如果这不是问题,让我知道,我会看看还有什么我可以想出来的。
相关文章
转载注明原文:JavaScript – X可编辑的自定义字段类型不符合被覆盖的默认值 - 代码日志