若依 3.4
This commit is contained in:
RuoYi
@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('搜索自动补全')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-1">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>不展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-2">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>前端json中获取数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-3">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>百度搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 300px;">
|
||||
<input type="text" class="form-control" id="baidu">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>淘宝搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 400px;">
|
||||
<input type="text" class="form-control" id="taobao">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过数据属性的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<p>通过javascript的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>通过javascript的复杂示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>后台url中获取简单数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-suggest-js" />
|
||||
<th:block th:include="include :: bootstrap-typeahead-js" />
|
||||
<script type="text/javascript">
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-1").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-2").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
showBtn: false,
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
//data 数据中获取
|
||||
var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
|
||||
indexId: 1,
|
||||
indexKey: 2,
|
||||
data: {
|
||||
'value': [
|
||||
{
|
||||
'userId': '1',
|
||||
'userCode': '1000001',
|
||||
'userName': '测试1',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '2',
|
||||
'userCode': '1000002',
|
||||
'userName': '测试2',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '3',
|
||||
'userCode': '1000003',
|
||||
'userName': '测试3',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '4',
|
||||
'userCode': '1000004',
|
||||
'userName': '测试4',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '5',
|
||||
'userCode': '1000005',
|
||||
'userName': '测试5',
|
||||
'userPhone': '15888888888'
|
||||
}
|
||||
],
|
||||
'defaults': 'http://ruoyi.vip'
|
||||
}
|
||||
});
|
||||
|
||||
//百度搜索测试
|
||||
var baiduBsSuggest = $("#baidu").bsSuggest({
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'cb',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
if (!json || !json.s || json.s.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.s.length;
|
||||
|
||||
jsonStr = "{'value':[";
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
word: json.s[i]
|
||||
});
|
||||
}
|
||||
data.defaults = 'baidu';
|
||||
|
||||
//字符串转化为 js 对象
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
//淘宝搜索建议测试
|
||||
var taobaoBsSuggest = $("#taobao").bsSuggest({
|
||||
indexId: 2, //data.value 的第几个数据，作为input输入框的内容
|
||||
indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
effectiveFieldsAlias: {
|
||||
Id: "序号",
|
||||
Keyword: "关键字",
|
||||
Count: "数量"
|
||||
},
|
||||
showHeader: true,
|
||||
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'callback',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
|
||||
if (!json || !json.result || json.result.length == 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.result.length;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
"Id": (i + 1),
|
||||
"Keyword": json.result[i][0],
|
||||
"Count": json.result[i][1]
|
||||
});
|
||||
}
|
||||
console.log(data);
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
$('#typeahead-demo-1').typeahead({
|
||||
source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
|
||||
});
|
||||
|
||||
$('#typeahead-demo-2').typeahead({
|
||||
source: [
|
||||
{"name": "Afghanistan", "code": "AF", "ccn0": "040"},
|
||||
{"name": "Land Islands", "code": "AX", "ccn0": "050"},
|
||||
{"name": "Albania", "code": "AL","ccn0": "060"},
|
||||
{"name": "Algeria", "code": "DZ","ccn0": "070"}
|
||||
]
|
||||
});
|
||||
|
||||
$.get(ctx + "demo/form/collection", function(data){
|
||||
$("#typeahead-demo-3").typeahead({
|
||||
source: data.value
|
||||
});
|
||||
},'json');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
593
ruoyi-admin/src/main/resources/templates/demo/form/basic.html
Normal file
593
ruoyi-admin/src/main/resources/templates/demo/form/basic.html
Normal file
@ -0,0 +1,593 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本表单 <small>简单登录表单示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="email" placeholder="请输入您注册的E-mail" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登 录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个新账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>横向表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="email" placeholder="用户名" class="form-control"> <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="password" placeholder="密码" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-3 col-sm-8">
|
||||
<button class="btn btn-sm btn-white" type="submit">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>内联表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form role="form" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail2" class="sr-only">用户名</label>
|
||||
<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword2" class="sr-only">密码</label>
|
||||
<input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">
|
||||
</div>
|
||||
<div class="checkbox m-l m-r-xs">
|
||||
<label>
|
||||
<input type="checkbox"><i></i> 自动登录</label>
|
||||
</div>
|
||||
<button class="btn btn-white" type="submit">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>弹出表单 <small>弹出框登录示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="text-center">
|
||||
<a data-toggle="modal" class="btn btn-primary" href="form_basic.html#modal-form">打开登录窗口</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>所有表单元素 <small>包括自定义样式的复选和单选按钮</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form method="get" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">普通</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带说明信息</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control"> <span class="help-block m-b-none">帮助文本，可能会超过一行，以块级元素显示</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">密码</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" name="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">提示</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="提示信息" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">禁用</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" disabled="" placeholder="已被禁用" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">静态控制</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<p class="form-control-static">ruoyi.vip</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/>
|
||||
<small class="text-navy">普通Bootstrap元素</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option1" id="inlineCheckbox1">a</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option2" id="inlineCheckbox2">b</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option3" id="inlineCheckbox3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/><small class="text-navy">自定义样式</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value=""> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" value="option1" name="a"> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option1">a</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option2">b</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Select</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control m-b" name="account">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
|
||||
<div class="col-sm-4 m-l-n">
|
||||
<select class="form-control" multiple="">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-success">
|
||||
<label class="col-sm-2 control-label">验证通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="col-sm-2 control-label">未填写</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-error">
|
||||
<label class="col-sm-2 control-label">验证未通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">自定义尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder=".input-lg" class="form-control input-lg m-b">
|
||||
<input type="text" placeholder="Default input" class="form-control m-b">
|
||||
<input type="text" placeholder=".input-sm" class="form-control input-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">列尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<input type="text" placeholder=".col-md-2" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" placeholder=".col-md-3" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder=".col-md-4" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">文本框组</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="用户名" class="form-control">
|
||||
</div>
|
||||
<div class="input-group m-b">
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon">¥</span>
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">按钮插件</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">搜</button> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
|
||||
</button> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带下拉框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">分段</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
分段
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-primary" type="submit">保存内容</button>
|
||||
<button class="btn btn-white" type="submit">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-form" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名：</label>
|
||||
<input type="email" placeholder="请输入用户名" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码：</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox" class="i-checks">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
620
ruoyi-admin/src/main/resources/templates/demo/form/button.html
Normal file
620
ruoyi-admin/src/main/resources/templates/demo/form/button.html
Normal file
@ -0,0 +1,620 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('按钮')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="row wrapper wrapper-content animated fadeInRight">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮颜色</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">
|
||||
普通按钮
|
||||
</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-w-m btn-default">btn-default</button>
|
||||
<button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
|
||||
<button type="button" class="btn btn-w-m btn-success">btn-success</button>
|
||||
<button type="button" class="btn btn-w-m btn-info">btn-info</button>
|
||||
<button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
|
||||
<button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
|
||||
<button type="button" class="btn btn-w-m btn-white">btn-white</button>
|
||||
<button type="button" class="btn btn-w-m btn-link">btn-link</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮大小</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
|
||||
</p>
|
||||
<h3 class="font-bold">按钮尺寸</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
|
||||
<button type="button" class="btn btn-default btn-lg">大按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary">默认按钮</button>
|
||||
<button type="button" class="btn btn-default">默认按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
|
||||
<button type="button" class="btn btn-default btn-sm">小按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
|
||||
<button type="button" class="btn btn-default btn-xs">Mini按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>线性按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用线性按钮，可添加class<code>.btn-block</code>或<code>.btn-outline</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">线性按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-outline btn-default">默认</button>
|
||||
<button type="button" class="btn btn-outline btn-primary">主要</button>
|
||||
<button type="button" class="btn btn-outline btn-success">成功</button>
|
||||
<button type="button" class="btn btn-outline btn-info">信息</button>
|
||||
<button type="button" class="btn btn-outline btn-warning">警告</button>
|
||||
<button type="button" class="btn btn-outline btn-danger">危险</button>
|
||||
<button type="button" class="btn btn-outline btn-link">链接</button>
|
||||
</p>
|
||||
<h3 class="font-bold">块级按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>3D按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加<code>.dim</code>class来使用3D按钮.
|
||||
</p>
|
||||
<h3 class="font-bold">3D按钮</h3>
|
||||
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim btn-large-dim" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
|
||||
<button class="btn btn-info dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-default dim " type="button"><i class="fa fa-star"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
下拉按钮可使用任何颜色任何大小
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">下拉按钮</h3>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮组</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-white" type="button">左</button>
|
||||
<button class="btn btn-primary" type="button">中</button>
|
||||
<button class="btn btn-white" type="button">右</button>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="btn btn-white">1</button>
|
||||
<button class="btn btn-white active">2</button>
|
||||
<button class="btn btn-white">3</button>
|
||||
<button class="btn btn-white">4</button>
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>图标按钮 </h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
任何按钮都可以在左侧或右侧添加图标
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">图标按钮</h3>
|
||||
<p>
|
||||
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
|
||||
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">上传</span>
|
||||
</button>
|
||||
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
|
||||
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span>
|
||||
</button>
|
||||
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> 百度地图</button>
|
||||
|
||||
<a class="btn btn-success">
|
||||
<i class="fa fa-weixin"> </i> 分享到微信
|
||||
</a>
|
||||
<a class="btn btn-success btn-outline">
|
||||
<i class="fa fa-qq"> </i> 使用QQ账号登录
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-user-md"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-group"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-exchange"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-check-circle-o"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-road"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-ambulance"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-star"></i> 收藏
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮切换</h3>
|
||||
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
|
||||
<button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
|
||||
<div data-toggle="buttons-checkbox" class="btn-group">
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
|
||||
<button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆形图标按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">圆形按钮</h3>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆角按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值微<code>.btn-rounded</code>来实现圆角按钮
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<p>
|
||||
<a class="btn btn-default btn-rounded" href="buttons.html#">默认</a>
|
||||
<a class="btn btn-primary btn-rounded" href="buttons.html#">主要</a>
|
||||
<a class="btn btn-success btn-rounded" href="buttons.html#">成果</a>
|
||||
<a class="btn btn-info btn-rounded" href="buttons.html#">信息</a>
|
||||
<a class="btn btn-warning btn-rounded" href="buttons.html#">警告</a>
|
||||
<a class="btn btn-danger btn-rounded" href="buttons.html#">危险</a>
|
||||
<a class="btn btn-danger btn-rounded btn-outline" href="buttons.html#">危险</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<a class="btn btn-primary btn-rounded btn-block" href="buttons.html#"><i class="fa fa-info-circle"></i> 圆角块级带图标按钮</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
235
ruoyi-admin/src/main/resources/templates/demo/form/datetime.html
Normal file
235
ruoyi-admin/src/main/resources/templates/demo/form/datetime.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('日期和时间')" />
|
||||
<th:block th:include="include :: datetimepicker-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-1" placeholder="yyyy-MM-dd HH:mm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">带清空的按钮</label>
|
||||
<div class="input-group date form_date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input class="form-control" size="16" type="text" readonly>
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单框范围选择</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=laydate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=laydate</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: datetimepicker-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('左右互选组件')" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>双重列表框 <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
|
||||
</p>
|
||||
|
||||
<form id="form" action="#" class="wizard-big">
|
||||
<select class="form-control dual_select" multiple>
|
||||
<option value="1">若依1</option>
|
||||
<option value="2">若依2</option>
|
||||
<option value="3">若依3</option>
|
||||
<option selected value="4">若依4</option>
|
||||
<option selected value="5">若依5</option>
|
||||
<option value="6">若依6</option>
|
||||
<option value="7">若依7</option>
|
||||
<option value="8">若依8</option>
|
||||
<option value="9">若依9</option>
|
||||
<option value="10">若依10</option>
|
||||
<option value="11">若依11</option>
|
||||
<option value="12">若依12</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-js" />
|
||||
<script type="text/javascript">
|
||||
$('.dual_select').bootstrapDualListbox({
|
||||
nonSelectedListLabel: '未有用户',
|
||||
selectedListLabel: '已有用户',
|
||||
preserveSelectionOnMove: 'moved',
|
||||
moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
|
||||
filterTextClear: '展示所有',
|
||||
moveSelectedLabel: "添加",
|
||||
moveAllLabel: '添加所有',
|
||||
removeSelectedLabel: "移除",
|
||||
removeAllLabel: '移除所有',
|
||||
infoText: '共{0}个',
|
||||
showFilterInputs: false, // 是否带搜索
|
||||
selectorMinimalHeight: 160
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
432
ruoyi-admin/src/main/resources/templates/demo/form/grid.html
Normal file
432
ruoyi-admin/src/main/resources/templates/demo/form/grid.html
Normal file
@ -0,0 +1,432 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('栅格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>栅格设置</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
超小屏幕
|
||||
<small>手机 (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
小屏幕
|
||||
<small>平板 (≥768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
中等屏幕
|
||||
<small>桌面显示器 (≥992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
大屏幕
|
||||
<small>大桌面显示器 (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap">栅格系统行为</th>
|
||||
<td>总是水平排列</td>
|
||||
<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap"><code>.container</code> 最大宽度</th>
|
||||
<td>None （自动）</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">类前缀</th>
|
||||
<td><code>.col-xs-</code>
|
||||
</td>
|
||||
<td><code>.col-sm-</code>
|
||||
</td>
|
||||
<td><code>.col-md-</code>
|
||||
</td>
|
||||
<td><code>.col-lg-</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列（column）数</th>
|
||||
<td colspan="4">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">最大列（column）宽</th>
|
||||
<td class="text-muted">自动</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">槽（gutter）宽</th>
|
||||
<td colspan="4">30px （每列左右均有 15px）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">可嵌套</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">偏移（Offsets）</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列排序</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>从堆叠到水平排列</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>移动设备和桌面屏幕</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>手机、平板、桌面</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>多余的列（column）将另起一行排列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>在等宽的4网格中，网格不等高会碰到问题，为了解决这个问题，可使用<code>.clearfix</code>。<a href="grid_options.html#responsive-utilities">响应实用工具类</a>
|
||||
</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
.col-xs-6 .col-sm-3
|
||||
<br>调整窗口大小或者在手机上查看本示例
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列偏移</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>嵌套列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9">
|
||||
第一级： .col-md-9
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列排序</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
118
ruoyi-admin/src/main/resources/templates/demo/form/jasny.html
Normal file
118
ruoyi-admin/src/main/resources/templates/demo/form/jasny.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('功能扩展')" />
|
||||
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">输入组示例</label>
|
||||
|
||||
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
|
||||
<span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">按钮示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
|
||||
<span class="fileinput-filename"></span>
|
||||
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片上传示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片预览示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
|
||||
<img th:src="@{/img/profile.jpg}">
|
||||
</div>
|
||||
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">手机号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
|
||||
<span class="help-block">158-8888-88888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">电话号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
|
||||
<span class="help-block">0730-8888888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
|
||||
<span class="help-block">yyyy-mm-dd</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">IPV4格式</label>
|
||||
<input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
|
||||
<span class="help-block">192.168.100.200</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">税务代码格式</label>
|
||||
<input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
|
||||
<span class="help-block">99-9999999</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||
</body>
|
||||
</html>
|
||||
259
ruoyi-admin/src/main/resources/templates/demo/form/select.html
Normal file
259
ruoyi-admin/src/main/resources/templates/demo/form/select.html
Normal file
@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('下拉框')" />
|
||||
<th:block th:include="include :: select2-css" />
|
||||
<th:block th:include="include :: bootstrap-select-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<form>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/select2/select2</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组单选</label>
|
||||
<select class="form-control">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<option value="">请选择开发语言</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=select2" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=select2</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: select2-js" />
|
||||
<th:block th:include="include :: bootstrap-select-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
198
ruoyi-admin/src/main/resources/templates/demo/form/sortable.html
Normal file
198
ruoyi-admin/src/main/resources/templates/demo/form/sortable.html
Normal file
@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('拖动排序')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>任务列表</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="添加新任务" class="input input-sm form-control">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="warning-element">
|
||||
加强过程管理，及时统计教育经费使用情况，做到底码清楚，
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
支持财会人员的继续培训工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
协同教导处搞好助学金、减免教科书费的工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.06.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
做好职工公费医疗工作，按时发放门诊费。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
有计划地把课本复习三至五遍。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
看一本高质量的高中语法书
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
选择一份较好的英语报纸，通过阅读提高英语学习效果。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>进行中</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="success-element">
|
||||
全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
锁定有意向客户20家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
力争完成销售指标。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
在总结和摸索中前进。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
不断学习行业知识、产品知识，为客户带来实用介绍内容
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.11.04
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>已完成</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="info-element">
|
||||
制定工作日程表
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
每天坚持打40个有效电话，挖掘潜在客户
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
提高自己电话营销技巧，灵活专业地与客户进行电话交流
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('选项卡 & 面板')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本面板 <small class="m-l-sm">这是一个自定义面板</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
Bootstrap<br/>
|
||||
</h2>
|
||||
<p>
|
||||
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="tab-1" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>HTML5 文档类型</strong>
|
||||
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-2" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>移动设备优先</strong>
|
||||
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel blank-panel">
|
||||
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title m-b-md">
|
||||
<h4>图标选项卡</h4>
|
||||
</div>
|
||||
<div class="panel-options">
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="tabs_panels.html#tab-4"><i class="fa fa-laptop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-5"><i class="fa fa-desktop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-6"><i class="fa fa-signal"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-7"><i class="fa fa-bar-chart-o"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="tab-content">
|
||||
<div id="tab-4" class="tab-pane active">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
|
||||
<div id="tab-5" class="tab-pane">
|
||||
<strong>Normalize.css</strong>
|
||||
|
||||
<p>为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。</p>
|
||||
</div>
|
||||
<div id="tab-6" class="tab-pane">
|
||||
<strong>布局容器</strong>
|
||||
|
||||
<p>Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。</p>
|
||||
</div>
|
||||
<div id="tab-7" class="tab-pane">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-lg">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
|
||||
<div class="tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-8"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-9"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-8" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-9" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-10">第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-11"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-10" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-11" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>Bootstrap面板 <small>自定义背景</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
默认面板
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
主要
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
成功
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-info-circle"></i> 信息
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-warning"></i> 警告
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
危险
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
面板Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>折叠面板</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="panel-body">
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h5 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseOne">标题 #1</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseTwo">标题 #2</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseThree">标题 #3</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="jumbotron">
|
||||
<h1>超大屏幕</h1>
|
||||
<p>Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：</p>
|
||||
<div class="alert alert-warning">
|
||||
<ol>
|
||||
<li>创建一个带有 class .jumbotron. 的容器</li>
|
||||
<li>除了更大的 <h1>，字体粗细 font-weight 被减为 200px。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p><a role="button" class="btn btn-primary btn-lg">了解更多</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('文件上传')" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="file-loading">
|
||||
<input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多文件上传</label>
|
||||
<div class="file-loading">
|
||||
<input id="fileinput-demo-1" type="file" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-js" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#fileinput-demo-1").fileinput({
|
||||
'theme': 'explorer-fas',
|
||||
'uploadUrl': '#',
|
||||
overwriteInitial: false,
|
||||
initialPreviewAsData: true,
|
||||
initialPreview: [
|
||||
"/img/profile.jpg"
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
193
ruoyi-admin/src/main/resources/templates/demo/form/validate.html
Normal file
193
ruoyi-admin/src/main/resources/templates/demo/form/validate.html
Normal file
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表单校验')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>jQuery Validate 简介</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
|
||||
<ul>
|
||||
<li>安装简单</li>
|
||||
<li>内置超过20种数据验证方法</li>
|
||||
<li>直列错误提示信息</li>
|
||||
<li>可扩展的数据验证方法</li>
|
||||
<li>使用内置的元数据或插件选项来指定您的验证规则</li>
|
||||
<li>优雅的交互设计</li>
|
||||
</ul>
|
||||
<p>官网：<a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>简单示例</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="commentForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cname" name="name" minlength="2" type="text" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cemail" type="email" class="form-control" name="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">网站：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="curl" type="url" class="form-control" name="url">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">说明：</label>
|
||||
<div class="col-sm-8">
|
||||
<textarea id="ccomment" name="comment" class="form-control" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
<p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/" target="_blank">查看</a>
|
||||
</p>
|
||||
<p>中文API可参考：<a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>完整验证表单</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="signupForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓氏：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="firstname" name="firstname" class="form-control" type="text">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">名字：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="lastname" name="lastname" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="username" name="username" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="password" name="password" class="form-control" type="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">确认密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="email" name="email" class="form-control" type="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-8 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("#commentForm").validate();
|
||||
|
||||
var icon = "<i class='fa fa-times-circle'></i> ";
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
firstname: icon + "请输入你的姓",
|
||||
lastname: icon + "请输入您的名字",
|
||||
username: {
|
||||
required: icon + "请输入您的用户名",
|
||||
minlength: icon + "用户名必须两个字符以上"
|
||||
},
|
||||
password: {
|
||||
required: icon + "请输入您的密码",
|
||||
minlength: icon + "密码必须5个字符以上"
|
||||
},
|
||||
confirm_password: {
|
||||
required: icon + "请再次输入密码",
|
||||
minlength: icon + "密码必须5个字符以上",
|
||||
equalTo: icon + "两次输入的密码不一致"
|
||||
},
|
||||
email: icon + "请输入您的E-mail"
|
||||
}
|
||||
});
|
||||
|
||||
$("#username").focus(function () {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if (firstname && lastname && !this.value) {
|
||||
this.value = firstname + "." + lastname;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
192
ruoyi-admin/src/main/resources/templates/demo/form/wizard.html
Normal file
192
ruoyi-admin/src/main/resources/templates/demo/form/wizard.html
Normal file
@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
<th:block th:include="include :: jquery-steps-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="jumbotron">
|
||||
<h1>表单向导</h1>
|
||||
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
|
||||
<p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基础表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
这是一个简单的表单向导示例
|
||||
</p>
|
||||
<div id="wizard">
|
||||
<h1>第一步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第一步</h2>
|
||||
<p>
|
||||
这是第一步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第二步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第二步</h2>
|
||||
<p>
|
||||
这是第二步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第三步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第三步</h2>
|
||||
<p>
|
||||
这是第三步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>带验证的表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
带验证的表单向导
|
||||
</h2>
|
||||
<p>
|
||||
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
|
||||
</p>
|
||||
|
||||
<form id="form" action="http://www.zi-han.net/theme/hplus/form_wizard.html#" class="wizard-big">
|
||||
<h1>账户</h1>
|
||||
<fieldset>
|
||||
<h2>账户信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="form-group">
|
||||
<label>用户名 *</label>
|
||||
<input id="userName" name="userName" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码 *</label>
|
||||
<input id="password" name="password" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>确认密码 *</label>
|
||||
<input id="confirm" name="confirm" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="text-center">
|
||||
<div style="margin-top: 20px">
|
||||
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<h1>个人资料</h1>
|
||||
<fieldset>
|
||||
<h2>个人资料信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>姓名 *</label>
|
||||
<input id="name" name="name" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Email *</label>
|
||||
<input id="email" name="email" type="text" class="form-control required email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>地址 *</label>
|
||||
<input id="address" name="address" type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>警告</h1>
|
||||
<fieldset>
|
||||
<div class="text-center" style="margin-top: 120px">
|
||||
<h2>你是火星人 :-)</h2>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>完成</h1>
|
||||
<fieldset>
|
||||
<h2>条款</h2>
|
||||
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
|
||||
<label for="acceptTerms">我同意注册条款</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jquery-steps-js" />
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#wizard").steps();
|
||||
$("#form").steps({
|
||||
bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
|
||||
if (currentIndex > newIndex) {
|
||||
return true
|
||||
}
|
||||
if (newIndex === 3 && Number($("#age").val()) < 18) {
|
||||
return false
|
||||
}
|
||||
var form = $(this);
|
||||
if (currentIndex < newIndex) {
|
||||
$(".body:eq(" + newIndex + ") label.error", form).remove();
|
||||
$(".body:eq(" + newIndex + ") .error", form).removeClass("error")
|
||||
}
|
||||
form.validate().settings.ignore = ":disabled,:hidden";
|
||||
return form.valid()
|
||||
}, onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
|
||||
$(this).steps("next")
|
||||
}
|
||||
if (currentIndex === 2 && priorIndex === 3) {
|
||||
$(this).steps("previous")
|
||||
}
|
||||
}, onFinishing: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.validate().settings.ignore = ":disabled";
|
||||
return form.valid()
|
||||
}, onFinished: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.submit()
|
||||
}
|
||||
}).validate({
|
||||
errorPlacement: function (error, element) {
|
||||
element.before(error)
|
||||
}, rules: {confirm: {equalTo: "#password"}}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1944
ruoyi-admin/src/main/resources/templates/demo/icon/fontawesome.html
Normal file
1944
ruoyi-admin/src/main/resources/templates/demo/icon/fontawesome.html
Normal file
File diff suppressed because it is too large
Load Diff
1364
ruoyi-admin/src/main/resources/templates/demo/icon/glyphicons.html
Normal file
1364
ruoyi-admin/src/main/resources/templates/demo/icon/glyphicons.html
Normal file
File diff suppressed because it is too large
Load Diff
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>
|
||||
@ -0,0 +1,78 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('新增用户')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-add">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userCode" id="userCode" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userName" id="userName" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="userSex" 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 class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userPhone" id="userPhone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userEmail" id="userEmail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
|
||||
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:checked="${dict.isDefault == 'Y' ? true : false}">
|
||||
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/add", $('#form-user-add').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('用户详细')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-edit">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="form-control-static" th:text="${user.userCode}"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userName}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${@dict.getLabel('sys_user_sex', user.status)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userPhone}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${user.userEmail}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="form-control-static" th:text="${@dict.getLabel('sys_normal_disable', user.status)}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('修改用户')" />
|
||||
</head>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-user-edit" th:object="${user}">
|
||||
<input name="userId" type="hidden" th:field="*{userId}" />
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户编号：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userCode" id="userCode" th:field="*{userCode}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label ">用户姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userName" id="userName" th:field="*{userName}" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户性别：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="input-group" style="width: 100%">
|
||||
<select name="userSex" 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}" th:field="*{userSex}"></option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户手机：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userPhone" th:field="*{userPhone}" id="userPhone">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户邮箱：</label>
|
||||
<div class="col-sm-8">
|
||||
<input class="form-control" type="text" name="userEmail" th:field="*{userEmail}" id="userEmail">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户状态：</label>
|
||||
<div class="col-sm-8">
|
||||
<div class="radio-box" th:each="dict : ${@dict.getType('sys_normal_disable')}">
|
||||
<input type="radio" th:id="${dict.dictCode}" name="status" th:value="${dict.dictValue}" th:field="*{status}">
|
||||
<label th:for="${dict.dictCode}" th:text="${dict.dictLabel}"></label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "demo/operate";
|
||||
|
||||
$("#form-user-add").validate({
|
||||
onkeyup: false,
|
||||
rules:{
|
||||
userPhone:{
|
||||
isPhone:true
|
||||
},
|
||||
userEmail:{
|
||||
email:true
|
||||
},
|
||||
},
|
||||
focusCleanup: true
|
||||
});
|
||||
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.save(prefix + "/edit", $('#form-user-edit').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
<!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">
|
||||
|
||||
</body>
|
||||
</html>
|
||||
123
ruoyi-admin/src/main/resources/templates/demo/operate/table.html
Normal file
123
ruoyi-admin/src/main/resources/templates/demo/operate/table.html
Normal file
@ -0,0 +1,123 @@
|
||||
<!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="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="$.operate.add()">
|
||||
<i class="fa fa-plus"></i> 新增
|
||||
</a>
|
||||
<a class="btn btn-primary btn-edit disabled" onclick="$.operate.edit()">
|
||||
<i class="fa fa-edit"></i> 修改
|
||||
</a>
|
||||
<a class="btn btn-danger btn-del disabled" onclick="$.operate.removeAll()">
|
||||
<i class="fa fa-remove"></i> 删除
|
||||
</a>
|
||||
<a class="btn btn-info" onclick="$.table.importExcel()">
|
||||
<i class="fa fa-upload"></i> 导入
|
||||
</a>
|
||||
<a class="btn btn-warning" onclick="$.table.exportExcel()">
|
||||
<i class="fa fa-download"></i> 导出
|
||||
</a>
|
||||
<a class="btn btn-info btn-detail disabled" onclick="$.operate.detail()">
|
||||
<i class="fa fa-search"></i> 详细
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.operate.clean()">
|
||||
<i class="fa fa-trash"></i> 清空
|
||||
</a>
|
||||
</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/operate";
|
||||
var datas = [[${@dict.getType('sys_normal_disable')}]];
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
url: prefix + "/list",
|
||||
createUrl: prefix + "/add",
|
||||
updateUrl: prefix + "/edit/{id}",
|
||||
removeUrl: prefix + "/remove",
|
||||
exportUrl: prefix + "/export",
|
||||
importUrl: prefix + "/importData",
|
||||
importTemplateUrl: prefix + "/importTemplate",
|
||||
detailUrl: prefix + "/detail/{id}",
|
||||
cleanUrl: prefix + "/clean",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
search: true,
|
||||
modalName: "用户",
|
||||
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="#" onclick="$.operate.edit(\'' + row.userId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
|
||||
actions.push('<a class="btn btn-info btn-xs" href="#" onclick="$.operate.detail(\'' + row.userId + '\')"><i class="fa fa-search"></i>详细</a> ');
|
||||
actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + row.userId + '\')"><i class="fa fa-remove"></i>删除</a>');
|
||||
return actions.join('');
|
||||
}
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<!-- 导入区域 -->
|
||||
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10" style="display: none;">
|
||||
<div class="col-xs-offset-1">
|
||||
<input type="file" id="file" name="file"/>
|
||||
<div class="mt10 pt5">
|
||||
<input type="checkbox" id="updateSupport" name="updateSupport" title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据
|
||||
<a onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i class="fa fa-file-excel-o"></i> 下载模板</a>
|
||||
</div>
|
||||
<font color="red" class="pull-left mt10">
|
||||
提示：仅允许导入“xls”或“xlsx”格式文件！
|
||||
</font>
|
||||
</div>
|
||||
</form>
|
||||
</html>
|
||||
@ -0,0 +1,92 @@
|
||||
<!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 search-collapse">
|
||||
<form id="ordinary-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
用户名称：<input type="text" name="userName"/>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="query()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<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 query() {
|
||||
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);
|
||||
}
|
||||
</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('跳转至指定页')" />
|
||||
</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,
|
||||
detailView: true,
|
||||
detailFormatter: detailFormatter,
|
||||
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 detailFormatter(index, row) {
|
||||
var html = [];
|
||||
$.each(row, function(key, value) {
|
||||
html.push('<p><b>' + key + ':</b> ' + value + '</p>');
|
||||
});
|
||||
return html.join('');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
107
ruoyi-admin/src/main/resources/templates/demo/table/event.html
Normal file
107
ruoyi-admin/src/main/resources/templates/demo/table/event.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!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">
|
||||
<p class="select-title">自定义触发事件（点击某行/双击某行/单击某格/双击某格/服务器发送数据前触发/数据被加载时触发）</p>
|
||||
<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,
|
||||
onClickRow: onClickRow,
|
||||
onDblClickRow: onDblClickRow,
|
||||
onClickCell: onClickCell,
|
||||
onDblClickCell: onDblClickCell,
|
||||
responseHandler: responseHandler,
|
||||
onLoadSuccess: onLoadSuccess,
|
||||
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 onClickRow(row, $element){
|
||||
alert("单击行userId：" + row.userId + " userName：" + row.userName);
|
||||
}
|
||||
|
||||
function onDblClickRow(row, $element){
|
||||
alert("双击行userId：" + row.userId + " userName：" + row.userName);
|
||||
}
|
||||
|
||||
function onClickCell(field, value, row, $element){
|
||||
alert("单击格name：" + field + " value：" + value);
|
||||
}
|
||||
|
||||
function onDblClickCell(field, value, row, $element){
|
||||
alert("双击格name：" + field + " value：" + value);
|
||||
}
|
||||
|
||||
function responseHandler(res){
|
||||
alert("请求获取数据后处理回调函数");
|
||||
}
|
||||
|
||||
function onLoadSuccess(data){
|
||||
alert("当所有数据被加载时触发");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
<!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,
|
||||
showExport: true,
|
||||
exportOptions: {
|
||||
ignoreColumn: [0, 8] //忽略第一列和最后一列
|
||||
},
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,143 @@
|
||||
<!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="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success">
|
||||
<i class="fa fa-plus"></i> 新增
|
||||
</a>
|
||||
<a class="btn btn-primary btn-edit disabled">
|
||||
<i class="fa fa-edit"></i> 修改
|
||||
</a>
|
||||
<a class="btn btn-danger btn-del disabled">
|
||||
<i class="fa fa-remove"></i> 删除
|
||||
</a>
|
||||
</div>
|
||||
<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,
|
||||
fixedColumns: true,
|
||||
fixedNumber: 3,
|
||||
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);
|
||||
}
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试1'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试2'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试3'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试4'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试5'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试6'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试7'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试8'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试9'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试10'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试11'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试12'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试13'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试14'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试15'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '测试16'
|
||||
}]
|
||||
};
|
||||
$.table.init(options);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,83 @@
|
||||
<!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",
|
||||
showFooter: true,
|
||||
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 : '用户余额',
|
||||
footerFormatter:function (value) {
|
||||
var sumBalance = 0;
|
||||
for (var i in value) {
|
||||
sumBalance += parseFloat(value[i].userBalance);
|
||||
}
|
||||
return "总金额：" + sumBalance;
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '用户状态',
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
<!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-bordered">
|
||||
<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 : [
|
||||
[{
|
||||
title : '基本信息',
|
||||
align : 'center',
|
||||
colspan : 6
|
||||
}, {
|
||||
title : '其他信息',
|
||||
align : 'center',
|
||||
colspan : 3
|
||||
}
|
||||
],
|
||||
[{
|
||||
checkbox : true
|
||||
}, {
|
||||
field : 'userId',
|
||||
title : '用户ID'
|
||||
}, {
|
||||
field : 'userCode',
|
||||
title : '用户编号'
|
||||
}, {
|
||||
field : 'userName',
|
||||
title : '用户姓名'
|
||||
}, {
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
}, {
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
}, {
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
}, {
|
||||
field : 'status',
|
||||
title : '用户状态',
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,80 @@
|
||||
<!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";
|
||||
|
||||
$(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 : '用户姓名'
|
||||
},
|
||||
{
|
||||
title: '图片',
|
||||
formatter: function(value, row, index) {
|
||||
// 图片自由组合
|
||||
// 'img/profile.jpg' - 'http://ruoyi.vip/' 变成 http://ruoyi.vip/img/profile.jpg
|
||||
// 'ruoyi.png' - 'http://ruoyi.vip/' 变成 http://ruoyi.vip/ruoyi.jpg
|
||||
if(index % 2 == 0){
|
||||
return $.table.imageView('img/profile.jpg', 'http://ruoyi.vip/');
|
||||
}else {
|
||||
return $.table.imageView('ruoyi.png', 'http://ruoyi.vip/');
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
field : 'userPhone',
|
||||
title : '用户手机'
|
||||
},
|
||||
{
|
||||
field : 'userEmail',
|
||||
title : '用户邮箱'
|
||||
},
|
||||
{
|
||||
field : 'userBalance',
|
||||
title : '用户余额'
|
||||
},
|
||||
{
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
150
ruoyi-admin/src/main/resources/templates/demo/table/multi.html
Normal file
150
ruoyi-admin/src/main/resources/templates/demo/table/multi.html
Normal file
@ -0,0 +1,150 @@
|
||||
<!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-1" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<table id="bootstrap-table-2" 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 = {
|
||||
id: "bootstrap-table-1",
|
||||
url: prefix + "/list",
|
||||
createUrl: prefix + "/add",
|
||||
updateUrl: prefix + "/edit/{id}",
|
||||
removeUrl: prefix + "/remove",
|
||||
exportUrl: prefix + "/export",
|
||||
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 queryParams(params) {
|
||||
var search = $.table.queryParams(params);
|
||||
search.userName = '测试1';
|
||||
return search;
|
||||
}
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
id: "bootstrap-table-2",
|
||||
url: prefix + "/list",
|
||||
showSearch: false,
|
||||
showRefresh: false,
|
||||
showToggle: false,
|
||||
showColumns: false,
|
||||
queryParams: queryParams,
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
106
ruoyi-admin/src/main/resources/templates/demo/table/other.html
Normal file
106
ruoyi-admin/src/main/resources/templates/demo/table/other.html
Normal file
@ -0,0 +1,106 @@
|
||||
<!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="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="$.table.showColumn('userName')">
|
||||
<i class="fa fa-check"></i> 显示姓名
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.table.hideColumn('userName')">
|
||||
<i class="fa fa-close"></i> 隐藏姓名
|
||||
</a>
|
||||
<a class="btn btn-info" onclick="selectColumns()">
|
||||
<i class="fa fa-search"></i> 获取选中姓名
|
||||
</a>
|
||||
<a class="btn btn-warning" onclick="$.table.refresh()">
|
||||
<i class="fa fa-refresh"></i> 刷新
|
||||
</a>
|
||||
<a class="btn btn-danger" onclick="$.table.destroy()">
|
||||
<i class="fa fa-refresh"></i> 销毁
|
||||
</a>
|
||||
<a class="btn btn-primary" onclick="selectFirstColumns()">
|
||||
<i class="fa fa-search"></i> 获取选中首列值
|
||||
</a>
|
||||
</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 selectColumns() {
|
||||
var column = $.table.selectColumns('userName');
|
||||
alert(column);
|
||||
}
|
||||
|
||||
function selectFirstColumns() {
|
||||
var column = $.table.selectFirstColumns();
|
||||
alert(column);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,77 @@
|
||||
<!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,
|
||||
showPageGo: true,
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
158
ruoyi-admin/src/main/resources/templates/demo/table/params.html
Normal file
158
ruoyi-admin/src/main/resources/templates/demo/table/params.html
Normal file
@ -0,0 +1,158 @@
|
||||
<!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">
|
||||
<p class="select-title">通过queryParams方法设置</p>
|
||||
<table id="bootstrap-table" data-mobile-responsive="true"></table>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<form id="post-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
用户姓名：<input type="text" name="userName" value="测试6"/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-12 select-table table-striped">
|
||||
<p class="select-title">通过form自动填充</p>
|
||||
<table id="bootstrap-table-form" 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,
|
||||
queryParams: queryParams,
|
||||
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 queryParams(params) {
|
||||
var search = $.table.queryParams(params);
|
||||
search.userName = '测试1';
|
||||
return search;
|
||||
}
|
||||
|
||||
|
||||
$(function() {
|
||||
var options = {
|
||||
id: "bootstrap-table-form",
|
||||
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);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,89 @@
|
||||
<!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="btn-group-sm" id="toolbar" role="group">
|
||||
<a class="btn btn-success" onclick="checkItem()">
|
||||
<i class="fa fa-check"></i> 选中项
|
||||
</a>
|
||||
</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,
|
||||
rememberSelected: true,
|
||||
columns: [{
|
||||
field: 'state',
|
||||
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 checkItem(){
|
||||
var arrays = $.table.selectColumns("userId");
|
||||
alert(arrays);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
168
ruoyi-admin/src/main/resources/templates/demo/table/search.html
Normal file
168
ruoyi-admin/src/main/resources/templates/demo/table/search.html
Normal file
@ -0,0 +1,168 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表格搜索')" />
|
||||
<th:block th:include="include :: bootstrap-select-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="container-div">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">普通条件查询</p>
|
||||
<form id="ordinary-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li>
|
||||
处理状态：<select name="status">
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">时间条件查询</p>
|
||||
<form id="time-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li class="select-time">
|
||||
<label>创建时间： </label>
|
||||
<input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]"/>
|
||||
<span>-</span>
|
||||
<input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]"/>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('time-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">下拉多选条件查询</p>
|
||||
<form id="select-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
商户编号：<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
终端编号：<input type="text" name="termId"/>
|
||||
</li>
|
||||
<li class="select-selectpicker">
|
||||
<label>操作类型： </label><select class="selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('select-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12 search-collapse">
|
||||
<p class="select-title">复杂条件查询</p>
|
||||
<form id="complex-form">
|
||||
<div class="select-list">
|
||||
<ul>
|
||||
<li>
|
||||
<p>商户编号：</p>
|
||||
<input type="text" name="userId"/>
|
||||
</li>
|
||||
<li>
|
||||
<p>订单号：</p>
|
||||
<input type="text" name="orderNo"/>
|
||||
</li>
|
||||
<li>
|
||||
<p>日期：</p>
|
||||
<input type="text" class="time-input" placeholder="日期"/>
|
||||
</li>
|
||||
<li class="select-selectpicker">
|
||||
<p>状态：</p>
|
||||
<select class="selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<option value="">所有</option>
|
||||
<option value="0">初始</option>
|
||||
<option value="1">处理中</option>
|
||||
<option value="2">交易成功</option>
|
||||
<option value="3">交易失败</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>供货商通道：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">腾讯</option>
|
||||
<option value="1">天猫</option>
|
||||
<option value="2">京东</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>来源：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">手机</option>
|
||||
<option value="1">电脑</option>
|
||||
<option value="2">第三方</option>
|
||||
</select>
|
||||
</li>
|
||||
<li>
|
||||
<p>运营商：</p>
|
||||
<select>
|
||||
<option value="">所有</option>
|
||||
<option value="0">移动</option>
|
||||
<option value="1">电信</option>
|
||||
<option value="2">联通</option>
|
||||
</select>
|
||||
</li>
|
||||
<li class="select-time">
|
||||
<p>回调时间：</p>
|
||||
<input type="text" class="time-input" placeholder="开始时间"/>
|
||||
<span>-</span>
|
||||
<input type="text" class="time-input" placeholder="结束时间"/>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="btn btn-primary btn-rounded btn-sm m50" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
|
||||
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset('complex-form')"><i class="fa fa-refresh"></i> 重置</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-select-js" />
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user