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
                }
            }