拆分为 JQGrid 中单列的多个文本框

Question

我在 MVC 应用程序中使用 JQgrid。我得到了这样的要求，一列应该在添加向导中分成 3 个文本框。默认情况下，它是一个文本框。 让我知道任何相同的解决方案。

我需要在 3 个文本框中输入邮政编码，保存时我需要合并所有内容并添加到单个字段 这是代码：

var mydata = [{
    zip : "23-12-13",
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
zip : "23-12-13",
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
zip : "23-12-13",
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
zip : "23-12-13",
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ['Zip/Postal',"Name", "Country", "Continent"],
    colModel: [
        {name:'Zip/Postal',index:'zip', editable: true,},
    {
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    pager: '#pager',
    'cellEdit': true,
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray',
 pager: "#jqGridPager",
            loadComplete: function () {
 }
        }).navGrid('#jqGridPager',
            // the buttons to appear on the toolbar of the grid
            { Add  : true },
 {
                url: '@Url.Action("Add", "Add")',
                height: 'auto',
        modal: true,
                addCaption: "Add: ",
                closeAfterAdd: false,
                recreateForm: true,
                beforeShowForm: function () {

}
        afterShowForm:function () {

}

Answer 1

更新：

我更改了代码以显示模式而不是内联编辑。

    <table id="grid">
</table>
<div id="customDialog" title="Custom Dialog" style="display: none;">
  <p>
  <label for="zipField1">Zip1:</label>
    <input id="zipField1" />
  </p>
   <p>
   <label for="zipField2">Zip2:</label>
    <input id="zipField2" />
   </p>
    <p>
     <label for="zipField3">Zip3:</label>
    <input id="zipField3" />
    </p>
   <p>
    <label for="Name">Name:</label>
    <input id="Name" />
   </p>
   <p>
   <label for="country">Country:</label>
    <input id="country" />
   </p>
   <p>
    <label for="continent">Continent:</label>
    <input id="continent" />
   </p> 
   <p>
   <button>
   Submit
   </button>
   </p>
</div>

var mydata = [{
  zip: "23-12-13",
  name: "Toronto",
  country: "Canada",
  continent: "North America"
}, {
  zip: "23-12-13",
  name: "New York City",
  country: "USA",
  continent: "North America"
}, {
  zip: "23-12-13",
  name: "Silicon Valley",
  country: "USA",
  continent: "North America"
}, {
  zip: "23-12-13",
  name: "Paris",
  country: "France",
  continent: "Europe"
}];

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ['Edit','Zip/Postal', "Name", "Country", "Continent"],
    colModel: [
      {name: "actions", template: "actions", width: 60 },
      {name: 'Zip/Postal', editable: true},
      {name: 'name', editable: true}, 
      {name: 'country',  editable: true}, 
      {name: 'continent', editable: true}
    ],
    pager: true,
    navOptions: {
      edit: false,
      add: false,
      del: false,
      searchtext: "Search",
      refreshtext: "Reload",
      iconsOverText: true
    },
    inlineNavOptions: {
      edit: false,
      add: false,
      del: false
    },
    searching: {
      overlay: false,
      multipleSearch: true,
      closeAfterSearch: true,
      closeOnEscape: true,
      showQuery: true
    },
    actionsNavOptions: {
     delbutton: false,
     editbutton: false,
     addbutton: false,
     editGridicon: "ui-icon-pencil",
     editGridtitle: "Edit Grid",
       custom: [{
         action: "editGrid", position: "first", onClick: function (options) {
          var rowData = $(this).getRowData(options.rowid);
          $("#customDialog").dialog('open');
         }
         }]
    }
  }).jqGrid('navGrid');

    $("#customDialog").dialog({
        title: "custom dialog",
      autoOpen: false,
      close: function () {
                $(this).dialog( 'close' );
      }
    });

  function editGrid() {

  }

查看更新的小提琴：https://jsfiddle.net/y3llowjack3t/xpzdn4j8/