1. 程式人生 > >Easy-UI Tree的生成

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>