Hwebui Table组件使用

一、table组件使用

1.1、界面

1.2、代码

1.2.1、引用js文件

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

头信息宏：

<#macro head color>
	
	
	
	
	
	
	
	
	
	
	
	

	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
    <#nested>

引用头信息宏

    
    
    <@head.head color=currentColor>

1.2.2、添加table组件

   <@s.form id="queryForm" type="queryForm" action="user-list.do" style="float:left;width:100%;height:50px;">
    	

    		

    			
用户姓名：
    			
<@s.textfield name="entity.name">
    			

    			搜 索
    			
    		
    	
    


 

 	  

 	  <@sec.authorize  access="hasAnyRole('ADD_USER')">
      
添加
      

      
      <@sec.authorize  access="hasAnyRole('EDIT_USER')">
      
编辑
      

      
      <@sec.authorize  access="hasAnyRole('DELETE_USER')">
      
删除
      

      
      <@sec.authorize  access="hasAnyRole('RELATION_ORGAN_USER')">
      
关联机构职务
      

      
      <@sec.authorize  access="hasAnyRole('RELATION_ROLE_USER')">
      
关联角色
      

      
     
  



   	 <#list page.contents as user >
   	 	

   	 

   			

   	 		
序号
   	 		
用户姓名
   	 		
用户账号
   	 		
界面颜色
   	 		
手机电话
   	 		
座机电话
   	 		
邮件地址
   	 		
国   家
   	 		
省   份
   	 		
城   市
   	 		
区 / 县
   	 		
操作
   	 
   	 

   	 		

   	 				<#if user.defaulted==false> 
	   	 				
	   	 			
   	 		
   	 		
${user?counter}
   	 		
${user.name}
   	 		
${user.username}
   	 		

   	 		
   	 		
   	 		
${user.mobile!''}
   	 		
${(user.userInfo??&&user.userInfo.phone??)?then(user.userInfo.phone,"")}
   	 		
${user.email!''}
   	 		
${(user.userInfo??&&user.userInfo.country??)?then(user.userInfo.country.countryName,"")}
   	 		
${(user.userInfo??&&user.userInfo.province??)?then(user.userInfo.province.provinceName,"")}
   	 		
${(user.userInfo??&&user.userInfo.city??)?then(user.userInfo.city.cityName,"")}
   	 		
${(user.userInfo??&&user.userInfo.province??)?then(user.userInfo.county.districtName,"")}
   	 		
 
   	 		<#if user.defaulted==false>
   	 		<@sec.authorize  access="hasAnyRole('EDIT_USER')">
   	 		编辑
   	 		|
   	 		
   	 		<@sec.authorize  access="hasAnyRole('DELETE_USER')">
   	 		删除
   	 		
   	 		
   	 		
   	 	
   	 
   	 
   
   
	<@head.page page=page>

说明：

标签中的代码主要对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> 为分页组件，后面会详细介绍。

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

下载web项目地址：

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