一个单元格中的双 select 菜单 JqGrid

Question

我想在一个单元格中显示两个 select 框，或者将多个单独的单元格合并为一个。由于网格需要在一个单元格中显示两个值，并且这些值在编辑时变成两个不同的 select 菜单，每个菜单都从数组中获取它们的值。

我已经设置了一个示例代码，我想在上面实现这个。此代码包含两个数组 arr1 和 arr2。我希望这两个数组的数据显示在 select 菜单中，就像它们在顶部对齐一样（在 html table 中）在一个单元格中，每个 select包含一个数组作为 select 选项。

代码: jsFiddle code

这可行吗..？我正在使用 JQgrid 4.6.0.

var data = [
  [48803, "AAF1", "", "02200220", "OPEN", "D,AB", "D,AC", "E,AD", "F,AE", "D,AD"],
  [48769, "AAD33", "", "77733337", "OPEN", "D,AB", "D,AB", "E,AD", "F,AD", "D,AB"]

];

var op1 = {
  value: '1:D; 2:E; 3:F'
};
var op2 = {
  value: '1:AB;2:AC; 3:AD; 4:AE'
};

var arr1 = ["D", "E", "F"];
var arr2 = ["AB", "AC", "AD", "AE"];


$("#grid").jqGrid({
  datatype: "local",
  height: 250,
  colNames: ['ID', 'CPR', 'Blank', 'DeptID', 'Status', '01', '02', '03', '04', '05'],
  colModel: [{
    name: 'ID',
    index: 'ID',
    width: 50,
    sorttype: "int"
  }, {
    name: 'CPR',
    index: 'CPR',
    editable: true,
    width: 60,
    sorttype: "date"
  }, {
    name: 'blank',
    editable: true,
    index: 'blank',
    width: 10
  }, {
    name: 'DeptID',
    index: 'DeptID',
    editable: true,
    width: 60,
    sorttype: "float"
  }, {
    name: 'Status',
    index: 'Status',
    width: 60,
    sorttype: "float"
  }, {
    name: '01',
    index: '01',
    editable: true,
    edittype: "select",
    formatter: myformatter,
    editoptions: op2,
    width: 30,
  }, {
    name: '02',
    index: '02',
    editable: true,
    edittype: "select",
    formatter: myformatter,
    editoptions: op1,
    width: 30,
  }, {
    name: '03',
    index: '03',
    editable: true,
    edittype: "select",
    formatter: myformatter,
    editoptions: op1,
    width: 30,
  }, {
    name: '04',
    index: '04',
    editable: true,
    edittype: "select",
    formatter: myformatter,
    editoptions: op1,
    width: 30,
  }, {
    name: '05',
    index: '05',
    editable: true,
    edittype: "select",
    formatter: myformatter,
    editoptions: op1,
    width: 30,
  }, ],
  'cellEdit': true,
  caption: "Stack Overflow Example",
  // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ['ID', 'CPR', 'Blank', 'DeptID', 'Status', '01', '02', '03', '04', '05'];
var mydata = [];

for (var i = 0; i < data.length; i++) {
  mydata[i] = {};
  for (var j = 0; j < data[i].length; j++) {
    mydata[i][names[j]] = data[i][j];
  }
}

for (var i = 0; i <= mydata.length; i++) {
  $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}

function myformatter(cellvalue, options, rowObject) {
  var array = cellvalue.split(",");
  return array[0] + " " + array[1];
}

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>

<table>
  <tr>
    <td>
      <select>
        <option>1</option>
        <option>2</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <select>
        <option>3</option>
        <option>4</option>
      </select>
    </td>
  </tr>
</table>

<table id="grid"></table>

更新： 托尼的建议奏效了。我创建了一个新的 fiddle，在编辑单元格时它包含两个 select 菜单。

JSFiddle：JSFIDDLE

Answer 1

目前实现这一点的一种方法是使用自定义编辑类型。

在此自定义编辑类型中，您需要使用 custom_element 属性创建两个选择并使用 custom_value 属性获取和设置值。

有关详细信息，请参阅 here（滚动到末尾以查看自定义元素）。您将看到如何使用自定义元素的示例。

我不确定 cellEdit 是不是一个好的选择。也许您可以尝试使用内联或表单编辑选项。

此致，

一个单元格中的双 select 菜单 JqGrid

Dual select menu in one cell JqGrid

javascript

jquery

jqgrid

html-select