1. 程式人生 > >easyui樹外掛的使用與佈局

easyui樹外掛的使用與佈局

easyui樹外掛

[{    
    "id":1,    
    "text":"Folder1",    
    "iconCls":"icon-save",    
    "children":[{    
        "text":"File1",    
        "checked":true   
    },{    
        "text":"Books",    
        "state":"open",    
        "attributes":{    
            "url":"/demo/book/abc",    
            "price":100    
        },    
        "children":[{    
            "text":"PhotoShop",    
            "checked":true   
        },{    
            "id": 8,    
            "text":"Sub Bookds",    
            "state":"closed"   
        }]    
    }]    
},{    
    "text":"Languages",    
    "state":"closed",    
    "children":[{    
        "text":"Java"   
    },{    
        "text":"C#"   
    }]    
}] 

佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>部門</title>
    <script src="/Scripts/cnten.Loader.js"></script>
</head>
<body class="">
    <div class="easyui-layout" style="width: 100%;height: 100%">
        <!--左右佈局,左樹,右列表-->
        <div id="pageloadingright" class="pageloadingright">
        </div>
        <div id="pageloading" class="pageloading">
            <div class="loader-inner">
            </div>
        </div>
        <div data-options="region:'west',border:false" style="width: 200px">
            <div class="easyui-panel" style="height: 100%">
                <ul id="streettree"></ul>
            </div>
        </div>
        <div data-options="region:'center'" style="border: 0; padding-left: 5px; padding-right: 3px">
        <div data-options="region:'north',border:false" style="padding-left: 5px">
            <div class="search-panel">
                <!--查詢引數放到 from 中-->
                <form id="search_form" method="post">
                	<input type="hidden" data-query="type:'eq'" name="id" id="id">
                	<input type="hidden" data-query="type:'eq'" name="streetTown" id="streetTown">
                    <table class="search-table">
                        <tr>
                            <td>
                                <input data-query="type:'ge'" id="tagTime" name="tagTime" class="easyui-my97"
                                       data-options='editable:false,labelPosition:"left",label:"採集時間"'
                                       style="width: 180px" />&nbsp;至&nbsp;
                                <input data-query="type:'le',filed:'tagTime_2'"
                                       id="tagTime_2" name="tagTime_2" class="easyui-my97"
                                       data-options='editable:false' style="width: 115px" />

                            </td>
                            <td>
                                <button type="button" class="btn btn-primary" id="btnquery">
                                    <i class="glyphicon glyphicon-search"></i>
                                    <span>查詢</span>
                                </button>
                                <button type="button" class="btn btn-primary" id="btnreset">
                                    <i class="glyphicon glyphicon-refresh"></i>
                                    <span>重置</span>
                                </button>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
        <div data-options="region:'center'" style="border: 0; padding-left: 5px; padding-right: 3px">
            <table id="dglist" style="width: 100%;">
            </table>
            <div style="height:360px;">
            
            </div>
        </div>
      </div>  
    </div>
</body>
</html>

<script>
var $streettree = $("#streettree");
var $dg = $("#dglist");
$streettree.tree({
    url: 'security/area/getStreetTree',
    method: 'GET',
    loadFilter: function (data, parent) {
    	//debugger;
        return data.data;
    },
    onSelect: function (node) {
        //console.log(node);
        debugger; 
        var flag = node.flag;
        var id = node.id;
        var idNode = "";
        if(flag.length>0&&flag=="1"&&id!="-1"){
        	idNode = node.id;
        	$("#streetTown").val(idNode);
        	$("#id").val("");
        }
        if(flag.length>0&&flag=="0"){
        	idNode = node.id;
        	$("#id").val(idNode);
        	$("#streetTown").val("");
        }
        if(flag.length>0&&flag=="1"&&id=="-1"){
        	idNode = node.id;
        	$("#id").val("");
        	$("#streetTown").val("");
        }
      /*$.ajaxSettings.async = false;
        $.post("alter/hismonitor/query",{"querystr":querystr},function(data) {
        }); */
        $dg.datagrid("load");        
    }

}); 

    $(function(){
    	//頁面載入完畢的事件
        $Core.OnPageLoad(function () {
            $Core.Loading.HidePageLoading();
        });
    });
</script>

後臺資料交換

@Table(name = "se_area")
public class Area {
	@Id
	private Integer areaId;
	private Integer parentId;
	private String areaName;
	private Double longitude;
	private Double latitude;
	private Integer level;
}
	@Override
	public List<Map<String, Object>> getHistorymonitory() {
		// TODO Auto-generated method stub
		List<Map<String, Object>> treeNodes = new ArrayList<Map<String, Object>>();
		Map<String, Object> rtnNode = new HashMap<String, Object>();
		List<Map<String, Object>> rtnNodes = new ArrayList<Map<String, Object>>();
		Area area = new Area();
		area.setLevel(3);
		List<Area> areaList = mapper.select(area);
	    for(Area areas : areaList) {
	    	List<Map<String, Object>> childrens = new ArrayList<Map<String, Object>>();	
	    	Map<String, Object> treeNode = new HashMap<String, Object>();
	    	treeNode.put("id", areas.getAreaId());
	    	treeNode.put("text", areas.getAreaName());
	    	treeNode.put("flag", "1");
	    	/*查詢街道對應的使用者*/
	    	List<PublicServicesUser> idByStreet = publicServicesUserService.getIdByStreet(areas.getAreaId());
	    	
	    	/*PublicServicesUser publicServicesUser = new PublicServicesUser();
	    	publicServicesUser.setStreetTown(areas.getAreaId().toString());
	    	List<PublicServicesUser> select = publicServicesUserMapper.select(publicServicesUser);*/
	    	
	    	for(PublicServicesUser users:idByStreet) {
	    		Map<String, Object> children = new HashMap<String, Object>();
	    		children.put("id", users.getId());
	    		children.put("text", users.getUserName());
	    		children.put("flag", "0");
	    		childrens.add(children);
	    	}
	    	if(childrens.size()>0) {
	    		treeNode.put("children", childrens);
	    	}else {
	    		treeNode.put("children", null);
	    	}
	    	treeNodes.add(treeNode);	
	    }
	    rtnNode.put("id", -1);
	    rtnNode.put("text", "街道");
	    rtnNode.put("flag", "1");
	    rtnNode.put("children", treeNodes);
	    rtnNodes.add(rtnNode);
		return rtnNodes;
	}