1 首先定义gridview id
viewConfig: {
itemId: 'assetTreeView',
markDirty: false
}
2 在Controller里面增加监听函数
"#assetTreeView": {
itemkeydown: this.onAssetTreeViewItemKeydown
}
3 函数实现
onAssetTreeViewItemKeydown: function(dataview, record, item, index, e, eOpts) {
var key = e.getKey();
var nodes = record.childNodes;
var node,length = nodes.length;
if(length === 0){
nodes = record.parentNode.childNodes;
length = nodes.length;
}
if(key>=e.A && key<=e.Z && nodes.length>0){
var initial = String.fromCharCode(key);
var localIndex = 0;
do{
node = nodes[localIndex++];
if(node === record) {
continue;
}
if(node && node.get('name').indexOf(initial.toLowerCase()) === 0){
dataview.select(node);
break;
}
}while(node && node.get('name').indexOf(initial.toLowerCase()) !== 0 && localIndex<=length-1 ||
(node && node.get('name').indexOf(initial.toLowerCase()) === 0 && node === record ));
}
return false;
}
用户在树的上下文按键后可以导航到具体的行(首字母为按键字母),若已经选中会从父节点开始再进行查找。
分享到:
相关推荐
在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中实现树形表格,即TreeGrid。TreeGrid是WPF中的一个高级控件,它结合了树视图(TreeView)和数据网格(DataGrid)的功能,使得我们可以展示...
在本案例中,“treegrid_barku4k_treegrid_jqueryajax_”是一个基于jQuery的TreeGrid实现,主要用于个人备忘,并可供需要此功能的开发者下载使用。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...
在ExtJS中,TreeGrid是通过`Ext.tree.Panel`类实现的,它继承自`Ext.grid.Panel`,增加了树形结构的功能。 在本地数据的例子中,我们通常会用到`Ext.data.TreeStore`来存储和管理数据。TreeStore是ExtJS中的一个...
- 扩展事件:监听展开/折叠、拖拽等事件,实现更多交互功能。 6. 示例代码: 创建一个简单的TreeGrid实例: ```html <table id="demo"></table> layui.use(['treeGrid', 'form'], function(){ var treeGrid...
在IT领域,前端开发是构建用户界面的关键部分,而JeasyUI是一个基于jQuery的轻量级框架,提供了丰富的UI组件,如表格(table)、树形表格(treegrid)等,帮助开发者快速构建美观且功能强大的网页应用。本文将详细...
在ASP.NET页面上,我们需要添加对应的TreeGrid控件,并设置必要的属性。如果是使用JavaScript库,可能需要一个基本的HTML表格结构。 2. **数据绑定** 配置数据源,如SQLDataSource或ObjectDataSource,将数据绑定...
在移动设备上,TreeGrid需要适配不同屏幕尺寸,确保在小屏幕上也能良好展示。这可能涉及到列的折叠、复选框的布局调整等。 9. ** Accessibility** 为了满足无障碍访问需求,TreeGrid应该遵循WCAG(Web Content ...
总结来说,EasyUI的Treegrid扩展是一个强大的工具,它通过增加拖放功能和动态数据生成,使TreeGrid组件变得更加灵活和实用。无论是对于前端开发人员还是最终用户,都能从中受益,提升工作效率和用户体验。理解和掌握...
还可以通过`onExpand`和`onCollapse`事件监听节点的展开和折叠动作。 4. **操作方法** 用户可以通过API进行交互,例如`expandRow`和`collapseRow`用于手动展开或折叠指定行,`toggleRow`则在展开和折叠之间切换。...
8. **响应式设计**:考虑到现代Web应用对移动设备的支持,TreeGrid.js可能也支持响应式布局,确保在不同设备和屏幕尺寸上都能良好显示。 9. **性能优化**:由于表格可能包含大量数据,TreeGrid.js可能采用了懒加载...
在"GridView+Jquery实现的TreeGrid"这个项目中,我们看到的是一个利用这两种技术实现的无刷新TreeGrid。无刷新意味着用户在操作TreeGrid(如展开、折叠节点)时,页面无需重新加载,提高了用户体验。这种实现方式...
2. **treegrid 组件**:layui treegrid 是 layui 中的特殊表格组件,它在普通的表格基础上增加了树状结构,每个行都可以折叠或展开,以显示其子行。这种结构非常适合用于展现具有层级关系的数据,例如组织架构、目录...
而 "kvf-treegrid.js" 则是 JavaScript 文件,包含了实现冻结功能的逻辑代码,可能涉及到事件监听、DOM 操作以及与 EasyUI TreeGrid 的接口集成。 4. **集成到项目**: 使用这个插件,开发者需要将这两个文件引入到...
- **事件处理**:提供了多种事件,如展开/折叠事件,方便开发者在特定操作时执行自定义逻辑。 3. **使用说明** - **引入资源**:在HTML文件中引入 jQuery 库、TreeGrid.js 和 TreeGrid.css 文件。 - **初始化**...
你可以通过监听事件并调用对应的方法来实现这些功能。例如,要手动展开一个节点,可以使用`expandRow`方法: ```javascript $('#treegrid').treegrid('expandRow', {id: '1'}); ``` 6. **扩展功能**: 除了基本...
jqGrid TreeGrid 是一个功能强大的工具,它使得在网页上展示和操作层次化数据变得简单。通过理解其配置选项、动态操作方法以及事件处理,开发者可以创建出符合业务需求的交互式树形表格。在实际项目中,可以根据具体...
TreeGrid是一种特殊的表格展示形式,它结合了树形结构和表格数据的优点,使得在单一的视图中可以同时展示层次关系和多列数据。在Web开发中,TreeGrid常用于组织和显示具有层级关系的数据,如目录结构、组织架构、...
数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('loadData', data); 即可实现,亲测有效 无卡顿 注:无子项的请勿加state...
5. **事件绑定**:通过`.on()`方法绑定TreeGrid的事件,如`click`、`expand`等。 ### 3. 示例代码 ```html <!DOCTYPE html> <title>jQuery TreeGrid 示例 <link rel="stylesheet" href="jquery.treegrid.css...
在实际应用中,开发者可以通过API和事件监听来扩展TreeGrid的功能,实现自定义的交互效果和业务逻辑。由于例子中可能并未包含所有的功能演示,建议参考TreeGrid的官方网站获取完整文档和示例代码,以便更好地理解和...