最近做的项目中,在对单表进行增删改查的时候,对于数据的编辑都使用了数据回显。
具体使用环境:
列表页面:main.jsp,借助easy-ui的datagrid表格列表显示数据库中查询的数据。选中某条记录进行编辑,在弹出的编辑框-form.jsp中,将选中的数据利用封装的方法,将数据显示到相应的控件上。看两张截图:
实现流程:
main.jsp页面-js方法
function edit(){
if($("#grid").datagrid("getSelected")==null){
alert(‘<spring:message code="label.selectEditData"/>‘);
}
else{
getIndexContentWindow().openWin(‘<spring:message code="app.edit"/>‘, "icon-edit", 400, 250, true, "/syspages/system/datajobtype/form.jsp", $("#grid").datagrid("getSelected"), null, thisWin);
}
}
function getIndexContentWindow(){
var pageWindow = window;
while(pageWindow.parent!=null && pageWindow!=pageWindow.parent){
pageWindow = pageWindow.parent;
}
return pageWindow;
}
var modalWindowOpener = null;
var modalWindowObj = null;
var gridRowData = null;
function openWin(title, iconCls, width, height, autoResize, link, data, type, opener, maximized){
gridRowData = data;
if(modalWindowObj != null){
try{
modalWindowObj.window(‘close‘);
}catch(e){}
}
var modalWindow = document.getElementById("modalWindow");
var iframe = null;
if(modalWindow != null){
modalWindow.parentNode.removeChild(modalWindow);
}
$("body").append("<div id=\"modalWindow\"><div style=\"width:100%;height:100%;overflow:hidden;\"><iframe width=\"100%\" height=\"100%\" frameborder=\"0\"></iframe></div></div>");
modalWindow = document.getElementById("modalWindow");
iframe = modalWindow.getElementsByTagName("IFRAME")[0];
if(iframe.attachEvent){
iframe.attachEvent("onload", function(){
onWindowContentLoad(data, type, autoResize);
});
}
else{
iframe.onload = function(){
onWindowContentLoad(data, type, autoResize);
};
}
modalWindowObj = $(modalWindow).window({
title:" "+title,
width:width,
height:height,
iconCls:iconCls,
modal:true,
// closed:true,
minimizable:false,
maximized: !!maximized,
onRestore:autoResizeWindow
});
addBeforeWindowCloseEvent(modalWindowObj);
modalWindowOpener = opener;
iframe.src = getRootPath()+link+((link.indexOf("?")>0)?"&":"?")+"data="+new Date();
}
form.jsp页面-js:
onload = function(){
var data=getIndexContentWindow().gridRowData;
if(data!=null){
var detdata = getIndexContentWindow().gridRowData["description"];
$(‘#description‘).val(detdata);
}
};
这样就可以顺利进行数据回显了。但是,值得注意的是,在编辑窗体中,文本框、下拉框这些都不能是easyui的控件。easyui封装的太好,这回显的效果,对它不起作用。如果是easyui的控件,就要进行手动回显了。
原文地址:http://blog.csdn.net/xujiaolf/article/details/45313353