取选择行的ID

本文介绍了如何在ExtJS中通过GridPanel和TreePanel的事件监听器获取选中行和节点的数据,包括使用GridPanel的`getSelections()`方法和TreePanel的`click`事件来获取选中项的ID。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

例子一:

现在我们有一个GridPanel,展示的列表数据,现在我们想点击其中一行获得选中行的ID。首先,我们想到的就是在GridPanel中添加一个监听事件

<Listeners><RowClick Fn="SelectFn" /></Listeners>

JS的函数SelectFn中就需要写代码了。点击了一行就是选中了这行,然后我们就利用ExtJSAPI,找到GridPanel部分,我们去找方法,是否有可以获得选中行的数据的类似方法。结果我们可以发现有以下这一种方法:

35.getSelectionModel() : SelectionModel

Returns the grid's selection model configured by the selModel configuration option. If no selection model was config...Returns the grid's selection model configured by the selModel configuration option. If no selection model was configured, this will create and return a RowSelectionModel.

参数:None

返回:SelectionModel

继续查找,在ExtJSgrid目录下面我们发现有19.RowSelectionModel,我们查看下这个类下面会有什么方法,结果我们找到了方法:

12.getSelections() : Array

Returns the selected records

参数:None

返回:Array of select records

很明显这就是我们要找的方法,该方法返回了选中的数据的数组。

获取到了records数据。这时候JS函数SelectFn可以这么写:

function SelectFn() {

    //获取选中行的所有记录

var records = GridPanelEmployeeInfo.getSelectionModel().getSelections();

}

然后试着调试程序,我们将发现

最后我们就找到了自己想要的ID

//选择行时

function SelectFn() {

    //获取选中行的ID

    var records = GridPanelEmployeeInfo.getSelectionModel().getSelections();

    var employeeID = records[0].data.ID;

}

 

晕:上面的解法太TM复杂了,明显可以直接这样,查看GridPanel的的ExtJS的监听点击事件发现如下:

40.rowselect: ( SelectionModel this, Number rowIndex, Ext.data.Record r )

Fires when a row is selected.

参数分别就是this,行号,还有record

所以JS我们可以直接这样写:

//选择行时,按钮亮起

function SelectFn(selectionModel, rowIndex, record) {

    //获取选中行的ID

    employeeID = record.data.ID;

}

 

一步到位,方便简洁。

也可以先找到Store然后用Store里的根据行号获得record的方法

//获取选中行的数据

 var records = GridPanelEmployeeInfo.getStore().getAt(rowIndex);

 employeeID = record.data.ID;

 

例子二:

现在有一棵树,我们要在点击树节点的时候获取点击的ID,首先我们查找ExtJSAPI,在TreePanel的事件中,我们发现了以下事件:

102. click: ( Node node, Ext.EventObject e )

Fires when a node is clicked,Listeners will be called with the following arguments:

nodeNodeThe node

eExt.EventObject

我们可以发现该事件的参数有两个,第一个就是点击的节点!

然后我们查看TreeNodeAPI,发现有属性id。因此代码也就出来了,先在前台的TreePanel中添加监听点击事件

<Listeners>Click Fn="clickNode" /></Listeners>

然后在JS中的方法如下:

//点击树节点

function clickNode(node, e) {

    var departmentid = node.id;  //点击节点的ID

}
《Tecplot与MIKE结合教程》是一份详细介绍如何将Tecplot与MIKE软件进协同工作的学习资料。这份教程旨在帮助用户理解并掌握这两款强大的科学计算与数据可视化工具的整合应用,从而提高在流体动力学、环境工程、海洋科学等领域的模拟分析效率。 Tecplot是一款广泛应用于科研和工程领域的数据可视化和分析软件,它能够处理大量数据,快速生成高质量的2D和3D图形,便于用户理解和解释复杂的数值模拟结果。其强大的后处理能力,如等值线绘制、颜色梯度图、矢量场显示等功能,使得数据的呈现更加直观。 MIKE(原名DHI软件)是由丹麦水力研究所开发的一系列专业仿真软件,主要用于水资源管理、环境流动、海岸工程等领域。MIKE软件家族包括MIKE 11(河流模拟)、MIKE 21(海洋模型)、MIKE 3(三维流体动力学模型)等,可以解决从河流、湖泊到海洋的各类水动力问题。 当Tecplot与MIKE结合使用时,Tecplot作为后处理器,可以接收MIKE软件产生的计算结果,进更深入的数据解析和可视化。通过这种方式,用户不仅可以查看MIKE模拟出的流场、浓度分布等数据,还能进多变量分析、动画制作,以及生成专业报告所需的图表,极大地提高了数据分析的效率和质量。 教程中可能会涵盖以下内容: 1. **数据导入**:讲解如何从MIKE软件导出适合Tecplot处理的文件格式,如ASCII或二进制文件。 2. **Tecplot界面操作**:介绍Tecplot的基本操作,如数据加载、变量选择、区域定义等。 3. **数据可视化**:教学如何使用Tecplot创建等值线图、颜色梯度图、矢量图等,以及调整色彩映射、透明度等参数,以清晰地展示MIKE的模拟结果。 4. **动画制作**:说明如何通过Tecplot制作时间序列动画,动态展示流动过程。 5. **高级分析**:可能涉及统计分析、插值运算、剖面图绘制等高级功能,帮助用户深入理解模拟数据。 6. **定制化和脚本编程**:介绍如何利用Tecplot的内置脚本语言(如TecScript或Python)自动化处理MIKE数据,进批量分析或自定义功能的实现。 7. **案例研究**:提供实际案例,演示Tecplot与MIKE结合的具体应用,如河流污染扩散分析、海岸线变化模拟等。 通过学习这份教程,用户将能够熟练地将Tecplot与MIKE结合使用,提升在复杂水动力问题上的建模和分析能力,为科学研究和工程决策提供有力支持。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值