Hwebui查找带回说明

Hwebui查找带回说明

一、Hwebui查找带回组件说明

Hwebui查找带回组件分为：树形查找带回组件和table查找带回组件。普通的查找带回组件只需要通过属性配置就可以实现。

二、界面图形

2.1、树形查找带回

2.2、table查找带回

三、页面代码

3.1、插入js文件

<#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>

3.2、插入组件代码

<tr>
	   	  	<td>关联机构</td>
	   	  	<td>
	            <@s.textfield  name="organName"  searchback="true" group="user" width="400" height="450" modal="true" title="添加机构" unitType="ztree" href="organ-tree-list.do" cssClass="required"/> 
  				<@s.hidden  name="organIds"  group="user" back_selected="true"/>
	   	  	</td>
	   	  </tr>
	   	  <tr>
	   	  	<td>关联职务</td>
	   	  	<td>
	            <@s.textfield  name="actorName"  searchback="true" group="actor" width="400" height="450" modal="true" title="添加职务" unitType="ztree" href="actor-list.do" cssClass="required"/> 
  				<@s.hidden  name="actorIds"  group="actor" back_selected="true"/>
	   	  	</td>
	   	  </tr>

查找带回属性：

ztree:

type:类型searchback
viewType:显示类型none、checkbox、radio.
selectType: 选择类型single、multiple
clickType: 点击类型href、custom
expandType: 展开类型all、first、specify、custom
clickNode:是否可以点击节点true、false
validateCallback：校验回调函数
customCallback：自定义回调函数
excuteCallback：执行回调函数

table:
type: searchback[查找带回]
relfield:查找带回关联字段名称
validateCallback：校验查找带回。
customCallback：自定义查找带回。

下载web项目地址：

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

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