在项目中用到easyui，页面布局用的是easyiui 的树形菜单tree+选项卡 tabs控件，点击左边的tree，可以创建新的tab。
现在有一个需求，就是在双击datagrid中的数据行时，要创建新的tab，以便将数据行的详细内容显示到新tab中。
目前的问题是，easyui的tabs创建的选项卡是通过创建iframe的方式创建的，即$('#centerTab').tabs('add', )。
在datagrid中，不能拿到tabs的div容器（包含所有创建的选项卡），这里是“centerTab”。
火狐下查看easyui创建tab的DOM如下：
怎么实现双击datagrid的数据行，创建新选项卡呢？
问题补充：现在我有一种实现的方案：
var content = '<div></div>';
$('#centerTab').tabs('add',{
href:url,
title:title,
style:{background:'#DFE8F6'},
fit:true,
content:content,
closable:true,
closed: true
});
}
href为要创建tab的url（可以是一个action，也可以是一个jsp），然后创建的tan放入新添加的一个div中。
但又有一个新的问题，通过这种方式创建的tab页面中，不能有相同的id，table，div，form的id都不能相同。
举个例子，如果两个页面有都有toolbar工具栏且id都一样，后面创建的页面中就会出现两个toolbar，不知道是不是缓存影响的。
如果这样的话，那每个页面的id都不能相同了，o，my god！一个工程中那么多页面，况且还是由不同的人写的，天知道会不会有重复的页面。
1条评论
关注(0)
相关推荐
综上所述，利用EasyUI的DataGrid组件，我们可以方便地实现数据的行合并和总价计算，从而创建出功能完善的表格展示。理解并熟练运用这些功能，能够提升Web应用的用户体验，使数据展示更加清晰、直观。
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
在IT行业中，EasyUI Datagrid是一款基于jQuery的前端数据展示组件，它提供了丰富的表格功能，如排序、分页、过滤等。在实际工作中，我们经常需要将这些展示的数据导出到Excel文件，以便进行进一步的分析或存储。下面...
easyui的datagrid的数据渲染
本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的效果，这对于在数据录入时需要根据上一级选择动态更新下一级选项的情况非常有用，比如在本例中的“老师分类”和“老师细类”。...
### easyui的datagrid数据excel导出 #### 一、知识点概览 1. **EasyUI框架简介** 2. **DataGrid组件概述** 3. **DataGrid的列配置** 4. **将DataGrid转换为表格（Table）结构** 5. **导出至Excel的具体实现** 6. *...
EasyUI的DataGrid是一款基于jQuery的轻量级前端数据展示组件，它被广泛应用于Web应用中，用于展示和操作结构化的数据。在结合ASP.NET框架时，DataGrid能有效地将服务器端的数据动态地呈现到客户端，提供排序、分页、...
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
在IT领域，尤其是在Web开发中，EasyUI是一个广泛使用的JavaScript框架，它基于jQuery，提供了丰富的UI组件，如Datagrid，用于构建数据展示和管理的表格。在本篇中，我们将深入探讨如何在EasyUI的Datagrid中实现行...
标题“easyui datagrid表格打印”关注的就是如何解决这个问题，即如何将经过formatter处理后的数据在打印时保持原有的格式。 在描述中提到的“支持formatter格式化数据的打印”，指的是Datagrid中用于数据美化和...
可以通过`clear`方法清空原来的选项，然后使用`loadData`方法加载新的数据。 - 如果使用了`datagrid`的行内编辑功能，则需要注意`index`参数的正确性。文中提到的第一种方法更为推荐，因为它避免了由于`index`计算...
在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能，帮助用户更高效地查找和管理表格中的信息。 首先，`datagrid-filter.js` 文件很可能包含了实现过滤...
### 解决EasyUI dataGrid列较多时无数据显示不全的问题 在使用EasyUI框架进行前端开发的过程中，可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验，也降低了系统的可用性。本文将详细...
在本示例中，我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能：当鼠标悬停在某一行时，弹出一个窗口显示该行的关键信息，例如用于图片预览。以下是对这个知识点的详细解释： 1. **EasyUI Datagrid**： ...
"easyui-datagrid 之间拖拽效果 demo" 重点展示了如何在两个 EasyUI Datagrid 之间实现数据的拖放功能，这对于提升用户体验，尤其是处理大量数据时的交互性至关重要。 首先，Datagrid 是 EasyUI 提供的一种表格控件...
easyUI中datagrid鼠标悬浮显示图片，博客地址：https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501
UI设计在一个系统中的重要性是不容忽视的，我们开发人员要做到：让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865
Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件，常用于表格数据的展示和操作，支持分页、排序、过滤、编辑等功能。通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行...
EasyUI则是一个轻量级的前端框架，常用于构建用户界面，而datagrid是EasyUI中的一个组件，用于展示数据表格，提供了丰富的数据操作功能。本教程将深入讲解如何在Spring Boot项目中集成EasyUI的datagrid，以实现高效...