Hwebui 树形组件说明

一、Hwebui树形组件说明

      Hwebui树形组件是由JQuery zTree开发而来，开发一般的树形组件通过配置属性就可以实现，配置属性会发布到后期的博客中，同时也提供了自定义开发树形组件的接口，用户可以根据自己的需求来实现自己的树形控件。

二、图形界面

三、代码实现

引入js文件

<#assign basePath=(request.contextPath)!"/poo.sysbase">
<#macro head color>
	<script type="text/javascript" src="${basePath}/js/system_ui/constants.js" ></script>
	<script type="text/javascript" src="${basePath}/js/jquery-3.1.0.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery-ui.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.visible.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.validate.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.serializejson.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/messages_zh.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.dataTables.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/dataTables.fixedColumns.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.core.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.excheck.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/jquery.ztree.exhide.min.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/css_browser_selector.js" data="deafult"></script>

	<script type="text/javascript" src="${basePath}/js/templatePlugin/dist/template.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/templatePlugin/template.custom.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/templatePlugin/template.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.charts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.gantt.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.maps.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.powercharts.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.ssgrid.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.treemap.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.widgets.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.zoomscatter.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/tagsinput.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.base.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.funsioncharts.extends.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/system_ui/poo.main.js" data="deafult"></script>
	<script type="text/javascript" src="${basePath}/js/select2.full.min.js" data="deafult"></script>
	<script type="text/javascript" language="javascript" src="${basePath}/js/My97DatePicker/WdatePicker.js" data="deafult"></script>
	
	<link rel="stylesheet" href="${basePath}/css/normalize.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/jquery-ui.min.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/jquery-ui-sysbase.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/${color}/main.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/form.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/select2.min.css" data="deafult"></link>
	<link rel="stylesheet" href="${basePath}/css/zTreeStyle/zTreeStyle.css" data="deafult" />
	<link rel="stylesheet" href="${basePath}/css/buttons.css" data="deafult" />
	<link rel="stylesheet" href="${basePath}/css/tagsinput.css" data="deafult"></link>
	
	
	<script type="text/javascript">
    	var basePath = "${basePath}";
    	var currentColor = "${currentColor}";
    </script>
    <#nested>
</#macro>

html代码实现

<div  type="ztree" class="pooztree" viewType="checkbox" selectType="single" value="${currentId???then(currentId,"")}" url="organ-user-list.do?relation.organ.id=[%]"  group="organgroup" relId="organAjaxId" relType="div" expandRoot="first" fieldData="{'idField':'id','pIdField':'pId','nameField':'name'}"> 
					<div type="json" style="display:none;">${organTreeJson}</div>
					<div>
						<ul class="ztreePanel">
							<li><div class="box">
							  <div class="container-4">
							    <input type="search" id="search" name="keyword"  />
							  </div>
							</div></li> 
						   <li><a type="search" searchfield="name">搜索</a></li> 
						   <li><a type="fold">折叠</a></li>
						</ul>
					</div>
					<div>
					     <ul class="ztree" id="organTree" type="ztree" ></ul>
				    </div>
			      </div>
		     </div>

type:ztree表示树形组件

viewType:显示类型，有checkbox 和 无

selectType:选择类型，有单选和复选两种模式

expandType：展开模式，全部展开，第一个节点和选择某个节点

第二个div标签

type="json" ：服务端传入的类型

id="organTree"：表示树形控件的id。

 

下载web项目地址：

链接：https://pan.baidu.com/s/1rZu6tLALMfyBJ8MhD-lepw 密码：w1o1

欢迎访问:www.hongfu951.com博客，查看更多技术文章