dojo的dojo.data.ItemFileReadStore和dijit.form.FilteringSelect 动态更新的问题
dojo的dojo.data.ItemFileReadStore和dijit.form.FilteringSelect问题
1 一个案例：
1.1在Test.jsp页面中定义dojo.data.ItemFileReadStore
<div dojoType="dojo.data.ItemFileReadStore" jsId="employee" url="employee.json"></div>
Employee.json类似
{"identifier":"id","items":[{"id":70,"name":"su"},{"id":68,"name":"sdl"},{"id":66,"name":"got"},{"id":21,"name":"高腾"}]}
1.2Test.jsp中引用
<input id="evname" class="medium" style="width:60%;" store="employee" searchAttr="name" dojoType="dijit.form.FilteringSelect" autoComplete="true" onChange="dojo.byId('mevname')=arguments[0];"/>
<input id="mevname" type="hidden" value="" />
1.3添加一个“安装人”
Test,jsp页面中有一个按钮，截图如下
当点击按钮后出现输入框，输入“123456”和电话后提交。dwr处理添加一个人员并重写employee.json文件。此时文件已经更改。如下：
{"identifier":"id","items":[{"id":72,"name":"123456"},{"id":70,"name":"su"},{"id":68,"name":"sdl"},{"id":66,"name":"got"},{"id":21,"name":"高腾"}]}
1.4问题
我该怎么做让dijit.form.FilteringSelect的下拉框中也更新内容，显示出包括刚才添加的人员“123456”的最新的列表。
2 完整的文件
2.1Test.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/webwork" prefix="ww"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<title>长城高腾EV08媒体播放器后台发布平台</title>
<script src='<ww:url value="/dwr/interface/DWRAction.js" />' type="text/javascript"></script>
<script src='<ww:url value="/dwr/engine.js" />' type="text/javascript"></script>
<script src='<ww:url value="/dwr/util.js" />' type="text/javascript"></script>
<style type="text/css">
body {
margin:10px 0 0 0; padding:0; text-align:left; background: #fff;
font-family:"宋体";
text-decoration:none; font-weight:normal;font-size:12px; line-height:20px; color:#000;
}
</style>
<link href="../css/ev08.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="usePlainJson:true,parseOnLoad: true, isDebug: true, extraLocale: ['zh-cn','en-us']"></script>
<script type="text/javascript" src="../dojo/dijit/nls/dijit-all_zh-cn.js"></script>
<style type="text/css">
@import "../dojo/dojo/resources/dojo.css";
@import "../dojo/dijit/themes/dijit.css";
@import "../dojo/dijit/tests/css/dijitTests.css";
@import "../dojo/dojo/tests/dnd/dndDefault.css";
html, body { height: 100%; width: 100%; padding: 0; border: 0; }
#main { height: 100%; width: 100%; padding: 0; border: 0; }
#header, #mainSplit { margin: 10px; }
hr.spacer { border:0; background-color:#ededed; width:80%; height:1px; }
</style>
<script type="text/javascript" src="../commons/dojoConfig/common.js"></script>
<script type="text/javascript"> // dojo.requires()
dojo.require("dijit.TitlePane");
dojo.require("dijit.Tooltip");
dojo.require("dijit.form.ComboBox");
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.parser");
dojo.require("dojo.data.ItemFileReadStore");
</script>
</head>
<body>
<div dojoType="dojo.data.ItemFileReadStore" jsId="employee" url="employee.json"></div>
<table border="0" align="center" cellpadding="0" cellspacing="0" class="ev_tableLayer">
<tr>
<td align="left">添加EV08盒子终端</td>
</tr>
</table>
<table border="0" align="center" cellpadding="0" cellspacing="0" class="ev_tableLayer">
<tr>
<td>mac: </td>
<td>
<label>
<input trim="true" maxLength="20" dojoType="dijit.form.TextBox" type="text" id="mac" style="width:170px;" />
</label>
</td>
<td style="padding-left:16px;">编 号: </td>
<td>
<label>
<input dojoType="dijit.form.TextBox" type="text" id="evId" style="width:170px;" />
</label>
</td>
</tr>
<tr>
<td>安装人: </td>
<td>
<input id="evname" class="medium" style="width:60%;" store="employee" searchAttr="name" dojoType="dijit.form.FilteringSelect" autoComplete="true" onChange="dojo.byId('mevname')=arguments[0];alert(dojo.byId('mevname').value)" /><input id="mevname" type="hidden" value="" />
<button dojoType="dijit.form.Button" type="button" name="btn">
添加
<script type="dojo/method" event="onClick">
if (dojo.byId("add").style.display=="none"){
document.getElementById('add').style.display = "";
}else{
dojo.byId("add").style.display="none";
dojo.byId("mevn").disabled="disabled";
dojo.byId("mevph").disabled="disabled";
}
</script>
</button>
</td>
<td style="padding-left:16px;">负责人: </td>
<td>
<input maxLength="10" dojoType="dijit.form.TextBox" type="text" id="pprincipal" style="width:170px;" />
</td>
</tr>
<tr id="add" style="display:none">
<td> </td>
<td colspan="3">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="ev_hiddentable">
<tr>
<td>姓名: </td>
<td><input maxLength="10" dojoType="dijit.form.TextBox" type="text" id="mevn" style="width:100px;height=20px;" />
</td>
<td>电话: </td>
<td>
<input maxLength="20" dojoType="dijit.form.TextBox" type="text" id="mevph" style="width:100px;height=20px;" />
</td>
<td>
<button dojoType="dijit.form.Button" type="button" name="sub">提交<script type="dojo/method" event="onClick">
if(document.getElementById('mevn').value==""){
alert('请填写姓名');
document.getElementById('mevn').focus;
return;
}
if(document.getElementById('mevph').value==""){
alert('请填写电话');
document.getElementById('mevph').focus;
return;
}
DWRAction.execute(
{
action: 'employsave',
namespace: '/region',
executeResult: false
},
{
"model.name":document.getElementById("mevn").value,
"model.phone":document.getElementById("mevph").value
},
function(ajaxResult) {
var data = ajaxResult.data.emlist;
//dwr.util.removeAllOptions("mevname");
//dwr.util.addOptions("mevname",data,function(item){return item.id},function(item){return item.name});
dojo.parser.parse(dojo.byId("employee"));
document.getElementById("add").style.display = "none";
}
);
</script>
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
2.2EmploySaveAction即在xwork.xml中映射的‘employsave.action’
package com.got.ev08.web.action.region;
import java.io.FileOutputStream;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import net.sf.json.JSONObject;
import com.got.ev08.domain.region.EvInstallEmployee;
import com.got.ev08.service.region.EvInstallEmployeeManager;
import com.got.ev08.web.view.VEmployee;
import com.got.ev08.web.view.VJsonSelectOption;
import com.got.framework.utils.CurrentPath;
import com.got.framework.web.BaseModelAction;
@SuppressWarnings("serial")
public class EmploySaveAction extends BaseModelAction <EvInstallEmployee>{
private EvInstallEmployeeManager evInstallEmployeeManager;
private List<VEmployee> emlist = new ArrayList<VEmployee>();
private String json;
public String getJson() {
return json;
}
public void setEvInstallEmployeeManager(
EvInstallEmployeeManager evInstallEmployeeManager) {
this.evInstallEmployeeManager = evInstallEmployeeManager;
}
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
evInstallEmployeeManager.saveEvInstallEmployee(model);
List<EvInstallEmployee> temp = evInstallEmployeeManager.getAll();
java.util.Iterator<EvInstallEmployee> iter = temp.iterator();
while (iter.hasNext()) {
VEmployee employee = new VEmployee();
EvInstallEmployee e = iter.next();
employee.setId(e.getId());
employee.setName(e.getName());
emlist.add(employee);
}
// TODO json传输数据（当前版本不用）************************************
VJsonSelectOption vjson = new VJsonSelectOption();
vjson.setIdentifier("id");
vjson.setItems(emlist);
// 将List转化为json 字符串
JSONObject jsonObject = JSONObject.fromObject(vjson);
// 将json字符串写到.json文件中[文件的路径、文件名]
String file = CurrentPath.getDefaultWWWRoot()
+ "/region/employee.json";//文件的物理路径
try {
json = jsonObject.toString();
FileOutputStream fos = new FileOutputStream(new java.io.File(
file));
fos.write(json.getBytes("UTF-8"));
fos.close();
} catch (IOException e) {
e.printStackTrace();
}
/* json 传输数据结束****************************************************** */
return null;
}
public List<VEmployee> getEmlist() {
return emlist;
}
public void setEmlist(List<VEmployee> emlist) {
this.emlist = emlist;
}
}
【追加】
解决之道：修改Test.jsp文件中的DWR回调处理方法
function(ajaxResult) {
//var data = ajaxResult.data.emlist;
//dwr.util.removeAllOptions("mevname");
//dwr.util.addOptions("mevname",data,function(item){return item.id},function(item){return item.name});
var store = new dojo.data.ItemFileReadStore({data: eval('('+ajaxResult.data.json+')') });
var newValue = store.fetch(
{
query: {id: "*"},
onComplete: function(items, request) {
dijit.byId("evname").setValue(items[0].name);
}
});
dijit.byId("evname").store = store;
document.getElementById("add").style.display = "none";
}