Extjs4.0 实现 checkTree 选中一行是,复选框选中
JSON数据
[{ "text": "To Do", "cls": "folder", "expanded": true, "children": [{ "id":"test1", "text": "Go jogging", "leaf": true, "checked": true },{ "id":"test2", "text": "Take a nap", "leaf": true, "checked": false },{ "id":"test3", "text": "Climb Everest", "leaf": true, "checked": false }] },{ "text": "Grocery List", "cls": "folder", "children": [{ "text": "Bananas", "leaf": true, "checked": false },{ "text": "Milk", "leaf": true, "checked": false },{ "text": "Cereal", "leaf": true, "checked": false },{ "text": "Energy foods", "cls": "folder", "children": [{ "text": "Coffee", "leaf": true, "checked": false },{ "text": "Red Bull", "leaf": true, "checked": false }] }] },{ "text": "Remodel Project", "cls": "folder", "children": [{ "text": "Finish the budget", "leaf": true, "checked": false },{ "text": "Call contractors", "leaf": true, "checked": false },{ "text": "Choose design", "leaf": true, "checked": false }] }]
treeJs
Ext.require([ 'Ext.tree.*', 'Ext.data.*', 'Ext.window.MessageBox' ]); Ext.onReady(function() { var store = Ext.create('Ext.data.TreeStore', { proxy: { type: 'ajax', url: 'check-nodes.json' }, sorters: [{ property: 'leaf', direction: 'ASC' }, { property: 'text', direction: 'ASC' }] }); var tree = Ext.create('Ext.tree.Panel', { store: store, rootVisible: false, useArrows: true, frame: true, title: 'Check Tree', renderTo: 'tree-div', width: 200, height: 250, dockedItems: [{ xtype: 'toolbar', items: { text: 'Get checked nodes', handler: function(){ var records = tree.getView().getChecked(), names = []; Ext.Array.each(records, function(rec){ names.push(rec.get('text')); }); Ext.MessageBox.show({ title: 'Selected Nodes', msg: names.join('<br />'), icon: Ext.MessageBox.INFO }); } } }], listeners: { itemclick: function (view, record, index, e) { var id = record.get("id"); var node = store.getNodeById(id); if (node.data.checked != null) { if (node.data.checked) { return; //节点已选中,则返回 } else { node.set('checked', true); //设置节点选中 } } //找到根节点 var rootNode = tree.getRootNode(); var childNodes = rootNode.childNodes; this.changeChecked(childNodes, node); //遍历根节点,将其他节点复选框checked设置为false } }, changeChecked:function(childNodes,node) { for (var i = 0; i < childNodes.length;i++) { if (childNodes[i] == node) { continue; } else { if (childNodes[i].data.checked != null) { childNodes[i].set('checked', false); } } if (childNodes[i].childNodes.length > 0) { this.changeChecked(childNodes[i].childNodes,node); } } } }); });
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决