在线测试例子: http://vazumi.net.s1.kingidc.net/example/form.htm
原理:
- • 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下
- • 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制
- • 这个例子的保存和删除都没有提交数据库，只是前台grid改写
- • 弹窗div里面的文本框有用到非空验证
- • 第二次之后打开dialog用show，避免重复创建liger对象
<!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> <title></title> <link href="../lib/ligerUI1.1.9/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <link href="../lib/ligerUI1.1.9/skins/ligerui-icons.css" rel="stylesheet" type="text/css" /> <script src="../lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script> <script src="../lib/ligerUI1.1.9/js/core/base.js" type="text/javascript"></script> <script src="../lib/ligerUI1.1.9/js/ligerui.min.js" type="text/javascript"></script> <script src="../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script> <script src="../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script> <script src="../lib/jquery-validation/messages_cn.js" type="text/javascript"></script> <script type="text/javascript"> //-----------------------全局变量------------------------------ var grid=null; var dlgedit=null; var Validator = null; var edittype=null; var rowi=0; $(function () { //--------------------grid定义------------------------------- grid=$("#maingrid").ligerGrid({ checkbox: true, rownumbers:true, toolbar: { items: [{ text: '新增',id:'add', icon:'add',click: itemclick}]}, columns: [ { display: '编号', name:'AREAID'}, { display: '名称', name:'AREANAME'}, { display: '操作', render:function(r,i) {return '<a href="#" onclick="f_edit(\'modify\','+i+')">编辑</a>';}} ], url: "/service/DataHandler.ashx?View=arealist", usePager:false }); //--------------------form验证------------------------------- $.metadata.setType("attr", "validate"); Validator = $("form").validate({ debug: false, errorPlacement: function (l, dom){dom.ligerTip({ content: l.html(), appendIdTo: l});}, success: function (l){l.ligerHideTip();} }); $("form").ligerForm(); $("#pageloading").hide(); }); //-----------------------------toolbar 按钮事件---------------------------- function itemclick(item) { if(item.id) { switch (item.id) { case "add":edittype="add"; f_edit("add",0);return; } } } //--------------------------保存事件，更新grid------------------------------- function f_save() { $("form").append($(".l-dialog")); if (!Validator.form()) return false; if (edittype=="add") grid.addRow({ AREAID : $("#txtid").val(), AREANAME: $("#txtname").val() }); else { var ss=grid.getRowObj(rowi); grid.updateRow(ss,{ AREAID : $("#txtid").val(), AREANAME: $("#txtname").val() }); } dlgedit.hide(); } //-------------------------弹窗事件--------------------------------- function f_edit(type,rowindex) { if (type!="add") { $("#txtid").val(grid.getRow(rowindex).AREAID); $("#txtname").val(grid.getRow(rowindex).AREANAME); } else { $("#txtid").val(""); $("#txtname").val(""); } edittype=type; rowi=rowindex; if (dlgedit==null) { dlgedit=$.ligerDialog.open({ target:$("#divedit"), buttons: [ { text: '保存', onclick: function (i, d) { f_save(); }}, { text: '关闭', onclick: function (i, d) { $("input").ligerHideTip(); d.hide(); }} ] }); $(".l-dialog-close").bind('mousedown',function() //dialog右上角的叉 { $("input").ligerHideTip(); dlgedit.hide(); }); $(".l-dialog-title").bind('mousedown',function() //移动dialog时,隐藏tip { $("input").ligerHideTip(); }); } else { dlgedit.show(); } } </script> </head> <body style="padding:20px 20px 20px 20px; overflow:hidden;"> <div class="l-loading" style="display:block" id="pageloading" ></div> <div style="80%;"> <h2> 这是一个dialog弹div的简单例子(1.1.9) </h2> <div style="padding-left:20px"> <br /> <li>• 为啥要弹div,因为iframe这种页面弹窗，多少涉及到内存泄漏，多次弹窗之后浏览器内存占用居高不下</li> <li>• 弹div没啥技术要点，关闭事件是用hide()来隐藏，初始化div隐藏外面多套一层div来控制</li> <li>• 这个例子的保存和删除都没有提交数据库，只是前台grid改写</li> <li>• 弹窗div里面的文本框有用到非空验证</li> <li>• 第二次之后打开dialog用show，避免重复创建liger对象</li> </div> <hr /> <div id="maingrid"></div> </div> <form id="form1" name="form1"> <div style=" display:none"> <div id="divedit"> 编号<input id="txtid" name="txtid" ltype="text" runat="server" type="text" validate="{required:true}" /> 名称<input id="txtname" name="txtname" ltype="text" runat="server" type="text" validate="{required:true}" /> </div> </div> </form> </body> </html>