jqGrid:基于MySQL Query的下拉

时间:2013-12-10 18:40:30

标签: jquery dynamic jqgrid

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

我不仅要在下拉列表中显示select 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>";
           }
  }
},

1 个答案:

答案 0 :(得分:1)

请按照以下步骤操作

在你的colmodel中

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);