ext树形列表

效果

页面

var smDevCat = Ext.create('Ext.selection.CheckboxModel', { mode: 'single'});
var gridDevCat = Ext.create('Ext.tree.Panel', {
    region: 'center',
    margins: '0 3 0 3',
    store: storeDevCat,
    split: true,
    columnLines: true,
    preventHeader: true,
    rootVisible: false,
    selModel: smDevCat,
    dockedItems: [tbar],
    columns: [
        { header: '类别代码', dataIndex: 'udevcatcode',xtype:'treecolumn',sortable:false, titleAlign:'center',width:130 },
        { header: '类别名称', dataIndex: 'udevcatname',  align: 'center',width:130 },
        { header: '父类别代码', dataIndex: 'fudevcatcode',  align: 'center',width:130 },
        { header: '备注', dataIndex: 'note',  align: 'center',width:130 },
        { header: '创建时间', dataIndex: 'createtime',  align: 'center',width:130 },
        { header: '创建人', dataIndex: 'createuserid',  align: 'center',width:130 },
        { header: '记录最后修改时间', dataIndex: 'lastopertime',  align: 'center',width:130 },
        { header: '记录最后修改人', dataIndex: 'lastoperuserid',  align: 'center',width:130 }
    ],
    viewConfig:{
        enableTextSelection:true
    }
});

数据请求

<%=jsjx.smart.web.controller.HomeController.extModel("TUDevCategory", "DevCategoryModel", "createtime,lastopertime")%>
var storeDevCat = Ext.create('Ext.data.TreeStore', {
    autoLoad: true,
    model: 'DevCategoryModel',
    folderSort: false,
    rootProperty:{
        expanded:true
    },
    proxy: {
        type: 'ajax',
        url: 'TUDev/loadTUDevCat',
        reader: {
            type: 'json'
        }
    }
});

后台处理

@RequestMapping("/loadTUDevCat")
public void loadTUDevCat(HttpServletResponse response) {
    Print print = new Print();
    List<TUDevCategory> allUDevCategorys = tuDevService.loadAllUDevCategory();
//加载所有数据，然后过滤出根目录
 List<TUDevCategory> tuDevCategories = allUDevCategorys.stream().filter(x -> x.getFudevcatcode() == null || x.getFudevcatcode().equals("")).collect(Collectors.toList());
    List<Map<String, Object>> rightDataTree = getCateChildren(allUDevCategorys, tuDevCategories);
    print.WriteJson(response, rightDataTree);
}
//根据根目录遍历，查找出子列表，运用递归调用查询子列表的子列表一直查到没有子列表
private List<Map<String, Object>> getCateChildren(List<TUDevCategory> listAll, List<TUDevCategory> pList) {
    List<Map<String, Object>> list = new ArrayList<Map<String,Object>>();
    for (TUDevCategory tuDevCategory : pList) {
        Map<String, Object> child = new HashMap<String, Object>();
        child.put("udevcatcode", tuDevCategory.getUdevcatcode());
        child.put("udevcatname", tuDevCategory.getUdevcatname());
        child.put("fudevcatcode", tuDevCategory.getFudevcatcode());
        child.put("url", tuDevCategory.getUrl());
        child.put("note", tuDevCategory.getNote());
        child.put("createtime", tuDevCategory.getCreatetime());
        child.put("createuserid", tuDevCategory.getCreateuserid());
        child.put("lastopertime", tuDevCategory.getLastopertime());
        child.put("lastoperuserid", tuDevCategory.getLastoperuserid());
        child.put("icon",StringUtils.isNotBlank(tuDevCategory.getUrl()) ? tuDevCategory.getUrl() : "/extjs/icons/fam/cog.png");
        List<TUDevCategory> childList = listAll.stream().filter(x -> x.getFudevcatcode() != null && StringUtils.equals(x.getFudevcatcode(), tuDevCategory.getUdevcatcode())).collect(Collectors.toList());
        if (childList != null) {
            child.put("children", getCateChildren(listAll, childList));
            child.put("leaf", false);
        } else {
            child.put("leaf", true);
        }
        list.add(child);
    }
    return list;
}