EasyUi–7.tab和datagrid和iframe的问题

1. 多个tab切换,第2个不显示

动态添加tab Iframe页面的方法

展开
折叠

    <script type="text/javascript">
        $(function () {
            //创建树形结构
            var tt = $(‘#main-center‘);
            $(‘#tt‘).tree({
                url: ‘/Backstage/Home/MenuItem/‘,
                //单击事件
                onClick: function (node) {
                    //console.info($(‘#main-center‘).tabs(‘exists‘, node.text))
                    //console.info(node.attributes.url)
                    if (node.children == null) {
                        //tab已经打开1个了
                        if (tt.tabs(‘exists‘, node.text)) {
                            tt.tabs(‘select‘, node.text);
                        }
                        else {
                            console.info(node.attributes.url)
                            $(‘#main-center‘).tabs(‘add‘, {
                                title: node.text,
                                //href: node.attributes.url,
                                closable: true,
                                content : ‘<iframe scrolling="yes" frameborder="0"  src="‘ + node.attributes.url + ‘" style="width:100%;height:100%;"></iframe>‘
                            });
                        }

                    }
                }
            });
        })

        //function addTab(title, href) {
        //    var tt = $(‘#main-center‘);
        //    if (tt.tabs(‘exists‘, title)) {
        //        tt.tabs(‘select‘, title);
        //    } else {
        //        if (href) {
        //            var content = ‘<iframe scrolling="yes" frameborder="0"  src="‘ + href + ‘" style="width:100%;height:100%;"></iframe>‘;
        //        } else {
        //            var content = ‘未实现‘;
        //        }
        //        tt.tabs(‘add‘, {
        //            title: title,
        //            closable: true,
        //            content: content
        //        });
        //    }
        //}
    </script>

 

2.datagrid里的控件 创建tab

2.1 父页的jquery和iframe里面的jquery获取到的元素调用不是easyui的扩展后的对象,没有tabs方法,要调用父页的jquery

parent.$(‘#main-center‘, parent.document).tabs(‘add‘, {
                        title: ‘修改‘,
                        href: ‘/Backstage/MenuItem/getMenuItemContent?id=‘ + rows[0].ID,
                        closable: true,
                        //content: ‘<iframe scrolling="yes" frameborder="0"  src="‘ + ‘/Backstage/MenuItem/getMenuItemContent?id=‘ + rows[0].ID + ‘" style="width:100%;height:100%;"></iframe>‘
                    });

 

完整代码

//-----------修改按钮-------------
            function editFun() {
                var rows = _datagrid.datagrid(‘getSelections‘);
                //alert(rows[0]);
                //console.info(rows[0].ID)
                //选择多行
                if (rows.length != 1 && rows.length != 0) {
                    var names = [];
                    for (var i = 0; i < rows.length; i++) {
                        names.push(rows[i].UserName);
                    }
                    $.messager.show({
                        title: ‘提示‘,
                        msg: ‘只能选择一条记录编辑!<br>您选择了‘ + names.length + ‘条记录!‘
                    });
                } else if (rows.length == 0) {
                    $.messager.alert(‘提示‘, ‘请选择要修改的记录!‘, ‘error‘)
                }
                    //选择1行
                else if (rows.length == 1) {

                    //-----修改按钮-----start
                    //console.info($(‘#main-center‘))
                    //console.info($(window.parent.document.body).find(‘#main-center‘))
                    parent.$(‘#main-center‘, parent.document).tabs(‘add‘, {
                        title: ‘修改‘,
                        href: ‘/Backstage/MenuItem/getMenuItemContent?id=‘ + rows[0].ID,
                        closable: true,
                        //content: ‘<iframe scrolling="yes" frameborder="0"  src="‘ + ‘/Backstage/MenuItem/getMenuItemContent?id=‘ + rows[0].ID + ‘" style="width:100%;height:100%;"></iframe>‘
                    });
                    //-----修改按钮-----start
                }
            }
时间: 2024-08-28 02:18:44

EasyUi–7.tab和datagrid和iframe的问题的相关文章

easyUI跨Tab操作datagrid

1.在datagrid那个页面定义方法 1 window.top["RELOAD_MY_DATAGRID"]=function(){ 2 $("#dg").datagrid("reload"); 3 }; 2.在easyUI主页定义方法 1 function reloadTabGrid(title) { 2 if ($("#workSpace" ).tabs('exists', title)) { 3 window.top.R

easyui中Tab的tools按钮刷新当前tab

点击刷新按钮,刷新当前Tab选项卡. $('#index_tabs').tabs({ fit : true, border : false, tools : [ { iconCls : 'icon_refresh', handler : function() { // 刷新当前的tab $('.panel:visible > .panel-body > iframe').get(0).contentDocument.location.reload(true); } } ] });

【Jqurey EasyUI+Asp.net】---DataGrid的增、删、改、查

前面是写了两篇,但都不怎么完整,比较才刚开始学这个,都是摸着石头过河,一步一步的来.这两天终于把DataGrid的增删改查融合到一起了,所以分享一下,希望对和我一样的初学者都点帮助. 直接主题吧. 还是想说数据表吧,我建了一个很简单的表Rex_Test ID 自增序号 tName 姓名 tEmail 邮箱 前台代码: Default.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile=&quo

easyui的tab加载页面中的form重复提交

http://blog.csdn.net/fxz1982/article/details/8987769 Easyui中的tabs组件以href方式加载目标页面,如果目标页面中有dialog或者window这类的easyui组件中放了form.那么在关闭这个tab再次打开.如果进行form提交操作,后台就会收到两次提交请求,再次重复以上操作会收到3次提交请求,如果将表单serialize()后以jquery的post提交服务器将收到值全是数组方式组织的. 经分析发现,Easyui的tab加载页面

【easyui】Tab的tools按钮刷新当前tab

点击刷新按钮,刷新当前Tab选项卡 1 /** 2 * Name 选项卡初始化 3 */ 4 $('#home-tabs').tabs({ 5 tools: [{ 6 iconCls: 'icon-reload', 7 border: false, 8 handler: function () { 9 // $('#home-datagrid').datagrid('reload'); 10 // 刷新当前的tab 11 $('.panel:visible > .panel-body > if

EasyUI 左侧 tree 右侧 DataGrid模板

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>组织架构管理</title> <script src="jquery-ea

EasyUI实战篇之datagrid:如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)

http://www.stepday.com/topic/?873 今天在使用EasyUI的datagrid列表组件想实现一个列表的展现,且列表上方有搜索条件,初始化的时候我是这样配置的: view sourceprint? 1.<table id="tBaoXiuList" title="" class="easyui-datagrid" style="width: 723px; height: auto" url=&

使用easyui为tab页增加右键菜单

在使用easyui进行上左右布局一文中,我们已经使用easyui搭建起了一个简单的上左右布局.在使用的过程中,我们经常会遇到tab页打开的太多,但只能一个一个的关闭的烦恼,这个时候有没有想到eclipse中tab右键菜单的关闭其他和关闭所有选项呢? 下面我们就来使用easyui来实现tab页的关闭其他和关闭所有的功能. 1.在上一篇文章的html结构中添加入menu的结构 <body> <div id="home-layout"> <!-- 以前的code

EasyUI 的Tab 标签添加右键菜单

样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href="/smile/" /> <title>标签右键菜单</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />