MISBoot快速开发平台

View视图层

一、 概述

1.作用

用于与用户的数据交互

2.位置

src.main.resources.templates.xxxx.zzZz .yyyy xxxx为系统名称,zzZz为模块名称,yyyy为界面名称

3.命名方式

命名方式:xxxx.html

4.按钮权限标签

按钮权限标签,控制按钮是否在页面出现

标签str命名方式:

新增:yyyAddDialog yyy为模块名称,AddDialog为新增

编辑:yyyEditDialog yyy为模块名称,EditDialog为编辑

删除:/yyyy/xxxx/deleteBatch yyyy为系统名称,xxxx为模块名称,deleteBatch为删除

权限标签示例:
<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:'/system/sysUser/edit',
             height:450,
             buttonsGroup:[
                 {text:'保存',url:'/system/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:'/system/sysUser/edit',
             url:'/system/sysUser/getDetailByUuid?uuid={uuid}',
             height:450,
             buttonsGroup:[
                 {text:'更新',url:'/system/sysUser/update',iconCls:'fa fa-save',handler:'ajaxForm',refresh:[{type:'datagrid',id:'sysUserDg'}]}
             ]
         }">编辑</a>
      </ewsd:rbac>

      <ewsd:rbac str="/system/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:'/system/sysUser/deleteBatch'">删除</a>
      </ewsd:rbac>

二、示例代码

用户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:'/system/sysUser/getPageSet'">
                <thead>
                <tr>
                    <th data-options="field:'uuid',title:'',sortable:true,checkbox:true"></th>
                    <th data-options="field:'email',title:'电子邮箱',sortable:true"></th>
                    <th data-options="field:'orgId',title:'机构ID',sortable:true"></th>
                    <th data-options="field:'orgName',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:'age',title:'年龄',sortable:true"></th>h>
                    <th data-options="field:'sex',title:'性别',sortable:true"></th>
                    <th data-options="field:'posttext',title:'职务值',sortable:true"></th>
                    <th data-options="field:'sign',title:'个新签名',sortable:true"></th>
                    <th data-options="field:'avatar',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:'/system/sysUser/edit',
                   height:450,
                   buttonsGroup:[
                       {text:'保存',url:'/system/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:'/system/sysUser/edit',
                   url:'/system/sysUser/getDetailByUuid?uuid={uuid}',
                   height:450,
                   buttonsGroup:[
                       {text:'更新',url:'/office/sysUser/update',iconCls:'fa fa-save',handler:'ajaxForm',refresh:[{type:'datagrid',id:'sysUserDg'}]}
                   ]
               }">编辑</a>
            </ewsd:rbac>

            <ewsd:rbac str="/system/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:'/system/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>
用户edit.html
    <input type="hidden" id="uuid" name="uuid">
    <div class="topjui-fluid">
        <fieldset>
            <legend>基本信息</legend>
        </fieldset>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">用户名</label>
                <div class="topjui-input-block">
                    <input type="text" name="userNameId" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填'">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">姓名</label>
                <div class="topjui-input-block">
                    <input type="text" name="userName" data-toggle="topjui-textbox"
                           data-options="required:true,prompt:'必填'">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">性别</label>
                <div class="topjui-input-block">
                    <input name="sex" data-toggle="topjui-radiobutton"
                           data-options="value:'1',label:'男',labelPosition:'after',checked:'true'">
                    <input name="sex" data-toggle="topjui-radiobutton"
                           data-options="value:'2',label:'女',labelPosition:'after'">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">年龄</label>
                <div class="topjui-input-block">
                    <input type="text" name="age" data-toggle="topjui-numberbox"data-options="groupSeparator:''">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm12"><label class="topjui-form-label">所属机构</label>
                <div class="topjui-input-block">
                    <input type="hidden" name="orgName">
                    <input type="text" name="orgId"
                           data-toggle="topjui-combotree"
                           data-options="required:true,
                       prompt:'必填',
                       url:'/mdata/organization/getListByLevelId?levelId=1',
                       expandUrl:'/mdata/organization/getListByPid?pid={id}',
                       getFatherIdsUrl:'/mdata/organization/getFatherIds?id={id}',
                       param:'orgName:text'">
                </div>
            </div>

        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">职务</label>
                <div class="topjui-input-block">
                    <input type="hidden" name="postText">
                    <input type="text" name="post"
                           data-toggle="topjui-combobox"
                           data-options="required:true,
                       prompt:'必填',
                       panelHeight:190,
                       url:'/system/dicSet/getDicItemByCode?code=post',
                       param:'postText:text'">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">固定电话</label>
                <div class="topjui-input-block">
                    <input type="text" name="telephone" data-toggle="topjui-textbox">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">电子邮箱</label>
                <div class="topjui-input-block">
                    <input type="text" name="email" data-toggle="topjui-textbox" data-options="required:true,validType:'email',prompt:'必填'">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">手机</label>
                <div class="topjui-input-block">
                    <input type="text" name="cellphone" data-toggle="topjui-textbox" data-options="required:true,validType:'cellphone',prompt:'必填'">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm12"><label class="topjui-form-label">状态</label>
                <div class="topjui-input-block">
                    <input type="text" name="status"
                           data-toggle="topjui-combobox"
                           data-options="required:true,
                       prompt:'必填',
                       panelHeight:63,
                       url:'/system/dicSet/getDicItemByCode?code=en-disable',
                       param:'status:text'">
                </div>
            </div>
        </div>
        <fieldset>
            <legend>其它信息</legend>
        </fieldset>
        <div class="topjui-row">
            <div class="topjui-col-sm12"><label class="topjui-form-label">所属区域</label>
                <div class="topjui-input-block">
                    <input type="text" name="zone"
                           data-toggle="topjui-combotree"
                           data-options="required:true,
                       prompt:'必填',
                       url:'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=AGA&levelId=3',
                       expandUrl:'/system/codeItem/getListByPid?pid={id}',
                       getFatherIdsUrl:'/system/codeItem/getFatherIds?id={id}',
                       backfill:{url:'/system/codeItem/getZoneFillbackData?id={id}'}">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">国家</label>
                <div class="topjui-input-block">
                    <input type="text" name="country" data-toggle="topjui-textbox" data-options="readonly:true">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">省份</label>
                <div class="topjui-input-block">
                    <input type="text" name="province" data-toggle="topjui-textbox" data-options="readonly:true">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">城市</label>
                <div class="topjui-input-block">
                    <input type="text" name="city" data-toggle="topjui-textbox" data-options="readonly:true">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">区县</label>
                <div class="topjui-input-block">
                    <input type="text" name="district" data-toggle="topjui-textbox" data-options="readonly:true">
                </div>
            </div>
        </div>
        <div class="topjui-row">
        <div class="topjui-col-sm6"><label class="topjui-form-label">籍贯</label>
            <div class="topjui-input-block">
                <input type="text" name="nativePlace" data-toggle="topjui-combobox"
                       data-options="url:'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=AAAC&levelId=5',panelHeight:'250',textField:'text',valueField:'text'">
            </div>
        </div>
        <div class="topjui-col-sm6"><label class="topjui-form-label">民族</label>
            <div class="topjui-input-block">
                <input type="text" name="nation" data-toggle="topjui-combobox"
                       data-options="url:'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=AAAB&levelId=2',panelHeight:'250',textField:'text',valueField:'text'">
            </div>
        </div>
    </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">身份证号</label>
                <div class="topjui-input-block">
                    <input type="text" name="idCard" data-toggle="topjui-textbox">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">毕业院校</label>
                <div class="topjui-input-block">
                    <input type="text" name="school" data-toggle="topjui-textbox">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm6"><label class="topjui-form-label">学历</label>
                <div class="topjui-input-block">
                    <input type="text" id="education" name="education" data-toggle="topjui-combobox"
                           data-options="url:'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=AABA&levelId=5',textField:'text',valueField:'text'">
                </div>
            </div>
            <div class="topjui-col-sm6"><label class="topjui-form-label">学位</label>
                <div class="topjui-input-block">
                    <input type="text" id="degree" name="degree" data-toggle="topjui-combobox"
                           data-options="url:'/system/codeItem/getListByCodeSetIdAndLevelId?codeSetId=AABB&levelId=5',textField:'text',valueField:'text'">
                </div>
            </div>
        </div>
        <div class="topjui-row">
            <div class="topjui-col-sm12"><label class="topjui-form-label">备注</label>
                <div class="topjui-input-block">
                    <input type="text" name="remark" data-toggle="topjui-textarea">
                </div>
            </div>
        </div>
    </div>
QQ在线咨询
客服 QQ
251122361
微信/手机
18973127736
办公电话
0731-89565588