jquery - 如何在jqgrid中实现组合框

Question

我在jqGrid中实现了一个组合框。插件的使用方式如下:

demo

我遇到了一个问题，因为当我单击“添加”时，我会得到组合框，但是当我输入它并单击“提交”时，我无法获取我输入到 jqGrid 的值。我正在附加我的值jqgrid如下:

    var listData = [
                         { id: "1",listName: "List1",level: "level1"},
                         { id: "2",listName: "List3",level: "level3"}
                     ],
    $listgrid = $("#list");
    $listgrid.jqGrid({
        datatype:'local',
        data: listData,
        colNames:['id','Name','Level'],
        colModel:[
                    {name:'id',index:'id',width:70,align:'center',sorttype: 'int',hidden:true},
                    {name:'listName',index:'listName', width:65,editable: true, formatter: 'select',
                        edittype: 'select', editoptions: {
                            value: 'list1:List1;list2:List2;list3:List3',
                            dataInit: function (elem) {
                                setTimeout(function () {
                                    $(elem).combobox();
                                    $( "#toggle" ).click(function() {
                                        $(elem).toggle();
                                    });
                                 }, 50);
                             },
                         }
                     },
                     {name: 'level', index: 'level', width: 105, align: 'center', editable: true,
                         edittype: 'select', editoptions: {
                             value: 'level1:level1;level2:level2;level3:level3'
                         }
                     }
                ],
                rowNum:10,
                rowList:[5,10,20],
                pager: '#list_pager',
                gridview:true,
                ignoreCase:true,
                rownumbers:true,
                sortname: 'id',
                viewrecords: true,
                sortorder: 'desc',
                caption: "Soft Skills",
                height: '100%',
                width:'750',
                editurl: 'test.aspx',
                gridComplete: function() {
                    $("#list").addClass("nodrag nodrop");
                    $("#list").tableDnDUpdate();
                }
             });
             $listgrid.jqGrid('navGrid', '#list_pager', {edit: true, add: true, del: false, search: false, refresh:false},{height:280,reloadAfterSubmit:false},{reloadAfterSubmit:false});

请让我知道如何获取我在 jqGrid 中输入的值。这可能吗？如果不可能，是否有任何组合框适用于 jqgrid。我搜索了其他组合框并尝试实现以下内容，但我无法在 jqGrid 中工作。

combobox

是否可以在jqGrid中使用它，请任何人帮助我。

提前致谢

Answer 1

demo您提供的链接未显示它与 jqGrid 的关系。您提到的第二个链接( http://source.dellsala.com/jquery-combobox/demo/ )似乎已损坏。

因此，我试图向您展示一个基于您问题中的源代码的示例。 jqGrid 组件支持组合框。我根据 here 的文档修改了您的示例。您可以运行该代码片段并尝试一下，它现在显示组合框 - 如果您单击您选择的一行，它将启用编辑。

onSelectRow: 事件和一些设置丢失:

// see: https://free-jqgrid.github.io/getting-started/
// CDN used: https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid
$(function() {

  var listData = [
        {id: "1", listName: "List1", level: "level1"}, 
        {id: "2", listName: "List3", level: "level3"}
    ],
  $listgrid = $("#list");
  
  $listgrid.jqGrid({
    datatype: 'local',
    data: listData,
    colNames: ['id', 'Name', 'Level'],
    colModel: [{
        name: 'id', index: 'id',
        width: 70, align: 'center',
        sorttype: 'int',
        hidden: true, key: true
      },
      {
        name: 'listName', index: 'listName',
        width: 65, align: 'center',
        editable: true,
        formatter: 'select', edittype: 'select', stype: 'select',
        editoptions: {
          value: 'list1:List1;list2:List2;list3:List3',
          defaultValue: 'list1'
        }
      },
      {
        name: 'level', index: 'level',
        width: 105, align: 'center',
        editable: true,
        formatter: 'select', edittype: 'select', stype: 'select',
        editoptions: {
          value: 'level1:level1;level2:level2;level3:level3',
          defaultValue: 'level1'
        }
      }
    ],
    inlineEditing: {
      keys: true, defaultFocusField: "listName", focusField: "listName"
    },
    cmTemplate: {
      autoResizable: true, editable: true
    },
    iconSet: "fontAwesome",
    rowNum: 10, rowList: [5, 10, 20],
    pager: '#list_pager',
    gridview: true, ignoreCase: true, rownumbers: true,
    sortname: 'id', viewrecords: true,
    sortorder: 'desc',
    caption: "Soft Skills",
    height: '100%', width: '750'
    
    ,gridComplete: function() {
      $("#list").addClass("nodrag nodrop");
      //$("#list").tableDnDUpdate();
    }
    
    ,onSelectRow: function(rowid, status, e) {
      var $self = $(this),
          savedRow = $self.jqGrid("getGridParam", "savedRow");
      
      if (savedRow.length > 0 && savedRow[0].id !== rowid) {
        $self.jqGrid("restoreRow", savedRow[0].id);
      }
      
      $self.jqGrid("editRow", rowid, { focusField: e.target });
    }    
  }).jqGrid('navGrid', '#list_pager', 
    { edit: true, add: true, del: false, search: false, refresh: false }, 
    { height: 280, reloadAfterSubmit: false }, 
    { reloadAfterSubmit: false }
  );
});

<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Canonical jqGrid example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/css/ui.jqgrid.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.2/jquery.jqgrid.min.js"></script>

<table id="list"></table>
<table id="list_pager"></table>
<div><br/><b>Click inside of any cell to activate combobox (edit mode).</b></div>

可以按照我在 Stackoverflow 中的另一个答案中解释的方式读取这些值。看看here 以及更多代码示例。