mcv easyui 双击不弹窗？

Question

<div id="tt" class="easyui-tabs" data-options="fit:true"></div>
var $tt= $("#tt")
$tt.tabs("add", {
                    title: '...',
                    content: ...,
                });

Answer 1

easyui-tabs是选项卡
还有很多的  
www.jeasyui.com

Answer 2

我是想问，通过点击按钮打开这样的页面  不是弹窗，而是像浏览器一样显示tab

Answer 3

window.open("url")直接用a标签加个 target="_blank" 也行不太明白你的意思、是点击客户关系是在tabs中加一个选项卡还是在浏览器里加选项卡啊？

Answer 4

js能做的就是window.open
弹窗还是选项卡打开还真不是js能决定的，是人家浏览器说了算了，你去IE选项，新窗口打开方式那里可以选择

Answer 5

  function addTab(subtitle, url, closable) {
            if (!$('#tabs').tabs('exists', subtitle)) {
                var cl = true;
                if (closable == 'false')
                    cl = false;
                $('#tabs').tabs('add', {
                    title: subtitle,
                    content: createFrame(url),
                    closable: cl
                });
            } else {
                $('#tabs').tabs('select', subtitle);
            }
        }
调用：addTab(‘tab测试’', '@Url.Action("Index", "Text")', "false");

Answer 6

 你系统主界面是怎么实现的呢第一种方式：IFrame
     function addTab(title, url) {
            if ($('#tt').tabs('exists', title)) {
                $('#tt').tabs('select', title);
            } else {
                //var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:99.9%;height:99.8%/9;*height:99.9%;height:99.5% !important"></iframe>';
                var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:99.5%"></iframe>';
                $('#tt').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
        }
第二种方式:DIV
//        function addTab(node) {
//            if ($('#tt').tabs('exists', node.text)) {
//                $('#tt').tabs('select', node.text);
//            } else {
//                $('#tt').tabs('add', {
//                    iconCls: node.iconCls,
//                    title: node.text,
//                    href: node.url,
//                    closable: true,
//                    extractor: function (data) {
//                        data = $.fn.panel.defaults.extractor(data);
//                        var tmp = $('<div></div>').html(data);
//                        data = tmp.find('#content').html();
//                        tmp.remove();
//                        return data;
//                    }
//                });
//            }
//        }

Answer 7

楼主的描述和楼层中说的自相矛盾。你要的效果是，双击datagrid中某行，在父级tabs中添加一个tab显示编辑页面。而你楼层中却又说“在浏览器打开一个标签页”。
矛盾了吧。解决你的问题：
看你的截图，layout的center位置的tabs内部应该是嵌套iframe的，所以你的datagrid双击事件中应该是这样
var content = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:99.5%"></iframe>';
top.$("#mainTabs").tabs("add",{title: title,content: content,closable: true});
直接抄15楼的了，关键是你要找到tabs。

Answer 8

Quote: 引用 14 楼 chinafmshbwang 的回复:

  @model System.Collections.Generic.List<string>
@{
    ViewBag.Title = "客户管理";
    string _ControllerName = "Customer";
}
<div id="system-iframe-north" data-options="region:'north'" style="overflow-y: hidden; padding: 5px 0px 0px 5px; border-width: 0px;">
    <div class="input-prepend inline">
        <span class="add-on">客户编号</span>
        <input id="ClientInfoID" type="text" maxlength="50" class="span2" placeholder="客户编号" />
    </div>
    <div class="input-prepend inline">
        <span class="add-on">客户名称</span>
        <input id="CName" type="text" maxlength="50" class="span2" placeholder="客户名称" />
    </div>
    <div class="input-prepend inline">
        <span class="add-on">开发人</span>
        <input id="Developers" type="text" maxlength="50" class="span2" placeholder="开发人" />
    </div>
    <div class="input-prepend inline">
        <span class="add-on">商务专员</span>
        <input id="TradeCommissioner" type="text" maxlength="50" class="span2" placeholder="商务专员" />
    </div>
    <div class="input-prepend inline">
        <span class="add-on">是否有效</span>
        @Html.DropDownList("IsValid", MyHtmlHelper.GetAreList(true), new { id = "IsValid" })
    </div>
    <div class="input-append inline">
        <a id="btnQuery" class="btn btn-small" href="javascript:;" style="text-decoration: none;"><i class="b-icon-search"></i>查询<b></b></a>
    </div>
</div>
<div id="system-iframe-center" data-options="region:'center'" style="overflow-y: hidden; border-width: 0px;">
    <div id="datagrid"></div>
    <div id="toolbar" class="z-toolbar" style="background: #f4f4f4;">
        @if (Model.Contains("新增"))
        {
            <a id="btnAdd" href="javascript:;" class="easyui-linkbutton" title="新增" data-options="iconCls:'icon-add',plain:'true'">新增</a>
        }
        @if (Model.Contains("删除"))
        {
            <a id="btnDelete" href="javascript:;" class="easyui-linkbutton" title="删除" data-options="iconCls:'icon-remove',plain:'true'">删除</a>
        }
        @if (Model.Contains("编辑"))
        {
            <a id="btnEdit" href="javascript:;" class="easyui-linkbutton" title="编辑" data-options="iconCls:'icon-edit',plain:'true'">编辑</a>
        }
        @if (Model.Contains("浏览"))
        {
            <a id="btnBrowse" href="javascript:;" class="easyui-linkbutton" title="浏览" data-options="iconCls:'icon-tip',plain:'true'">浏览</a>
        }
        @if (Model.Contains("客户关系"))
        {
            <a id="btnRelations" href="javascript:;" class="easyui-linkbutton" title="客户关系" data-options="iconCls:'icon-check',plain:'true'">客户关系</a>
        }
        <a id="btnRefresh" href="javascript:;" class="easyui-linkbutton" title="刷新" data-options="iconCls:'icon-reload',plain:'true'">刷新</a>
    </div>
</div>
<div id="datagrid-menu" class="easyui-menu">
    <div id="datagrid-add" data-options="iconCls:'icon-add'" title="新增">新增</div>
    <div id="datagrid-delete" data-options="iconCls:'icon-remove'" title="删除">删除</div>
    <div id="datagrid-edit" data-options="iconCls:'icon-edit'" title="编辑">编辑</div>
    <div class="menu-sep"></div>
    <div id="datagrid-reload" data-options="iconCls:'icon-reload'" title="刷新">刷新</div>
</div>
@Html.Partial("_BrowseClientInfo")
@Html.Partial("_AddEdit")
@section JS
{
    <script type="text/javascript">
        $(document).ready(function () {
            var rowData, $dg = $('#datagrid');
            //datagrid首次加载数据
            $dg.datagrid({
                loadMsg: '数据加载中，请稍后……',
                method: 'post',
                url: '@Url.Action("Search", _ControllerName)',
                sortName: 'ClientInfoID',
                sortOrder: 'desc',
                pageList: [5, 10, 20, 30, 50],
                pageSize: 20,
                toolbar: '#toolbar',
                columns: [[
                    { field: 'ck', checkbox: true, width: 20, align: 'center' },
                    { field: 'ClientInfoID', title: '客户编号', width: 120, align: 'center', sortable: true },
                    { field: 'CName', title: '客户名称', width: 100, align: 'center', sortable: true },
                    { field: 'Developers', title: '开发人', width: 120, align: 'center', sortable: true },
                    { field: 'TradeCommissioner', title: '商务专员', width: 100, align: 'center', sortable: true },
                    { field: 'IsValid', title: '是否有效', width: 80, align: 'center', sortable: true, formatter: function (value) { return Common.formatBoolean(value); } }
                ]],
                fit: true,
                pagination: true,
                rownumbers: true,
                singleSelect: false,
                onRowContextMenu: onRowContextMenu
            });
            //添加右击菜单内容
            function onRowContextMenu(e, rowIndex, row) {
                e.preventDefault();
                rowData = row;
                $('#datagrid-menu').menu('show', {
                    left: e.pageX,
                    top: e.pageY
                });
            }
            //查询数据
            $('#btnQuery').on('click', function () {
                var parm = {
                    ClientInfoID: $('#ClientInfoID').val(),
                    CName: $('#CName').val(),
                    Developers: $('#Developers').val(),
                    TradeCommissioner: $('#TradeCommissioner').val(),
                    IsValid: $('#IsValid').val()
                };
                $dg.datagrid('load', parm);
                $dg.datagrid('clearSelections');
                return false;
            });
            //刷新
            $('#btnRefresh').on('click', function () {
                $dg.datagrid('reload');
            });
            //多选删除
            $("#btnDelete").on("click", function () {
                var selecteds = $dg.datagrid('getSelections');
                if (Common.isEmptyObject(selecteds)) {
                    $.messager.alert('提示', '至少选择一条数据删除！', 'warning');
                } else {
                    $.messager.confirm('确认', '是否删除选中的数据？', function (r) {
                        var buffer = new StringBuffer();
                        for (var i = 0; i < selecteds.length; i++) {
                            buffer.append(selecteds[i].ID);
                        }
                        var idList = buffer.toString(",");
                        $.post('@Url.Action("Delete", _ControllerName)', { idList: idList },
                            function (data) {
                                if (data.success) {
                                    $.messager.alert('提示', data.message, 'info');
                                    $dg.datagrid('load');
                                    $dg.datagrid('clearSelections');
                                } else {
                                    $.messager.alert('错误', data.message, 'error');
                                }
                            });
                    });
                }
            });
            //编辑
            $("#btnEdit").on("click", function () {
                var selecteds = $dg.datagrid('getSelections');
                if (Common.isEmptyObject(selecteds)) {
                    $.messager.alert("友情提示", "请选中一条数据编辑", "error");
                } else if (selecteds.length > 1) {
                    $.messager.alert("友情提示", "每次只能编辑一条数据，你已经选择了<font color='red'  size='6'>" + selecteds.length + "</font>条", "error");
                } else {
                    Edit(selecteds[0].ID, "1");
                }
            });
            
}
我的主界面是这样写的，请问如何添加这个tab

Answer 9

//浏览
            $("#btnBrowse").on("click", function () {
                var selecteds = $dg.datagrid('getSelections');
                if (Common.isEmptyObject(selecteds)) {
                    $.messager.alert('友情提示', '请选中一条数据浏览！', 'error');
                } else if (selecteds.length > 1) {
                    $.messager.alert("友情提示", "每次只能浏览一条数据，你已经选择了<font color='red'  size='6'>" + selecteds.length + "</font>条", "error");
                } else {
                    Edit(selecteds[0].ID, "2");
                }
            });
            //客户关系
            $("#btnRelations").on("click", function () {
                var selecteds = $dg.datagrid('getSelections');
                if (Common.isEmptyObject(selecteds)) {
                    $.messager.alert('友情提示', '请选中一条数据！', 'error');
                } else if (selecteds.length > 1) {
                    $.messager.alert("友情提示", "每次只能选择一条数据，你已经选择了<font color='red'  size='6'>" + selecteds.length + "</font>条", "error");
                } else {
                    Edit(selecteds[0].ID, "3");
                }
            });
            //添加
            $('#datagrid-add,#btnAdd').on('click', function () {
                $('#frmAddEdit')[0].reset();
                $('#_ID').val('0');
                $('#AddEdit').window({
                    iconCls: 'icon-add',
                    title: '添加客户'
                }).window('open');
            });
            //单个删除
            $('#datagrid-delete').on('click', function () {
                $.messager.confirm('确认', '是否删除此条数据？', function (r) {
                    if (r) {
                        $.post('@Url.Action("Delete", _ControllerName)', { idList: rowData["RoleID"] },
        function (data) {
            if (data.success) {
                $.messager.alert('提示', data.message, 'info');
                $dg.datagrid('reload');
                $dg.datagrid('clearSelections');
            } else {
                $.messager.alert('错误', data.message, 'error');
            }
        });
                }
                });
            });
            //编辑
            $('#datagrid-edit').on('click', function () {
                Edit(rowData["ID"]);
            });
            //刷新
            $('#datagrid-reload').on('click', function () {
                $dg.datagrid('reload');
            });
            //重置表单
            $('#btnSearchRest').on('click', function () {
                $('#frmSearch')[0].reset();
            });
            //编辑模块
            function Edit(id, status) {
                $.ajaxSetup({ async: false });//关闭异步
                $.get('@Url.Action("Edit", _ControllerName)/' + id, function (data) {
                     $('#frmAddEdit').form('load', data);
                 });
                 if (status == "1") {
                     //打开表单
                     $('#AddEdit').window({
                         iconCls: 'icon-edit',
                         title: '编辑客户信息'
                     }).window('open');
                 }
            //重置表单
            $('#btnRest').on('click', function () {
                $('#frmAddEdit')[0].reset();
            });
            //关系取消表单
            $('#btnClose').on('click', function () {
                $('#frmAuditBrowse')[0].close();
            });
            $('#btnOK').on('click', function () {
                var action = $('#_ID').val() == '0' ? 'Add' : 'Edit';
                if ($('#frmAddEdit').form('validate')) {
                    $.ajax({
                        type: 'post',
                        data: $('#frmAddEdit').serialize(),
                        url: '/@_ControllerName/' + action,
                        success: function (data) {
                            if (data.success) {
                                $.messager.alert('提示', data.message, 'info', function () {
                                    $('#AddEdit').window('close');
                                });
                                $dg.datagrid('reload');
                                $dg.datagrid('clearSelections');
                            } else {
                                $.messager.alert('错误', data.message, 'error');
                            }
                        },
                        error: function () {
                            $.messager.alert('提示', '数据提交失败', 'info');
                        }
                    });
                }
            });
        });
    </script>