1. 程式人生 > >easyui dialog實現操作iframe內元素

easyui dialog實現操作iframe內元素

//js封裝的dialog用iframe的方式實現
var js={dialog:'',iframe:{}};

js.showWindow=function (title,url,width,height,model,func) {
    var uuid=js.uuid();
    var iframe="iframe"+uuid;
    var dialog="dialog"+uuid;
    js.iframe=iframe;
    js.dialog=dialog;
    var content = '<iframe id="'+iframe+'" name="iframe'+uuid+'" src="' + url + '" width="100%" height="98%" frameborder="0" scrolling="no"></iframe>';


    $("<div id='"+dialog+"'></div>").dialog({
        title: title,
        iconCls:'icon-window',
        width: width,
        height: height,
        closed: true,
        cache: false,
        minimizable:true,
        maximizable:true,
        collapsible:true,
        resizable:true,
        content:content,
       // url:url,
        modal: model,
        onMove:function(){

        },
        onMinimize:function(){
            alert(123);
        },
        onClose:function(){
            $("#"+dialog).dialog('destroy')
        },
        buttons:[{
            iconCls:'icon-ok',
            text:'確定',
            handler:function () {
              func()
                //iframe.SubmitForm()
            }
        },{
            iconCls:'icon-quxiao',
            text:'取消',
            handler:function(){
                $("#"+dialog).dialog('destroy');
            }
        }]
    });
    js.iframe=window.frames[iframe];
};


js.uuid=function () {
    var d = new Date().getTime();
    var uuid = 'bxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
};

//這是父頁面要通過dialog呼叫子頁面的  SubmitForm方法  
function add() {
        var data=g.treegrid('getSelected');
        var pid;
        if(!data){
            pid=0;
        }else{
            pid=data.id;
        }
       js.showWindow('選單新增','{:url("admin/auth/menu_add")}?pid='+pid,800,600,false,function () {
           js.iframe.SubmitForm();
        });

    }


<form id="fm" method="post" action="{:url('auth/menu_save',['pid'=>$pid])}" novalidate style="margin:0;padding:20px 50px;float: left" >

    <div style="margin-bottom:10px">
        <input name="name" class="easyui-textbox" required="true" label="選單名稱:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="app" class="easyui-textbox" required="true" label="應用名稱:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="controller" class="easyui-textbox"  label="控制器:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="action" class="easyui-textbox"  label="方法:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="js_action" class="easyui-textbox"  label="js方法:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <select  class="easyui-combobox" name="type" required="true" style="width:100%" label="是否為選單">
            <option value="">請選擇</option>
            <option value="1">只顯示為選單</option>
            <option value="2">許可權選單</option>
            <option value="3">按鈕</option>
        </select>
    </div>
    <div style="margin-bottom:10px">
        <select  class="easyui-combobox" name="is_show" required="true" style="width:100%" label="是否顯示">
            <option value="">請選擇</option>
            <option value="1">顯示</option>
            <option value="2">不顯示</option>
        </select>
    </div>
    <div style="margin-bottom:10px">
        <input name="icon" class="easyui-textbox"  label="圖示:" style="width: 100%">
    </div>
    <div style="margin-bottom:10px">
        <input name="sort" class="easyui-textbox"   required="true" label="排序:" value="999" style="width: 100%">
    </div>

    <div style="margin-bottom:10px">
        <input name="pid" class="easyui-textbox"   required="true" label="上級選單ID:" value="{$pid}"  style="width: 100%">
    </div>

</form>

<script>

    //獲取父節點

    function SubmitForm(){
        $("#fm").form('submit', {
            url:"{:url('auth/menu_add')}",
            onSubmit: function(){
                var isValid = $(this).form('validate');
                return isValid;	// return false will stop the form submission
            },
            success: function(data){
                var data=eval('(' + data + ')');
                if(data.success){

                    layer.msg(data.message);
                }
            }
        });
    }


</script>
/**iframe載入的子頁面***/

1.//根據iframe的id獲取物件   
2.var i1 = window.frames['iframeId'];   
3.//var iframe =window.frames[0];也可以   
4.//獲取iframe中的元素值   
5.var val=i1.document.getElementById("t1").value  
//根據iframe的id獲取物件
var i1 = window.frames['iframeId'];
//var iframe =window.frames[0];也可以
//獲取iframe中的元素值
var val=i1.document.getElementById("t1").value

蛋疼的一晚上想到這種形式去實現,寫完睡覺了!!!