Jeditable的多種選擇類型 - In Place Editor插件

Question

我在我的項目中使用jeditable，我可以動態更新大量不同類型的內容：text，textarea和select。

我需要一個新的類型來滿足我的一個需求：可以稱爲「selectmulti」的多選類型。

編輯字段時，鍵入「selectmulti」，出現一個選擇列表，允許用戶選擇多個選項。保存會返回一個數組，並且update.php會將這個數組存儲在我的數據庫中。

例：

<div class='border'> 
    <span class='title'>Language: </span> 
    <span class='editableLang' id='contact_language'> 
    ".$row['contact_language']." 
    </span> 
</div> 

以及JavaScript函數：

$('.editableLang').editable('update.php', { 
     data  : '<?php print json_encode($tab_lang); ?>', 
     id   : 'cellid', 
     name  : 'cellvalue', 
     event  : 'dblclick', 
     tooltip  : 'Double click to edit...', 
     submitdata : {id: "<?php echo $id_contact; ?>"}, 
     type  : 'selectmulti', 
     style  : 'display: inline', 
     submit  : 'Save', 
     cancel  : 'Cancel' 
    }); 

我只是無法弄清楚如何獲得不同的值在數組（在我的情況「cellvalue」會該數組）並將其保存在數據庫中。

任何幫助或建議將不勝感激！

乾杯

Answer 1

如果有興趣的人，我的解決辦法是jsbin：http://jsbin.com/ixuye4/edit

Answer 2

這爲我工作！

$.editable.addInputType("multiselect", { 
    element: function (settings, original) { 
     var select = $('<select multiple="multiple" />'); 

     if (settings.width != 'none') { select.width(settings.width); } 
     if (settings.size) { select.attr('size', settings.size); } 

     $(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); 
     } 

     if ($(this).val() == json['selected'] || 
          $(this).html() == $.trim(original.revert)) { 
      $(this).attr('selected', 'selected'); 
     } 

     /* Loop option again to set selected. IE needed this... */ 
     $('select', this).children().each(function() { 
      if (json.selected) { 
       var option = $(this); 
       $.each(json.selected, function (index, value) { 
        if (option.val() == value) { 
         option.attr('selected', 'selected'); 
        } 
       }); 
      } else { 
       if (original.revert.indexOf($(this).html()) != -1) 
        $(this).attr('selected', 'selected'); 
      } 
     }); 
    } 
}); 

$('.editable').editable('http://www.example.com/save.php', { 
data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}", 
type : 'select', 
submit : 'OK' 
}); 

http://pastebin.com/tZwHMHQD

Answer 3

只是一個修正。這工作，但 - 顯然 - 你必須使用「多選」作爲參數「類型」，當你調用編輯，而不是「選擇」的價值：

$('.editable').editable('http://www.example.com/save.php', { 
data : " {'E':'Letter E','F':'Letter F','G':'Letter G', 'selected':'F'}", 
type : 'multiselect', 
submit : 'OK' 
}); 

Answer 4

如果有人碰巧在尋找一種快速和骯髒的解決方案：

$.editable.addInputType('multi', { 
    element : function(settings, original) { 
     var select = $('<select multiple="multiple" />'); 

     if (settings.width != 'none') { select.width(settings.width); } 
     if (settings.size) { select.attr('size', settings.size); } 

     $(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); 

     } 

    } 
});