用json数据模拟后端传回来的结果，Extjs tree支持两种类型的结构，一种是带children属性的嵌套式的数据，一种是扁平的，每条记录带pid的数据，带pid的添加配置项可以自动解析成树形结构。
{
"text": "根目录",
"children": [
{
"id": "1",
"name": "基础设置",
"children": [
{
"id": "1-1",
"name": "部门档案",
"total": 3,
"children": [
{
"id": "1-1-1",
"name": "增加部门",
"nd": "1"
}, {
"id": "1-1-2",
"name": "修改部门"
}
]
}, {
"id": "1-2",
"name": "客户档案",
"nd": "2",
"total": 1,
"children": [
{
"id": "1-2-1",
"name": "增加客户"
}, {
"id": "1-2-2",
"name": "客户设置"
}
]
}
]
}, {
"id": "2",
"name": "综合业务",
"children": [
{
"id": "2-1",
"name": "凭证",
"nd": "1",
"total": 3,
"children": [
{
"id": "2-1-1",
"name": "填制凭证"
}, {
"id": "2-1-2",
"name": "凭证审核"
}
]
}, {
"id": "2-2",
"name": "采购",
"nd": "3",
"total": 1,
"children": [
{
"id": "2-2-1",
"name": "采购订单"
}, {
"id": "2-2-2",
"name": "采购结算"
}
]
}
]
}
]
}
Tree grid代码
Ext.require([ 'Ext.form.*', 'Ext.tip.QuickTipManager' ]);
Ext.onReady(function() {
Ext.define('myTreeModel', {
extend : 'Ext.data.Model',
idProperty: 'id',
fields : [
{name : 'id'},
{name : 'name'},
{name : 'nd'},
{name : 'total'},
]
});
// tree组件要求数据的叶子节点必须有leaf=true，此函数递归tree数据检查和自动添加leaf=true
function recursiveSetLeaf(treeNode) {
if (treeNode.children) {
console.log('当前节点有children');
Ext.each(treeNode.children, function(child){
recursiveSetLeaf(child);
});
} else {
console.log('当前节点为末级节点');
treeNode.leaf = true;
}
}
// 创建grid
var sdPaperRules = Ext.create('Ext.tree.Panel', {
id : "sdPaperRules",
store : new Ext.data.TreeStore({
model: "myTreeModel",
proxy: {
type: 'ajax',
url: '/exam_admin/admin/service/gkpapers_rule/tree_grid_test.json',
extractResponseData(response) {
// 非pid
/**
* 如果是扁平的带pid的记录，可参考
* http://t.zoukankan.com/love-omnus-p-4196603.html
*
*/
// var json = Ext.loadFilter(Ext.JSON.decode(response.responseText),{parentField : 'pid'});
console.log('response', response);
var rootNode = Ext.JSON.decode(response.responseText);
recursiveSetLeaf(rootNode);
response.responseText = Ext.JSON.encode(rootNode);
return response
},
},
folderSort: true
}),// 指定数据源
// 可编辑单元格插件，配置此插件后就可以在列配置中启用列的编辑
plugins: Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1,
}),
viewConfig: {
// 给表格行添加样式
getRowClass(record, rowIndex, rowParams, store){
if (rowIndex % 2 !== 0) {
return "treegrid-row-style-even"; // 给偶数行设置样式
}
}
},
autoScroll : true,
bodyStyle : 'overflow-x:auto; overflow-y:auto',
autoHeight : true,
autoWidth : true,
rootVisible: false,
// border : true,
columns : [
{
xtype : 'treecolumn',
text : "功能点",
width : 250,
dataIndex : 'name',
headersDisabled : true,
menuDisabled : true,
editable: false
},
{
dataIndex: 'nd',
text: '难度',
width : 250,
// flex: 1,
align: 'left',
headersDisabled : true,
menuDisabled : true,
renderer(value, metaData, record, rowIndex, colIndex, store, view) {
if (!value) return;
var html = '';
html += `<div style="display:flex;justify-content: flex-start;align-items: center;">`;
var radioOptions = [{ "value": "1", "label": "简单" }, { "value": "2", "label": "普通" }, { "value": "3", "label": "困难" }];
for (option of radioOptions) {
// console.log('option', option);
var checked = option.value == value ? `checked='checked'` : '';
var name = "grid_column_radio_" + record.data.id;
var domId = 'radio_' + record.data.id + '_' + option.value;
html += `<div style="display:flex;justify-content: center;align-items: center;margin-right:16px;">`;
html += ` <input id="${domId}" name='${name}' type='radio' ${checked} value='${option.value}'/>`;
html += ` <label for="${domId}"> ${option.label}</label>`;
html += `</div>`;
}
html += `</div>`;
return html;
}
},
{
text : "数量",
width : 100,
dataIndex : 'total',
headersDisabled : true,
menuDisabled : true,
border: 1,
editor : {
xtype : 'textfield'
}
}
],
listeners: {
beforeitemcollapse() {
console.log('beforeitemcollapse');
return false; // 禁止收缩节点
},
itemclick(treePanel, record, rowTag, rowIndex, event) {
// 处理单选按钮选择事件
var radio = event.getTarget('input[type="radio"]');
if (radio) {
console.log('要更改的nd', radio.value);
record.set({nd: radio.value});
}
},
beforeedit(treePanel, cell, events) {
console.log('record', cell.record.data);
if (!cell.record.data.nd) { // 如果当前节点没有难度设置，则禁止编辑
return false;
}
}
},
bbar : Ext.create("Ext.toolbar.Toolbar", {
items: [
{
xtype: 'button',
text: '获取结果数据',
handler() {
getTreeGridData(sdPaperRules.getRootNode());
// console.log('1:1', sdPaperRules.getView().getCell(1, 1));
// Ext.encode(record.data)
// 好像grid有个dirty属性，判断修改过没有，可以把有修改的record过滤出来
}
},
{
xtype : 'tbtext',
text: 'test...<span style="color:red;">lsdjfoiej</span>'
}
]
})
});
window.getTreeGridData = function(node) {
// console.log('node', node);
if (node.data.nd) {
console.log('nd', node.data.nd)
}
if (node.childNodes) {
for (n of node.childNodes) {
getTreeGridData(n);
}
}
}
// 获得当前选中的tab，下面将向这个tab添加模块组件
var tab = Ext.getCmp("treeGridTest");
// 展开所有节点
sdPaperRules.expandAll();
// 向tab里添加一个按钮
tab.add(sdPaperRules);
});
由于Extjs的Tree组件和grid结合的话，默认情况数据行没有样式，在多列情况下，不易区分当前单元格属于哪一样。因此需要添加全局样式控制补充效果。
.treegrid-row-style-even .x-grid-cell {
border-top: 1px solid #ededed;
border-bottom: 1px solid #ededed;
background-color: #fafafa;
}
.treegrid-row-style-even:hover .x-grid-cell {
background-color: #ededed;
}
标签：name,示例,nd,Tree,children,获取数据,Ext,true,id From： https://www.cnblogs.com/jsper/p/16971345.html