编辑数据-表单回显

来源：互联网发布：淘宝全屏轮播尺寸怎么编辑：程序博客网时间：2024/06/06 03:06

最近做的项目中，在对单表进行增删改查的时候，对于数据的编辑都使用了数据回显。
具体使用环境：
列表页面：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的控件，就要进行手动回显了。

0 1