Jeditable 和“选择”字段问题 - 从客户端动态访问和更新 JSON 数据答案

【问题标题】：Jeditable and issue with "select" fields - access & update JSON data dynamically from client sideJeditable 和“选择”字段问题 - 从客户端动态访问和更新 JSON 数据
【发布时间】：2011-05-09 03:14:29
【问题描述】：

我在 Zend 中使用 Jeditable。

大部分更新，我想使用 Jeditable。因此，页面显示信息，并且每个字段都可以使用 Jeditable 进行编辑。非常适用于“文本”字段。

这是问题 --- 它带有下拉列表我有美国州下拉列表。 Jeditable show 是正确的，但是由于它是一个 ajax 请求，所以会出现两个具体问题

1) 它将值显示为 ID，而不是名称。我想，我可以从服务器响应发送名称而不是 ID 来处理它，但我想在客户端这样做

2) 编辑后它会丢失“选定”元素。理想情况下，它需要刷新“选定”元素，因为它已更改。如果我刷新页面，那会很好，因为这将是新的请求，但我不喜欢这样做。这就是 Ajax 的全部理念 :-)

理想情况下，我想拦截来自服务器的响应并希望访问下拉列表（JSON 数据）并显示状态 ID 的标签并动态更改 Json 数据以更改下拉列表的选定值。

那么如何从 Jeditable 在客户端访问和操作 Json 数据

这是我的代码 sn-p

$('.edit_state').editable('/User/user/updprofile',
{  id   : 'element_id',
       name : 'new_value',  
   data   : '<?php  echo json_encode(array_merge($this->aStateIdOptions, array("selected" => $this->user->state_id))); ?>',
   type   : 'select',
   submit : 'OK',
   indicator :  '<img width=14px height=14px src="/images/ui/ajax-spinner.gif">',
     style     : 'border: 0px',
    onerror: function(settings, original, xhr) {
    original.reset()
    alert(xhr.responseText)
    },
   intercept: function (jsondata) {
     obj = jQuery.parseJSON(jsondata);
     alert(obj);
     //alert(data);
     // do something 
     return(obj);
     },
   callback : function(value, settings) {
     console.log(this);
     alert(this);
     console.log(value);
     alert(value);
     console.log(settings);
     alert(settings);
     }    

});

【问题讨论】：

标签： jquery json jeditable

【解决方案1】：

我检查了 jEditable 源代码，据我所知，基于源代码，有代码可以设置选项的值。

var option = $('<option />').val(key).append(json[key]);

我认为您需要发送 [CA:California,...] 之类的信息。但是，选项元素的选定属性有一个代码。

/* Loop option again to set selected. IE needed this... */ 
$('select', this).children().each(function() {
    if ($(this).val() == json['selected'] || 
        $(this).text() == $.trim(original.revert)) {
            $(this).attr('selected', 'selected');
    }
});

我认为您需要发送类似 [{CA:California, selected:selected}, {TX:Texas, selected:null} OR {TX:Texas}, ...] 源代码

select: {
    element : function(settings, original) {
        var select = $('<select />');
        $(this).append(select);
        return(select);
    },
    content : function(data, settings, original) {
        /* If it is string assume it is json. */
        if (String == data.constructor) {      
            eval ('var json = ' + data);
        } else {
        /* Otherwise assume it is a hash already. */
            var json = data;
        }
        for (var key in json) {
            if (!json.hasOwnProperty(key)) {
                continue;
            }
            if ('selected' == key) {
                continue;
            } 
            var option = $('<option />').val(key).append(json[key]);
            $('select', this).append(option);    
        }                    
        /* Loop option again to set selected. IE needed this... */ 
        $('select', this).children().each(function() {
            if ($(this).val() == json['selected'] || 
                $(this).text() == $.trim(original.revert)) {
                    $(this).attr('selected', 'selected');
            }
        });
    }
}

【讨论】：