在自定義編輯類型字段中添加多個輸入元素

Question

有沒有辦法創建具有多個輸入元素的自定義字段？我正在諮詢documentation，創建單個輸入元素非常簡單，但我不確定如何添加多個元素。

有沒有人過過這座橋？如果是這樣，你是怎麼做到的？

下面是一些示例代碼：

... 
{name: 'Dimensions', index: 'Dimensions', hidden: true, editable: true, 
edittype: 'custom', editoptions: {custom_element: dimensionsElement, 
custom_value: dimensionsValue}, editrules: {edithidden: true}}, 
... 


function dimensionsElement(value, options) { 
    var el = document.createElement("input"); 
    el.type = "text"; 
    el.value = value; 
    return el; 
} 

function dimensionsValue(elem) { 
    return $(elem).val(); 
} 

Answer 1

您可以使用jQuery來創建多個輸入元素。所以，如果你的領域是例如一個人的全名，你可以使用以下

{ name: 'FullName', editable: true, edittype: 'custom', width: 300, 
    editoptions: { 
     custom_element: function(value, options) { 
      // split full name to the first and last name 
      var parts = value.split(' '); 
      // create a string with subelements 
      var elemStr = '<div><input id="'+options.id + 
         '_first" size="10" value="' + parts[0] + 
         '" /></br><input id="'+options.id + '_last' + 
         '"size="20" value="' + parts[1] + '" /></div>'; 
      // return DOM element from jQuery object 
      return $(elemStr)[0]; 
     }, 
     custom_value: function(elem) { 
      var inputs = $("input", $(elem)[0]); 
      var first = inputs[0].value; 
      var last = inputs[1].value; 
      return first + ' '+ last; 
     } 
    }}, 

這是事業的原始代碼片段，你應該提高input元素的佈局（size屬性例如值）。它顯示了自定義編輯元素構建的主要概念。

修訂：如果使用自定義編輯它使用recreateForm: true參數（見http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing）是很重要的。詳情請參閱jqgrid - Set the custom_value of edittype: 'custom'。