• 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="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="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="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="100%;height:100%;"></iframe>'
                        });
                        //-----修改按钮-----start
                    }
                }
  • 相关阅读:
    Web前端浏览器兼容性问题及解决方案
    JS
    vue element-ui 重置样式问题
    学习的一些文章链接
    打开新世界的第一步:学习servlet
    java学习初体验之课后习题
    下载、安装jdk8(Windows下)并配置变量环境
    下载PhpStorm并进行激活
    WCF+NHibernate 序列化
    wcf 证书+ssl+自定义用户名密码
  • 原文地址:https://www.cnblogs.com/tangge/p/4210519.html
Copyright © 2020-2023  润新知