jqGrid：基于 MySQL Query 的下拉菜单

Question

我想知道如何在添加/编辑表单中创建一个基本的下拉列表，但这些值基于 mysql 查询的结果而不是硬编码值。我在documentation 中读到，您可以在其中设置editoptions dataurl 参数，但它只提供无用的html。我需要知道应该如何格式化 javascript。我想创建一个单独的 PHP 文件来存放查询语句吗？

我不仅需要在下拉列表中显示选择 id 字段，还需要显示 id 的标题描述，以便用户更轻松地将 id 与标题相关联，以便为 id 输入字段选择适当的 id .

选择 id 后的下拉 id 字段需要自动填充添加/编辑表单上的其他几个字段。其他字段不是下拉菜单，而是简单的文本字段。

有什么想法吗？ 谢谢。

---

更新： 我已经尝试了您的建议，但我无法在表单的下拉列表中显示任何内容。 请看我下面的代码...

HTML 文件中的 jqGrid (Javascript) 代码：

{name:'div_id',
   index:'div_id', 
   width:30,
   editable:true,
   sortable:false, 
   resizable:false,
   align:"center", 
   edittype:'select',
   editrules:{required:true,number:true},
   formoptions:{elmprefix:"(*)"},
   editoptions:{
       size:11,
       maxlength:11,
       dataUrl:'dropdown.php',
       type:"GET",
       buildSelect:function(data){
           var response = jQuery.parseJSON(data); //json data
           var s = '<select style="width: 520px">';
           if(response && response.length)     
           { 
               s += '<option value="0">--- Select Value ---</option>';

               for (var i = 0, l=response.length; i<l ; i++) 
               {       
                   var ri = response[i].divid + response[i].longDesc; 
                    s += '<option value="'+ri+'">'+ri+'</option>';                          
               }  // var i = 0, l=response.length; i<l ; i++ 
           } //response && response.length
           return s + "</select>";
       } // function(data) 
},

DataUrl：dropdown.php 代码

// Connect to the database
$dbhost = "localhost"; 
$dbuser = "root"; 
$dbpass = "**********"; 
$dbname = "codetables"; 

mysql_connect($dbhost, $dbuser, $dbpass) or die("Connection Error: " . mysql_error());
mysql_select_db($dbname) or die("Error conecting to db.");

$result = mysql_query('SELECT div_id, long_desc FROM divcodes where avail_ind = "Y" and active_ind="Y" order by div_id');
$row = mysql_fetch_array($result,MYSQL_ASSOC);

$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $response->rows[$i]['id']=$row[id];
    $response->rows[$i]['divid']=array($row[div_id]);
    $response->rows[$i]['longDesc']=array($row[long_desc]);
    $i++;
}        
echo json_encode($response);

JSON 数据： 我只显示了 JSON 数据的一部分，但我确实从 mysql 查询中获取了数据，并且似乎被放入了 JSON 数组中。

{"rows":[{"divid":["01"],"longDesc":["Office of Technology and Information Services"]},{"divid":["04"],"longDesc":["Office of Emergency Response"]},{"divid":["05"]}]}

---

更新 2： 我正在为如何格式化数据而苦苦挣扎，以便 jqGrid 在下拉列表中显示数据。我能够弄清楚，但是当我切换到 PDO 语句时格式会再次改变。但暂时在这里是我发现的......

数据网址：dropdown.php 代码

$dbhost = "localhost"; 
$dbuser = "root"; 
$dbpass = "*********"; 
$dbname = "maint"; 

// connect to the database
mysql_connect($dbhost, $dbuser, $dbpass) or die("Connection Error: " . mysql_error());
mysql_select_db($dbname) or die("Error conecting to db.");

$result = mysql_query('SELECT div_id FROM depdivs where div_id <> "" and avail_ind = "Y" and active_ind="Y"');

$row = mysql_fetch_array($result,MYSQL_ASSOC);

$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
    $rows[$i]=array($row[div_id]);
    $i++;
}        
echo json_encode($rows);

JSON 数据输出：

[["01"],["02"],["03"],["04"],["52"],["53"],["55"],["57"],["58"],["60"],["75"]]

HTML 文件中的 jqGrid (Javascript) 代码：

{name:'div_id',
    index:'div_id', 
    width:30,
    editable:true,
    sortable:false, 
    resizable:false,
    align:"center",
    edittype:'select',
    editrules:{required:true,number:true},
    formoptions:{elmprefix:"(*)"},
    editoptions:{
           dataUrl:'dropdown.php',
           buildSelect: function(response){
                 var response = jQuery.parseJSON(response);
                 var s = '<select>';
                 jQuery.each(response,function(i,item){
                       s +='<option value="+response[i]+'">'+response[i]+'</option>';
                 });
                 return s + "</select>";
           }
  }
},

Answer 1

按照这些步骤，

在你的模型中

editoptions: { 
 dataUrl:'your url',
 type:"GET",
 buildSelect: function(data) {
    var response = jQuery.parseJSON(data); //json data
        var s = '<select style="width: 520px">';
        if (response && response.length) { //
            s += '<option value="0">--- Select Value ---</option>';
            for (var i = 0, l=response.length; i<l ; i++) {
            var ri = response[i].value; // u can concatenate id here
                s += '<option value="'+ri+'">'+ri+'</option>';
            }
        }
        return s + "</select>";
        },
  } ,

这里我将 json 数据返回为
[{"id":"1","value":"Alpha"},{"id":"2","value":"Beta"}]

如果你想显示我的 id ，只需连接响应值

var ri = response[i].value + response[i].id;  

更新

List<ArticleDetails> articlelist =  prfbo.getPrfArticleType(); // get value from DB
JSONArray jsonOrdertanArray = JSONArray.fromObject(articlelist);

System.out.println(jsonOrdertanArray);
out.println(jsonOrdertanArray);