在自定义编辑类型字段中添加多个输入元素 [英] Add multiple input elements in a custom edit type field

问题描述

是否可以创建具有多个输入元素的自定义字段?我正在咨询文档和创建单个输入元素非常简单，但是我不确定您将如何添加多个输入元素.

Is there a way to create a custom field that has multiple input elements? I'm consulting the documentation and creating a single input element is pretty straight forward, but I'm not exactly sure how you'd add more than one.

有人以前过过这座桥吗?如果是这样，您是怎么做到的?

Has anyone crossed this bridge before? If so, how did you do it?

以下是一些示例代码:

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

推荐答案

您可以使用jQuery创建多个输入元素.因此，如果您的字段是某人的全名，则可以使用以下

You can use jQuery to create multiple input elements. So if your field is for example a persons full name you can use following

{ 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属性的值).它显示了构建自定义编辑元素的主要概念.

It is of cause a raw code fragment and you should improve the layout of input elements (the value of size attribute for example). It shows the main concept of building of custom edit elements.

已更新:如果您使用自定义编辑，则使用参数很重要(请参见 jqgrid-设置edittype的custom_value:"custom" 以获得详细信息.

UPDATED: If you use custom editing it is important to use recreateForm: true parameter (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing). See jqgrid - Set the custom_value of edittype: 'custom' for details.

这篇关于在自定义编辑类型字段中添加多个输入元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！