ligerui一个dialog弹div的简单例子(1.1.9)

在线测试例子: 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="#" οnclick="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>
    

     

转载于:https://www.cnblogs.com/vazumi/archive/2012/05/15/2501412.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值