Hwebui Table组件使用

Hwebui

2018-06-16

113

1

一、table组件使用

1.1、界面

1.2、代码

1.2.1、引用js文件

因为当前系统使用的是freemarker模板引擎,所以将引用的所有js或者css,都封装到宏里面,所以这里只需要引用头信息宏就可以了,freemarker的基本用法,请问度娘。

头信息宏:

<@head.head color=currentColor></@head.head>

引用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>

1.2.2、添加table组件

<body>
<div class="contianer">
			<div class="contianer-left-inner" style="width:100%">
				 <div class="bar bar-darken">
					  <ul>
					  	  <li class="line"></li>
					      <li ><a type="button" width="400" unitType="addDialog" height="200" modal="true" title="添加角色"  href="actor-add.do?entity.parent.id=[%]" validateCallback="btnValidateCallBack"><span class="add"></span><span>添加</span></a></li>
					      <li class="line" width="500" height="600" ></li>
					      <li><a type="button" relId="actorTree" width="400" unitType="editDialog" height="200" href="actor-edit.do?entity.id=[%]"  title="编辑角色" validateCallback="btnValidateCallBack"><span class="edit"></span><span>编辑</span></a></li>
					      <li class="line"></li>
					      <li><a type="button" relId="actorTree" unitType="confirm" message="你需要继续删除么?" href="actor-delete.do?currentId=[%]" ><span class="del"></span><span>删除</span></a></li>
					      <li class="line"></li>
					  </ul>
				 </div> 
				 <div type="ztree" unitType="searchback" class="pooztree" viewType="checkbox" selectType="single"  expandType="first" value="${currentId???then(currentId,"")}" fieldData="{'idField':'id','pIdField':'pId','nameField':'name'}" backfield="{actorIds:'id',actorName:'name'}"> 
					<div type="json" style="display:none;">${actorTreeJson}</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="actorTree" type="ztree" ></ul>
				    </div>
			      </div>
		     </div>
</div>
</body>

说明:

标签中的代码主要对table指定列的数据进行查询,可以根据业务需要自定义添加查询条件,这里需要注意@s.form标签中的type="queryForm"属性是Hweiui添加的自定义属性,表示form是一个查询form,method默认为post,提交方式ajax提交。

标签中的代码主要是关联table的操作按钮,比如:添加、编辑、删除。这里需要注意的是a标签中的rel="table"属性,表示当前按钮操作table中的数据。

标签中的代码为一个普通table标签,这里需要注意的是,table需要放到class="wraptable"属性的div标签内,否则table组件不会生效。

<@head.page page=page> 为分页组件,后面会详细介绍。

下载web项目地址:

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

发表评论

全部评论:1条

鸿福951 2018-09-01

web项目下载地址:http://www.hongfu951.com/c/SSHwebui介绍.html博客中

鸿福951

努力打造一个好用的webui

热评文章

推荐文章