mirror of
https://github.com/yangzongzhuan/RuoYi.git
synced 2025-10-19 12:07:41 +00:00
若依 3.4
This commit is contained in:
RuoYi
215
ruoyi-admin/src/main/resources/templates/demo/modal/dialog.html
Normal file
215
ruoyi-admin/src/main/resources/templates/demo/modal/dialog.html
Normal file
@@ -0,0 +1,215 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('模态窗口')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>模态窗口</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>创建自定义的RuoYi模态窗口可通过添加<code>.inmodal</code>类来实现。 </p>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开示例窗口</button>
|
||||
</div>
|
||||
<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated bounceInRight">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span>
|
||||
</button>
|
||||
<i class="fa fa-laptop modal-icon"></i>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
<div class="form-group">
|
||||
<label>Email</label>
|
||||
<input type="email" placeholder="请输入您的Email" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>大小设置</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>模态窗口提供两种大小尺寸，可以通过为模态窗口的<code>.modal-dialog</code>添加类来实现 </p>
|
||||
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal5">大模态窗口</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal6">小模态窗口</button>
|
||||
</div>
|
||||
<div class="modal inmodal fade" id="myModal5" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal inmodal fade" id="myModal6" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-8">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>动画窗口</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>您可以通过为模态窗口的<code>.modal-content</code>添加类来实现动画效果 </p>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal2">沿X轴转动</button>
|
||||
<div class="modal inmodal" id="myModal2" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated flipInY">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small class="font-bold">这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal4">基本动画</button>
|
||||
<div class="modal inmodal" id="myModal4" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content animated fadeIn">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span>
|
||||
</button>
|
||||
<i class="fa fa-clock-o modal-icon"></i>
|
||||
<h4 class="modal-title">窗口标题</h4>
|
||||
<small>这里可以显示副标题。
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p><strong>RuoYi</strong>是一个完全响应式，基于Bootstrap3.3.6最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术，她提供了诸多的强大的可以重新组合的UI组件，并集成了最新的jQuery版本(v2.1.1)，当然，也集成了很多功能强大，用途广泛的jQuery插件，她可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
|
||||
<button type="button" class="btn btn-primary">保存</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>设置选项</h5>
|
||||
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>可以通过数据绑定或者Javascript来实现模态窗口的相关功能，如果使用数据绑定，可以为元素添加<code>data-</code>，如<code>data-backdrop=""</code>。</p>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">名称</th>
|
||||
<th style="width: 50px;">类型</th>
|
||||
<th style="width: 50px;">默认值</th>
|
||||
<th>说明</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>backdrop</td>
|
||||
<td>boolean 或 string <code>'static'</code></td>
|
||||
<td>true</td>
|
||||
<td>遮罩层，或使用<code>'static'</code>指定遮罩层与关闭模态窗口不关联</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>keyboard</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>按Esc键时退出模态窗口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>show</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>初始化完成后显示模态窗口</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>remote</td>
|
||||
<td>path</td>
|
||||
<td>false</td>
|
||||
<td>
|
||||
<p><strong class="text-danger">推荐使用数据绑定方式，或使用
|
||||
<a href="http://api.jquery.com/load/">jQuery.load</a></p>
|
||||
<p>远程URL示例：</p>
|
||||
<div class="highlight">
|
||||
<pre><code class="language-html" data-lang="html"><span class="nt"><a</span> <span class="na">data-toggle=</span><span class="s">"modal"</span> <span class="na">href=</span><span class="s">"remote.html"</span> <span class="na">data-target=</span><span class="s">"#modal"</span><span class="nt">></span>Click me<span class="nt"></a></span></code></pre>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,95 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('新增用户')" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="form-content">
|
||||
<form id="form-user-add" class="form-horizontal">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>用户名称：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="userName" placeholder="请输入用户名称" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>归属部门：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group">
|
||||
<input name="deptName" type="text" placeholder="请选择归属部门" class="form-control">
|
||||
<span class="input-group-addon"><i class="fa fa-search"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>手机号码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="phonenumber" placeholder="请输入手机号码" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="email" class="form-control" type="text" placeholder="请输入邮箱">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录账号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="loginName" placeholder="请输入登录账号" class="form-control" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label"><span style="color: red; ">*</span>登录密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input name="password" placeholder="请输入登录密码" class="form-control" type="password">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="sex" class="form-control m-b" th:with="type=${@dict.getType('sys_user_sex')}">
|
||||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-4 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<label class="toggle-switch switch-solid">
|
||||
<input type="checkbox" id="status" checked>
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
245
ruoyi-admin/src/main/resources/templates/demo/modal/layer.html
Normal file
245
ruoyi-admin/src/main/resources/templates/demo/modal/layer.html
Normal file
@@ -0,0 +1,245 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('弹层组件')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>信息框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>通过调用<code>$.modal.alert()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="$.modal.alert('Hi，你好！')">普通</button>
|
||||
<button type="button" class="btn btn-success" onclick="$.modal.alertSuccess('Hi，你好！')">成功</button>
|
||||
<button type="button" class="btn btn-warning" onclick="$.modal.alertWarning('Hi，你好！')">警告</button>
|
||||
<button type="button" class="btn btn-danger" onclick="$.modal.alertError('Hi，你好！')">失败</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>提示框</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.msg()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="$.modal.msg('Hi，你好！')">普通</button>
|
||||
<button type="button" class="btn btn-success" onclick="$.modal.msgSuccess('Hi，你好！')">成功</button>
|
||||
<button type="button" class="btn btn-warning" onclick="$.modal.msgWarning('Hi，你好！')">警告</button>
|
||||
<button type="button" class="btn btn-danger" onclick="$.modal.msgError('Hi，你好！')">失败</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>询问框</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.confirm()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-confirm">询问按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox ">
|
||||
<div class="ibox-title">
|
||||
<h5>消息提示并刷新父窗体</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.msgReload()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-msgReload">提示刷新按钮</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>普通弹出层</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.open()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-1">默认</button>
|
||||
<button type="button" class="btn btn-success" id="button-open-2">设置宽高</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-3">回调函数</button>
|
||||
<button type="button" class="btn btn-danger" id="button-open-4">自定义选项</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-5">全屏弹出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>选卡页方式</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>$.modal.openTab()</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-6">打开</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-7">关闭</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>其他内容</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>layer</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-8">tab层</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-9">prompt层</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-10">捕获页</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>遮罩层</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过调用<code>blockUI</code>实现。 </p>
|
||||
<button type="button" class="btn btn-primary" id="button-open-11">打开</button>
|
||||
<button type="button" class="btn btn-warning" id="button-open-12">关闭</button>
|
||||
<button type="button" class="btn btn-primary" id="button-open-13">layer遮罩</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=layer" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=layer</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/modal";
|
||||
|
||||
$("#button-confirm").click(function(){
|
||||
$.modal.confirm("确认要点击确定吗?", function() {
|
||||
$.modal.alert("ok");
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-msgReload").click(function(){
|
||||
$.modal.msgReload("保存成功,正在刷新数据请稍后……", modal_status.SUCCESS);
|
||||
})
|
||||
|
||||
$("#button-open-1").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-2").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form", '900', '320');
|
||||
})
|
||||
|
||||
$("#button-open-3").click(function(){
|
||||
$.modal.open('添加用户', prefix + "/form", '900', '320', callback);
|
||||
})
|
||||
|
||||
$("#button-open-4").click(function(){
|
||||
var btn = ['<i class="fa fa-check"></i> 点我回调', '<i class="fa fa-close"></i> 点我关闭'];
|
||||
var options = {
|
||||
title: '添加用户',
|
||||
width: "900",
|
||||
height: "320",
|
||||
url: prefix + "/form",
|
||||
btn: btn,
|
||||
callBack: doSubmit
|
||||
};
|
||||
$.modal.openOptions(options);
|
||||
})
|
||||
|
||||
function doSubmit(index, layero) {
|
||||
alert("进入了自定义选项提交方法");
|
||||
}
|
||||
|
||||
function callback(index, layero) {
|
||||
alert("进入了回调函数提交方法");
|
||||
}
|
||||
|
||||
$("#button-open-5").click(function(){
|
||||
$.modal.openFull('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-6").click(function(){
|
||||
$.modal.openTab('添加用户', prefix + "/form");
|
||||
})
|
||||
|
||||
$("#button-open-7").click(function(){
|
||||
$.modal.closeTab();
|
||||
})
|
||||
|
||||
$("#button-open-8").click(function(){
|
||||
//tab层
|
||||
layer.tab({
|
||||
area: ['600px', '300px'],
|
||||
tab: [{
|
||||
title: 'TAB1',
|
||||
content: '内容1'
|
||||
},
|
||||
{
|
||||
title: 'TAB2',
|
||||
content: '内容2'
|
||||
},
|
||||
{
|
||||
title: 'TAB3',
|
||||
content: '内容3'
|
||||
}]
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-9").click(function(){
|
||||
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
|
||||
layer.close(index);
|
||||
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
|
||||
layer.close(index);
|
||||
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-10").click(function(){
|
||||
layer.open({
|
||||
type: 1,
|
||||
shade: false,
|
||||
title: false, //不显示标题
|
||||
content: $('#test'), //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
|
||||
cancel: function(){
|
||||
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6});
|
||||
}
|
||||
});
|
||||
})
|
||||
|
||||
$("#button-open-11").click(function(){
|
||||
$.modal.loading("数据加载中");
|
||||
})
|
||||
|
||||
$("#button-open-12").click(function(){
|
||||
$.modal.closeLoading();
|
||||
})
|
||||
|
||||
$("#button-open-13").click(function(){
|
||||
layer.load(0, {shade: false}); // 0代表加载的风格，支持0-2
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('弹层表格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>弹出复选框表格及单选框表格（点击提交后得到数据）。 </p>
|
||||
<button type="button" class="btn btn-primary" onclick="selectCheckUser()">弹出表格（复选框）</button>
|
||||
<button type="button" class="btn btn-success" onclick="selectRadioUser()">弹出表格（单选框）</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>弹层框</h5>
|
||||
</div>
|
||||
<div class="ibox-content" id="test">
|
||||
<p>弹出复选框表格及单选框表格（点击提交后得到数据并回显到父窗体）。 </p>
|
||||
<button type="button" class="btn btn-info" onclick="selectUsersToParent()">弹出表格（复选框）</button>
|
||||
<p id="userids"> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/modal";
|
||||
|
||||
function selectCheckUser(){
|
||||
$.modal.open("选择用户", prefix + "/check");
|
||||
}
|
||||
|
||||
function selectRadioUser(){
|
||||
$.modal.open("选择用户", prefix + "/radio");
|
||||
}
|
||||
|
||||
function selectUsersToParent(){
|
||||
$.modal.open("选择用户", prefix + "/parent");
|
||||
}
|
||||
|
||||
function selectUsers(){
|
||||
alert(1);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('check表格页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler() {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
alert(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表格传值给父页面')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
checkbox: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler(index, layero) {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
$.modal.close();
|
||||
// 父页面的方法
|
||||
// parent.selectUsers();
|
||||
// 父页面的变量
|
||||
parent.$('#userids').html(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
||||
<head>
|
||||
<th:block th:include="include :: header('radio表格页')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div th:include="include :: footer"></div>
|
||||
<script th:inline="javascript">
|
||||
var prefix = ctx + "demo/table";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
columns: [{
|
||||
radio: true
|
||||
},
|
||||
{
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
},
|
||||
{
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
},
|
||||
{
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
return $.table.selectDictLabel(datas, value);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
formatter: function(value, row, index) {
|
||||
var actions = [];
|
||||
actions.push('<a class="btn btn-success btn-xs" href="#"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
|
||||
/* 添加用户-选择用户-提交 */
|
||||
function submitHandler() {
|
||||
var rows = $.table.selectFirstColumns();
|
||||
if (rows.length == 0) {
|
||||
$.modal.alertWarning("请至少选择一条记录");
|
||||
return;
|
||||
}
|
||||
alert(rows.join());
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user