View列表页
一、通过自动生成代码功能生成代码
把生成出来的index.html页面复制到项目对应的文件夹下。
二、示例
示例
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:ewsd="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="public/layout">
<head>
<th:block layout:fragment="css">
</th:block>
</head>
<body>
<th:block layout:fragment="content">
<div data-toggle="topjui-layout" data-options="fit:true">
<div data-options="region:'center',iconCls:'icon-reload',title:'',split:true,border:false">
<table data-toggle="topjui-datagrid"
data-options="id:'sysUserDg',
singleSelect:true,
selectOnCheck:false,
checkOnSelect:false,
url:'/office/sysUser/getPageSet'">
<thead>
<tr>
<th data-options="field:'uuid',title:'',sortable:true,checkbox:true"></th>
<th data-options="field:'createTime',title:'创建时间',sortable:true"></th>
<th data-options="field:'creator',title:'创建人',sortable:true"></th>
<th data-options="field:'creatorId',title:'创建人id',sortable:true"></th>
<th data-options="field:'isDel',title:'是否删除',sortable:true"></th>
<th data-options="field:'modifier',title:'修改人',sortable:true"></th>
<th data-options="field:'modifierId',title:'修改人id',sortable:true"></th>
<th data-options="field:'modifyTime',title:'修改时间',sortable:true"></th>
<th data-options="field:'creatorOrgId',title:'组织机构ID',sortable:true"></th>
<th data-options="field:'remark',title:'备注',sortable:true"></th>
<th data-options="field:'birthday',title:'生日',sortable:true"></th>
<th data-options="field:'degree',title:'学位',sortable:true"></th>
<th data-options="field:'education',title:'学历',sortable:true"></th>
<th data-options="field:'province',title:'省份',sortable:true"></th>
<th data-options="field:'city',title:'城市',sortable:true"></th>
<th data-options="field:'telephone',title:'固定电话',sortable:true"></th>
<th data-options="field:'cellphone',title:'手机',sortable:true"></th>
<th data-options="field:'email',title:'电子邮箱',sortable:true"></th>
<th data-options="field:'nation',title:'民族',sortable:true"></th>
<th data-options="field:'nativePlace',title:'籍贯',sortable:true"></th>
<th data-options="field:'nickName',title:'昵称',sortable:true"></th>
<th data-options="field:'post',title:'职务',sortable:true"></th>
<th data-options="field:'school',title:'毕业院校',sortable:true"></th>
<th data-options="field:'userAccount',title:'用户帐户',sortable:true"></th>
<th data-options="field:'userGroup',title:'角色授权',sortable:true"></th>
<th data-options="field:'dataAuth',title:'数据授权',sortable:true"></th>
<th data-options="field:'userName',title:'用户名称',sortable:true"></th>
<th data-options="field:'userNameId',title:'用户ID',sortable:true"></th>
<th data-options="field:'password',title:'密码',sortable:true"></th>
<th data-options="field:'idCardNo',title:'',sortable:true"></th>
<th data-options="field:'age',title:'年龄',sortable:true"></th>
<th data-options="field:'idCard',title:'',sortable:true"></th>
<th data-options="field:'sex',title:'性别',sortable:true"></th>
<th data-options="field:'status',title:'状态',sortable:true"></th>
<th data-options="field:'postText',title:'职务值',sortable:true"></th>
<th data-options="field:'onlineStatus',title:'用户在线状态',sortable:true"></th>
<th data-options="field:'sign',title:'个新签名',sortable:true"></th>
<th data-options="field:'avatar',title:'头像',sortable:true"></th>
<th data-options="field:'country',title:'国家',sortable:true"></th>
<th data-options="field:'zone',title:'所属区域 ',sortable:true"></th>
<th data-options="field:'openid',title:'',sortable:true"></th>
<th data-options="field:'unionid',title:'',sortable:true"></th>
<th data-options="field:'district',title:'区县',sortable:true"></th>
</tr>
</thead>
</table>
</div>
</div>
<!-- 表格工具栏 -->
<div id="sysUserDg-toolbar" class="topjui-toolbar"
data-options="grid:{
type:'datagrid',
id:'sysUserDg'
}" style="display:none">
<ewsd:rbac str="sysUserAddDialog">
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="method:'openDialog',
extend:'#sysUserDg-toolbar',
btnCls:'topjui-btn-green',
dialog:{
id:'sysUserAddDg',
href:'/office/sysUser/edit',
height:450,
buttonsGroup:[
{text:'保存',url:'/mdata/sysUser/save',iconCls:'fa fa-plus',handler:'ajaxForm'}
]
}">新增</a>
</ewsd:rbac>
<ewsd:rbac str="sysUserEditDialog">
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="method:'openDialog',
extend:'#sysUserDg-toolbar',
btnCls:'topjui-btn-blue',
component:'edit',
iconCls:'fa fa-pencil',
dialog:{
id:'sysUserEditDg',
href:'/mdata/sysUser/edit',
url:'/mdata/sysUser/getDetailByUuid?uuid={uuid}',
height:450,
buttonsGroup:[
{text:'更新',url:'/mdata/sysUser/update',iconCls:'fa fa-save',handler:'ajaxForm',refresh:[{type:'datagrid',id:'sysUserDg'}]}
]
}">编辑</a>
</ewsd:rbac>
<ewsd:rbac str="/office/sysUser/deleteBatch">
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="method:'doAjax',
extend:'#sysUserDg-toolbar',
btnCls:'topjui-btn-red',
iconCls:'fa fa-trash',
grid:{uncheckedMsg:'请先勾选要删除的用户',param:'uuid:uuid'},
url:'/mdata/sysUser/deleteBatch'">删除</a>
</ewsd:rbac>
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="method:'filter',
extend:'#sysUserDg-toolbar',
btnCls:'topjui-btn-orange'">过滤</a>
<a href="javascript:void(0)"
data-toggle="topjui-menubutton"
data-options="method:'search',
extend:'#sysUserDg-toolbar',
btnCls:'topjui-btn-purple'">查询</a>
</div>
</th:block>
<th:block layout:fragment="js">
</th:block>
</body>
</html>
</html>
文档更新时间: 2019-11-20 12:41 作者：佐佑时代