Question

我在我的coldfusion项目中有一个基本的jqGrid工作。我在jqGrid中的一个字段是一个组合框。目前，editoption值的硬编码如下所示。

colModel :
[
  {
   name:'seqnum',index:'seqnum', width:100,resizable:true,   
   align:"left",sorttype:"text",editable:true,edittype:"select",editoptions:   
   { value:"1:one;2:two"},editrules:{required:true}
  }
]

我正试图找出一种方法来填充查询/网址的下拉列表。

非常感谢任何帮助。

提前致谢

Answer 1

创建一个使用json查询url的函数。此函数应返回格式为“1：one; 2：two”的字符串。

例如：

    colModel :
    [
      {
       name:'seqnum',index:'seqnum', width:100,resizable:true,   
       align:"left",sorttype:"text",editable:true,edittype:"select",editoptions:
       { value:getSequenceNumbers()},editrules:{required:true}
      }
    ]

    function getSequenceNumbers(){
        $.getJSON("yourUrl", null, function(data) {
            if (data != null) {
                 //construct string.  
                 //(or the server could return a string directly)
            }
        });
    }

我想你也可以把函数放在内联中，但我认为它会更难阅读。

Answer 2

$ .getJSON / getSequenceNumbers（）答案无效。无法从回调中返回数据作为getSequenceNumbers（）的返回值，因为回调是异步的。您需要使用Martin建议的dataURL方法或在$ .getJSON回调中设置jqGrid。

$(document).ready(function() {
 $.getJSON("GetURL", function(data) {
  setupGrid(data);
 });
});

function setupGrid(data) {
...
    colModel :
    [
      {
       name:'seqnum',index:'seqnum', width:100,resizable:true,   
       align:"left",sorttype:"text",editable:true,edittype:"select",editoptions:
       { value:data},editrules:{required:true}
      }
    ]

...
}

Answer 3

使用dataUrl ...（see the wiki here）。

目前dataUrl生成一个GET，但如果从Github中提取代码，则GET可以更改为POST而没有明显的副作用。

Answer 4

值得注意的是，如果您使用的是服务器端脚本语言，则可以完全回避这个问题。例如，使用PHP，您可以使用

{name:'myselectdata', index:'myselectdata', width:160, formatter:'select', editable:true, edittype:"select", cellsubmit:"clientArray", editoptions:{ <? echo getData() ?>}  },

然后只需在页面上方设置PHP函数getData（）以返回合适的字符串，例如

'value:"1:one;2:two"';

可能不像处理jQuery中的所有内容那样优雅或可移植，但在概念上我认为更容易。

Answer 5

让我们说在你的ColModel中你有一个这样的列：

{name:'id_UDM', index:'id_UDM', width:150, editable:true, edittype:"select", editoptions:{dataUrl:'filename.php'}}

首先必须声明它的select元素：

edittype:"select"

然后，在editoptions参数中添加一个dataUrl，如下所示：

editoptions:{dataUrl:'filename.php'}

filename.php必须返回带有选项的“select”元素，这是一个例子：

<?php
    include("connectionToMyDatabase.php");
    $query1 = "SELECT * FROM table WHERE 
    $result1 = mysql_query($query1);
    $response ='<select>';
    while($row = mysql_fetch_array($result1)) {
         $response .= '<option value="'.$row['value'].'">'.$row['name'].'</option>';
    }
    $response .= '</select>';

    echo $response;

 mysql_close($db);  
?>

希望这有帮助。

Answer 6

我知道这是一个老问题，但我发现了同样的问题。
我通过dataUrl和ajaxSelectOptions的组合来解决这个问题。

colModel:[
    //class_id
    $.extend(true,
    {
        name:'class_id'
        ,index:'class_id'
        ,edittype:'select'
        ,formatter:'select'
        ,editoptions: { dataUrl:"db.php?ajaxOp=getClassesOptions" } //to send dynamic parameter, combine with ajaxSelectOptions
    }
    ,{}
    )

请注意，dataUrl字符串是静态的，意味着每次添加/编辑时都不能发送不同的参数。下面的代码不会工作！

,editoptions: { dataUrl:"db.php?ajaxOp=getClassesOptions" + "&id="+selected_id }

要发送此类id的参数，您可以使用ajaxSelectOptions。

ajaxSelectOptions:      //use this for combination with dataUrl for formatter:select
{       
    data: {
      id: function () {
          return selected_id;
      }
    }
},

每次添加/编辑时，都会执行返回selected_id的函数。希望这有帮助！

Answer 7

我修改了searchoptions的代码而不是editoptions。然而，它会自动选择第一个选项并过滤列表，因此我添加了以下内容以减轻这一点。

 $response ='<select>';
 $response .= '<option value=""></option>';
 while($row = $stmt->fetch(PDO::FETCH_NUM)) {
      $response .= '<option value="'.$row[0].'">'.$row[0].'</option>';
 }
 $response .= '</select>';

 echo $response;

jqGrid，如何从查询中填充选择列表

7 个答案: