Easy-UI Treeの生成

ツリー構造におけるcheckbox＝「true」はツリーノードが選択可能であることを示す.

<div id="left">
   <ul id="tt" class="easyui-tree" checkbox="true"></ul>
</div>

    /**
     * 
     *@User   :Test
     *@date   :2014-6-18  03:19:28
     *@return :Object
     *@userFor :  
     */
   public List<Map<String, Object>> queryMenusList(String parentId)
	{
		List<Map<String, Object>> result = new ArrayList<Map<String,Object>>();
		//  
		List<xx> allItem = this.menuDao.queryMenusList(parentId);
		
		for(xx v:allItem)
		{
			Map<String, Object> item = new HashMap<String, Object>();  
			item.put("id", v.getUrl());  
	        item.put("text", v.getName());
                // 
	        item.put("checked", "true");
	        List<xx> childItem = this.menuDao.queryMenusList(v.getEventid()) ;
	        
	        if(childItem.size()>0)
	        {
	        	item.put("state", "closed");  
	            item.put("children", toJsons(childItem)); 
	        }
	        result.add(item);
		}
		return result ;
	}
    public List<Map<String, Object>> toJsons(List<xx> list)
    {
        List<Map<String, Object>> items = new ArrayList<Map<String, Object>>();
        for (int i = 0; i < list.size(); i++)
        {
        	xx bo = (xx) list.get(i);
            Map<String, Object> item = new HashMap<String, Object>();
            item.put("id", bo.getUrl());
            item.put("text",bo.getName() );
            List<xx> temps = this.menuDao.queryMenusList(bo.getEventid());
            if (temps.size() > 0)
            {
                item.put("state", "closed");
                item.put("children", toJsons(temps));
            }
            items.add(item);
        }
        return items;
    }

選択した値の取得方法

var node = $('#tt').tree('getChecked'); 
// id 
for(var i=0;i<node.length;i++){
   ids+=node[i].id+",";	         
}

Jsロードバックグラウンド

$('#tt').tree({
      url:'./getLeftTree.do?treeHasClient=yes',
      onCheck:function(node){
            
                 },
       //  e.pageX 
       onContextMenu:function(e,node){
           $('#mm').menu('show', {
	        left: e.pageX,
		top: e.pageY
	    });
                 },
        // 
	onDblClick:function(node){
                    
		}
             })

//右クリックメニュー

<div id="mm" class="easyui-menu" style="width:100px;">  
     <div herf="#" onclick="xx()">Test1</div>  
     <div herf="#" onclick="xx()">Test2</div>  
     <div herf="#" onclick="xx()">Test3</div>
     <div herf="#" onclick="xx()">Test4</div>
</div>