在線測試例子: 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="width: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>