EasyUI 的tree 空间展示

异步树控件:

树控件内建异步加载模式的支持,用户先创建一个空的树,然后指定 一个服务器端没执行检索后动态返回JSON数据来填充树并完成异步请求。


下面一个例子展示商品类型树;

表结构如下:

CREATE TABLE `tb_item_cat` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '类目ID',
  `parent_id` bigint(20) DEFAULT NULL COMMENT '父类目ID=0时,代表的是一级的类目',
  `name` varchar(50) DEFAULT NULL COMMENT '类目名称',
  `status` int(1) DEFAULT '1' COMMENT '状态。可选值:1(正常),2(删除)',
  `sort_order` int(4) DEFAULT NULL COMMENT '排列序号,表示同级类目的展现次序,如数值相等则按名称次序排列。取值范围:大于零的整数',
  `is_parent` tinyint(1) DEFAULT '1' COMMENT '该类目是否为父类目,1为true,0为false',
  `created` datetime DEFAULT NULL COMMENT '创建时间',
  `updated` datetime DEFAULT NULL COMMENT '创建时间',
  PRIMARY KEY (`id`),
  KEY `parent_id` (`parent_id`,`status`) USING BTREE,
  KEY `sort_order` (`sort_order`)
) ENGINE=InnoDB AUTO_INCREMENT=1183 DEFAULT CHARSET=utf8 COMMENT='商品类目';

初始化树的请求的url: /item/cat/list

参数:

初始化tree时,只需要把第一级节点展示,子节点异步加载。

long id(父节点id)

返回值: json 。数据格式如下:

[{    

    "id": 1,    

    "text": "Node 1",    

    "state": "closed"

},{    

    "id": 2,    

    "text": "Node 2",    

    "state": "closed"   

}]
state:如果节点下有子节点“closed”,如果没有子节点“open

创建一个pojo来描述tree的节点信息,包含三个属性idtextstate

public class EasyUITreeNode implements Serializable{

 

private long id;

private String text;

private String state;

public long getId() {

return id;

}

public void setId(long id) {

this.id = id;

}

public String getText() {

return text;

}

public void setText(String text) {

this.text = text;

}

public String getState() {

return state;

}

public void setState(String state) {

this.state = state;

}

}

查询的表:

tb_item_cat

查询列:

Idnameisparent

查询条件parentId

service处理:

@Override
	public List<EasyUITreeNode> getCatList(long parentId) {
		// 1、根据parentId查询节点列表
		TbItemCatExample example = new TbItemCatExample();
		//设置查询条件
		Criteria criteria = example.createCriteria();
		criteria.andParentIdEqualTo(parentId);
		List<TbItemCat> list = itemCatMapper.selectByExample(example);
		// 2、转换成EasyUITreeNode列表。
		List<EasyUITreeNode> resultList = new ArrayList<>();
		for (TbItemCat tbItemCat : list) {
			EasyUITreeNode node = new EasyUITreeNode();
			node.setId(tbItemCat.getId());
			node.setText(tbItemCat.getName());
			node.setState(tbItemCat.getIsParent()?"closed":"open");
			//添加到列表
			resultList.add(node);
		}
		// 3、返回。
		return resultList;
	}

}

猜你喜欢

转载自blog.csdn.net/fd2025/article/details/80323030