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

最新推荐文章于 2021-04-28 18:38:00 发布

weixin_30847865

最新推荐文章于 2021-04-28 18:38:00 发布

阅读量294

点赞数

文章标签： xhtml javascript 数据库 ViewUI

原文链接：http://www.cnblogs.com/vazumi/archive/2012/05/15/2501412.html

版权

在线测试例子: 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