这里的分步加载就是首先自动加载一级数据,当点击展开时再加载下级数据。代码实现如下:
js文件:
xtype : 'treepanel', border : false, store : Ext.create('Ext.data.TreeStore',{ // 自动加载 autoLoad: true, fields: ['id', 'text'], root: {id: 'root', expanded: true}, proxy:{ type:'ajax', url:'?c=Nav&a=load', reader:{ type:'json', root:'data' } } }), rootVisible: false
后台代码,以PHP为例,其他语言类似:
// treepanel,自动加载和点击展开时请求url中的方法 public function load(){ $nm = new NavModel(); $id = param_get('id'); if($id === 'root'){ // js中设置了跟节点的id 为 root,所以,当获取到的 id 为 root 时,获取第一级一级数据 $result = $nm->loadRoot(); }else{ // 当 id 不为root 时,根据 id 获取该节点的下级。本例子中数据中有个parentid字段,根据该字段查找子节点 $result = $nm->loadChildren((int)$id); } success($result); }
下面是Model层,代码:
// 获取根节点数据 public function loadRoot(){ $sql = 'select n_id as `id`, n_name as `text`, n_type, n_level from nav where n_parentid = 0 order by n_order asc'; return DB::fetchAssoc($sql); } // 根据id获取子节点 public function loadChildren($id){ $sql = 'select n_id as `id`, n_name as `text`, n_type, n_level from nav where n_parentid = ? order by n_order asc'; return DB::fetchAssoc($sql, array($id)); }