`
jobar
  • 浏览: 346910 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在TreeGrid上增加键盘监听事件

 
阅读更多
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;
    }


用户在树的上下文按键后可以导航到具体的行(首字母为按键字母),若已经选中会从父节点开始再进行查找。
分享到:
评论

相关推荐

    treegrid.zip_treeGrid wpf_treegrid_treegrid wpf c#_wpf 树状表格_wpf树

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中实现树形表格,即TreeGrid。TreeGrid是WPF中的一个高级控件,它结合了树视图(TreeView)和数据网格(DataGrid)的功能,使得我们可以展示...

    treegrid_barku4k_treegrid_jqueryajax_

    在本案例中,“treegrid_barku4k_treegrid_jqueryajax_”是一个基于jQuery的TreeGrid实现,主要用于个人备忘,并可供需要此功能的开发者下载使用。 jQuery是一个广泛使用的JavaScript库,它简化了HTML文档遍历、...

    Extjs treeGrid 本地数据 例子

    在ExtJS中,TreeGrid是通过`Ext.tree.Panel`类实现的,它继承自`Ext.grid.Panel`,增加了树形结构的功能。 在本地数据的例子中,我们通常会用到`Ext.data.TreeStore`来存储和管理数据。TreeStore是ExtJS中的一个...

    基于layui的树表格-treeGrid

    - 扩展事件:监听展开/折叠、拖拽等事件,实现更多交互功能。 6. 示例代码: 创建一个简单的TreeGrid实例: ```html &lt;table id="demo"&gt;&lt;/table&gt; layui.use(['treeGrid', 'form'], function(){ var treeGrid...

    Jeasyui treegrid插件实现同级分类上下移动效果(终版)

    在IT领域,前端开发是构建用户界面的关键部分,而JeasyUI是一个基于jQuery的轻量级框架,提供了丰富的UI组件,如表格(table)、树形表格(treegrid)等,帮助开发者快速构建美观且功能强大的网页应用。本文将详细...

    TreeGrid 在Asp.net中实现的实例

    在ASP.NET页面上,我们需要添加对应的TreeGrid控件,并设置必要的属性。如果是使用JavaScript库,可能需要一个基本的HTML表格结构。 2. **数据绑定** 配置数据源,如SQLDataSource或ObjectDataSource,将数据绑定...

    带复选框的TreeGrid

    在移动设备上,TreeGrid需要适配不同屏幕尺寸,确保在小屏幕上也能良好展示。这可能涉及到列的折叠、复选框的布局调整等。 9. ** Accessibility** 为了满足无障碍访问需求,TreeGrid应该遵循WCAG(Web Content ...

    easyui的Treegrid扩展

    总结来说,EasyUI的Treegrid扩展是一个强大的工具,它通过增加拖放功能和动态数据生成,使TreeGrid组件变得更加灵活和实用。无论是对于前端开发人员还是最终用户,都能从中受益,提升工作效率和用户体验。理解和掌握...

    boostrapTable Treegrid树表格

    还可以通过`onExpand`和`onCollapse`事件监听节点的展开和折叠动作。 4. **操作方法** 用户可以通过API进行交互,例如`expandRow`和`collapseRow`用于手动展开或折叠指定行,`toggleRow`则在展开和折叠之间切换。...

    TreeGrid.js 表格树插件

    8. **响应式设计**:考虑到现代Web应用对移动设备的支持,TreeGrid.js可能也支持响应式布局,确保在不同设备和屏幕尺寸上都能良好显示。 9. **性能优化**:由于表格可能包含大量数据,TreeGrid.js可能采用了懒加载...

    GridView+Jquery实现的TreeGrid

    在"GridView+Jquery实现的TreeGrid"这个项目中,我们看到的是一个利用这两种技术实现的无刷新TreeGrid。无刷新意味着用户在操作TreeGrid(如展开、折叠节点)时,页面无需重新加载,提高了用户体验。这种实现方式...

    layui treegrid 分页

    2. **treegrid 组件**:layui treegrid 是 layui 中的特殊表格组件,它在普通的表格基础上增加了树状结构,每个行都可以折叠或展开,以显示其子行。这种结构非常适合用于展现具有层级关系的数据,例如组织架构、目录...

    easyui-treegrid冻结右侧列插件.zip

    而 "kvf-treegrid.js" 则是 JavaScript 文件,包含了实现冻结功能的逻辑代码,可能涉及到事件监听、DOM 操作以及与 EasyUI TreeGrid 的接口集成。 4. **集成到项目**: 使用这个插件,开发者需要将这两个文件引入到...

    JQuery TreeGrid(表格)

    - **事件处理**:提供了多种事件,如展开/折叠事件,方便开发者在特定操作时执行自定义逻辑。 3. **使用说明** - **引入资源**:在HTML文件中引入 jQuery 库、TreeGrid.js 和 TreeGrid.css 文件。 - **初始化**...

    jeasyui-treegrid实现例子

    你可以通过监听事件并调用对应的方法来实现这些功能。例如,要手动展开一个节点,可以使用`expandRow`方法: ```javascript $('#treegrid').treegrid('expandRow', {id: '1'}); ``` 6. **扩展功能**: 除了基本...

    jqgrid 的treegrid用法

    jqGrid TreeGrid 是一个功能强大的工具,它使得在网页上展示和操作层次化数据变得简单。通过理解其配置选项、动态操作方法以及事件处理,开发者可以创建出符合业务需求的交互式树形表格。在实际项目中,可以根据具体...

    很实用的treegrid

    TreeGrid是一种特殊的表格展示形式,它结合了树形结构和表格数据的优点,使得在单一的视图中可以同时展示层次关系和多列数据。在Web开发中,TreeGrid常用于组织和显示具有层级关系的数据,如目录结构、组织架构、...

    解决 easyui treegrid 批量展开和关闭卡顿问题。

    数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载的data数据中的state属性变更,再重新执行 $('#tg').treegrid('loadData', data); 即可实现,亲测有效 无卡顿 注:无子项的请勿加state...

    jquery-treegrid 树形表格组件

    5. **事件绑定**:通过`.on()`方法绑定TreeGrid的事件,如`click`、`expand`等。 ### 3. 示例代码 ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery TreeGrid 示例 &lt;link rel="stylesheet" href="jquery.treegrid.css...

    TreeGrid

    在实际应用中,开发者可以通过API和事件监听来扩展TreeGrid的功能,实现自定义的交互效果和业务逻辑。由于例子中可能并未包含所有的功能演示,建议参考TreeGrid的官方网站获取完整文档和示例代码,以便更好地理解和...

Global site tag (gtag.js) - Google Analytics