EasyUI tree的异步加载

在easyui API中可以知道，easyui tree支持树控件的异步加载，用户可以从后台动态获取，返回json数据，来完成异步请求。

1、树的json格式：

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

其中的state可为open或closed，异步加载就是当展开一个封闭的节点时，如果节点没有加载子节点，它将把节点id作为http请求参数并命名为‘id’，在服务器上检索。

2、tree的声明：

1）在html写一个ul：

<ul  id="tree"></ul>

2）js中

$('tree').tree({
      url:'/EasyuiDemo/loadTree'// 本人的项目名为EasyuiDemo
});

3、java代码中

后台实现的就是根据id查找是否有子节点，然后返回数据，写法大同小异，下面是笔者的思路，这里用的是Spring + SpringMVC +Spring JDBCTemplate

1）tree的bean类

public class Tree {
	private String id;//节点
	private String pid;//父节点
	private String text;//显示内容
	private String state;// 是否为封闭节点，即有子节点
	
	public Tree() {
		super();
	}

	public String getId() {
		return id;
	}

	public void setId(String id) {
		this.id = id;
	}


	public String getPid() {
		return pid;
	}

	public void setPid(String pid) {
		this.pid = pid;
	}

	public String getState() {
		return state;
	}

	public void setState(String state) {
		this.state = state;
	}

	@Override
	public String toString() {
		return "Tree [id=" + id + ", pid=" + pid + ", state=" + state + "]";
	}	
}
 
2）controller层

 @Controller
public class treeController{    
    @Autowired
    treeService service;
    @RequestMapping(value="/loadTree")
    public void loadTree(HttpServletRequest request,HttpServletResponse response,String id) throws Exception{
	  response.setCharacterEncodiung("UTF-8");
	  if(id==null){
		id="0";
	  }
	  List list = new ArrayList();
	  list= service.loadTeee(id);
	  response.getWriter().write(new Gson().toJson(list));
   }
}

 
 3）service层

@Service
public treeService {
    @Autowirwd 
    treeDao dao;
    public List  loadTree(String id){
          List<Tree> list = dao.LoadTree(id);
          return list
    }
}

 4) dao层

@Repository
public class treeDao{
       @Autowired
      private  JdbcTemplate template;
      
      public List loadTree(String id){
             String sql = "select * from tree where pid ="+id;
             return template.query(sql ,new TreeRowMapper());
      }
     public int countTree(String id){
             String sql ="select  count(*) from tree where pid = "+id;
             return template.queryForInt(sql);
    }
      class TreeRowMapper implements RowMapper{
              public Object mapRow(ResultSet rs,int arg) throws SQLException             {
                     Tree tree = new Tree()
                     Tree tree = new Tree();
		     tree.setId(rs.getString("id"));
		     tree.setPid(rs.getString("pid"));
		     tree.setText(rs.getString("text"));
		     if(countTree(rs.getString("id"))>0){
		          tree.setState(rs.getString("closed"));
                     } 
		
              }
      }
}

这里的大概意思是，根据id查询其子节点，即sql：”select * from tree where pid“ = id,，让后返回List<Tree>集合，countTree(String id)函数的作用是判断当前节点是否有子节点，有则设置state为closed。

4、数据库

三个字段：id，text，pid

注：数据库中字段名称可以随意命名，但是easyui-tree加载的数据必须是上面的json格式及对应命名

如果这种实现方式不是你想要的，可以参考easyui中文网的这种实现：easyui延迟加载树

由于某原因，不能直接拷贝工作区中的代码，上面的代码是在无编译环境的机器上打的，博客布局和代码排版有点乱，多多见谅。

EasyUI tree的异步加载

猜你喜欢