在自定义编辑类型字段中添加多个输入元素答案

【问题标题】：Add multiple input elements in a custom edit type field在自定义编辑类型字段中添加多个输入元素
【发布时间】：2011-03-04 13:05:44
【问题描述】：

有没有办法创建一个包含多个输入元素的自定义字段？我正在咨询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();
}

【问题讨论】：

标签： jqgrid editing

【解决方案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'。

【讨论】：