我正在尝试使用选择下拉列表为 X-editable 创建自定义输入，该下拉列表将填充来自数据库的数据，我需要以某种方式将这些数据注入(inject)到我的自定义输入对象中。
因此，为了缩小问题范围，以下是我在通过 JQuery 加载页面后设置自定义对象的方法:
$('#myRecord').editable({
inputclass: 'input-large',
showbuttons: 'bottom',
value: {
height: 123,
width: 445,
length: 222,
name: jason hurley,
measurement_unit: centimetres,
weight: 230,
injected_units: ['centimetres', 'metres'] // this is dynamic
},
display: function(v) {
// Html here.
}
});
所以，基本上，我有一组测量单位需要传递给这个体重记录，以便当 X-Editable 加载编辑 UI 时，我可以为用户提供一个选择下拉列表来选择他们想要的选项。
问题是创建“可编辑”UI 的代码位于我的 input-ext 对象中，就像这里的默认示例一样:https://github.com/vitalets/x-editable/blob/master/src/inputs-ext/address/address.js
我要么需要一种方法来访问我传递到自定义输入对象内的值属性中的“injected_units”值，要么需要另一种方法来将值注入(inject)其中，以便我可以在默认 tpl 属性中使用它来呈现正确的选项对于我的下拉菜单。
有什么建议吗？
最佳答案
如果您使用 PHP 从数据库检索数据...
<?php
$unitOfMeasurement = array('centimetres', 'metres', 'millimeter');
?>
$('#myRecord').editable({
inputclass: 'input-large',
showbuttons: 'bottom',
value: {
height: 123,
width: 445,
length: 222,
name: jason hurley,
measurement_unit: centimetres,
weight: 230,
injected_units: [
<?php foreach ($unitOfMeasurement as $key=>$unit ) : ?>
<?php echo "'".$unit."'".((count($unitOfMeasurement) == $key + 1)? '' : ','); ?>
<?php endforeach; ?>
] // this is dynamic
},
display: function(v) {
// Html here.
}
});
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>X-editable starter template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- bootstrap -->
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- x-editable (bootstrap version) -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script>
$(function(){
var option = ['centimetres', 'metres'];
$('#record').editable({
inputclass: 'input-large',
showbuttons: 'bottom',
value: {
height: 123,
width: 500,
length: 222,
name: 'jason hurley',
measurement_unit: 'measurement',
weight: 230,
injected_units: option // this is dynamic
/*
or use php and create array in the server
injected_units: [
<?php $unitOfMeasurement = array('centimetres', 'metres', 'millimeter'); ?>
<?php foreach ($unitOfMeasurement as $key=>$unit ) : ?>
<?php echo "'".$unit."'".((count($unitOfMeasurement) == $key + 1)? '' : ','); ?>
<?php endforeach; ?>
] // this is dynamic
*/
},
display: function(v) {
// Html here.
}
});
});
(function ($) {
"use strict";
var Record = function (options) {
this.init('record', options, Record.defaults);
};
$.fn.editableutils.inherit(Record, $.fn.editabletypes.abstractinput);
$.extend(Record.prototype, {
render: function() {
this.$input = this.$tpl.find('input');
},
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="name"]').val(value.name);
var arrayOption = value.injected_units;
for(var i=0; i<arrayOption.length; i++){
$('#injected_units')
.append($("<option></option>")
.attr("value",arrayOption[i])
.text(arrayOption[i]));
}
},
input2value: function() {
return {
name: this.$input.filter('[name="name"]').val(),
injected_units: this.$input.filter('[name="injected_units"]').val(),
};
},
activate: function() {
this.$input.filter('[name="name"]').focus();
}
});
Record.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
tpl: '<div class="editable-record"><label><span>name: </span><input type="text" name="name" class="input-small"></label></div>'+
'<div class="editable-record"><label><span>Measurement unit: </span><select id="injected_units" type="text" name="injected_units" class="input-small"></select></label></div>',
inputclass: ''
});
$.fn.editabletypes.record = Record;
}(window.jQuery));
</script>
</head>
<body>
<div class="container">
<br />
<a href="#" id="record" data-type="record" data-pk="1">example</a>
</div>
</body>
</html>
基于: https://github.com/vitalets/x-editable/blob/master/src/inputs-ext/address/address.js
关于jquery - 带有注入(inject)数据和下拉菜单的 X-可编辑自定义输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28834849/