Question

我正在尝试使用选择下拉列表为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时，我可以给用户一个选择下拉列表来选择他们想要的选项。 / p>

问题在于，创建“可编辑”UI的代码位于我的input-ext对象中，就像这里的默认示例一样：https://github.com/vitalets/x-editable/blob/master/src/inputs-ext/address/address.js

我要么需要一种方法来访问我传入我的自定义输入对象里面的我的values属性的“inject_units”值或另一种向其中注入值的方法，所以我可以在我的defaults tpl属性中使用它来呈现正确的选项我的下拉菜单。

有什么建议吗？

Answer 1

如果您使用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

http://vitalets.github.io/x-editable/docs.html

具有注入数据和下拉列表的X可编辑自定义输入

1 个答案: