我正在尝试使用select下拉列表为X-editable创建一个自定义输入，其中将填充来自数据库的数据，而我需要以某种方式将这些数据注入到我的自定义输入对象中。
因此，为了缩小问题的范围，这是在通过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的代码位于我的inputs-ext对象中，就像此处的默认示例一样：https : //github.com/vitalets/x-editable/blob/master/src/inputs-ext/地址/address.js
我或者需要一种方法来访问传递到我的自定义输入对象内的values属性中的“ injected_units”值，或者需要一种将值注入其中的方法，以便可以在默认的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
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다