一、table组件使用
1.1、界面
1.2、代码
1.2.1、引用js文件
因为当前系统使用的是freemarker模板引擎，所以将引用的所有js或者css，都封装到宏里面，所以这里只需要引用头信息宏就可以了，freemarker的基本用法，请问度娘。
头信息宏：
<#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/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/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/screen.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" />
<script type="text/javascript">
var basePath = "${basePath}";
var currentColor = "${currentColor}";
</script>
<#nested>
</#macro>引用头信息宏
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理平台</title>
<@head.head color=currentColor></@head.head>
</head>1.2.2、添加table组件
<body>
<div class="panel">
<@s.form id="queryForm" type="queryForm" action="user-list.do" style="float:left;width:100%;height:50px;">
<table style="margin:3px ;padding:0;height:100%;background:none;">
<tr>
<td>用户姓名：</td>
<td><@s.textfield name="entity.name"></@s.textfield></td>
<td>
<button class="pooButton pooButton-rounded pooButton-primary pooButton-tiny" type="submitButton" style="font-size:13px;">搜 索</button>
</td>
</tr>
</table>
</@s.form>
</div>
<div class="bar">
<ul>
<li class="line"></li>
<@sec.authorize access="hasAnyRole('ADD_USER')">
<li ><a type="btnAButton" width="800" datatype="addDailog" height="400" modal="true" title="添加用户" href="user-add.do" ><span class="add"></span><span>添加</span></a></li>
<li class="line" width="500" height="600" ></li>
</@sec.authorize>
<@sec.authorize access="hasAnyRole('EDIT_USER')">
<li><a type="btnAButton" rel="table" width="800" datatype="editDailog" height="400" href="user-edit.do?entity.id=[%]" ><span class="edit"></span><span>编辑</span></a></li>
<li class="line"></li>
</@sec.authorize>
<@sec.authorize access="hasAnyRole('DELETE_USER')">
<li><a type="btnAButton" rel="table" datatype="confirm" message="你需要继续删除么？" href="user-batchDelete.do?currentId=" ><span class="del"></span><span>删除</span></a></li>
<li class="line"></li>
</@sec.authorize>
<@sec.authorize access="hasAnyRole('RELATION_ORGAN_USER')">
<li ><a type="btnAButton" rel="table" width="800" datatype="editDailog" height="450" modal="true" title="关联机构职务" href="user-organactor-list.do?relation.user.id=[%]" button="cancel"><span class="add"></span><span>关联机构职务</span></a></li>
<li class="line" width="500" height="600" ></li>
</@sec.authorize>
<@sec.authorize access="hasAnyRole('RELATION_ROLE_USER')">
<li ><a type="btnAButton" rel="table" width="800" datatype="editDailog" height="450" modal="true" title="关联角色" href="user-role-list.do?userRoleRelation.user.id=[%]" button="cancel"><span class="add"></span><span>关联角色</span></a></li>
<li class="line" width="500" height="600" ></li>
</@sec.authorize>
</ul>
</div>
<div class="wraptable">
<table id="table" datatype="table" class="stripe row-border order-column">
<thead>
<th style="width:30px;"><input type="checkbox" /></th>
<th style="width:5%;">序号</th>
<th style="width:100px;">用户姓名</th>
<th style="width:100px;">用户账号</th>
<th style="width:100px;">界面颜色</th>
<th style="width:100px;">手机电话</th>
<th style="width:100px;">座机电话</th>
<th style="width:200px;">邮件地址</th>
<th style="width:150px;">国 家</th>
<th style="width:200px;">省 份</th>
<th style="width:200px;">城 市</th>
<th style="width:200px;">区 / 县</th>
<th style="width:100px;">操作</th>
</thead>
<tbody>
<#list page.contents as user >
<tr>
<td style="width:30px;text-align:center;" locate="userIds">
<#if user.defaulted==false>
<input type="checkbox" value="${user.id}" />
</#if>
</td>
<td style="text-align:center;">${user?counter}</td>
<td locate="name">${user.name}</td>
<td>${user.username}</td>
<td>
<span style='margin-left: 35%;display: block;width:25px;height:25px;background-color:#${(user.userInfo??&&user.userInfo.webcolor??)?then(user.userInfo.webcolor,"000000")}'></span>
</td>
<td>${user.mobile!''}</td>
<td>${(user.userInfo??&&user.userInfo.phone??)?then(user.userInfo.phone,"")}</td>
<td>${user.email!''}</td>
<td>${(user.userInfo??&&user.userInfo.country??)?then(user.userInfo.country.countryName,"")}</td>
<td>${(user.userInfo??&&user.userInfo.province??)?then(user.userInfo.province.provinceName,"")}</td>
<td>${(user.userInfo??&&user.userInfo.city??)?then(user.userInfo.city.cityName,"")}</td>
<td>${(user.userInfo??&&user.userInfo.province??)?then(user.userInfo.county.districtName,"")}</td>
<td style="background:#ffffff;">
<#if user.defaulted==false>
<@sec.authorize access="hasAnyRole('EDIT_USER')">
<a href="user-edit.do?entity.id=${user.id}" type="btnALink" datatype="editDailog" width="800" height="400" modal="true" title="编辑用户" zindex="0">编辑</a>
|
</@sec.authorize>
<@sec.authorize access="hasAnyRole('DELETE_USER')">
<a href="user-delete.do?currentId=${user.id}" type="btnALink" datatype="confirm" message="你需要继续删除么？">删除</a>
</@sec.authorize>
</td>
</#if>
</tr>
</#list>
</tbody>
</table>
</div>
<@head.page page=page></@head.page>
</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> 为分页组件，后面会详细介绍。
欢迎访问:www.hongfu951.com博客，查看更多技术文章
下载web项目地址：