我想知道如何在添加/编辑表单中创建基本下拉列表,但是这些值基于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>";
}
}
},
答案 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);