编辑数据-表单回显

最近做的项目中,在对单表进行增删改查的时候,对于数据的编辑都使用了数据回显。
具体使用环境:
列表页面:main.jsp,借助easy-ui的datagrid表格列表显示数据库中查询的数据。选中某条记录进行编辑,在弹出的编辑框-form.jsp中,将选中的数据利用封装的方法,将数据显示到相应的控件上。看两张截图:
编辑数据-表单回显_第1张图片

编辑数据-表单回显_第2张图片

实现流程:

main.jsp页面-js方法

function edit(){
    if($("#grid").datagrid("getSelected")==null){
        alert('');
    }
    else{
        getIndexContentWindow().openWin('', "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("
"
); 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的控件,就要进行手动回显了。

你可能感兴趣的:(Java)