17
Tôi có một loại đầu vào x-có thể chỉnh sửa tùy chỉnh để nhập một thành phố và chọn một quốc gia mà ám như vậy:
X-có thể chỉnh sửa tùy chỉnh kiểu trường không tôn trọng giá trị mặc định ghi đè
Chú ý các nút ở phía dưới; Đây là như vậy bởi vì mã khởi tạo chứa 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"}
]
});
Nhưng đối với widget này nó làm cho không có ý nghĩa để làm cho các nút ở bên cạnh; vì vậy tôi muốn các nút ở đó theo mặc định; Do đó tôi cố gắng thiết lập mặc định cho loại hình này có thể chỉnh sửa:
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: []
});
Nhưng chìa khóa showbuttons đang được bỏ qua; những người khác đang áp dụng tốt, nhưng không áp dụng điều này. Vậy làm cách nào tôi có thể đặt mặc định cho loại có thể chỉnh sửa?
Dưới đây là các mã có thể chỉnh sửa,
(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));
Tôi đã đi đến jsfiddle của bạn và tôi thấy các nút ở phía dưới. Đó không phải là hành vi mong muốn của bạn? –
bất kỳ liên kết jsfiddle nào? – bmscomp
Anh ấy đăng một cái nhưng nó là 404 nên tôi đã xóa nó. –