easyui樹外掛的使用與佈局
阿新 • • 發佈：2018-11-08
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" /> 至 <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; }