p85126437
/
datagear
forked from p81075629/datagear
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

[web]添加用于表格编辑的部分界面元素，重命名样式page-data-grid为page-grid，page-data-form为page-form

This commit is contained in:
datagear 2018-12-07 18:26:55 +08:00
parent 63c8c872e2
commit dfef4c0e52
21 changed files with 205 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
datagear-web/src/main/webapp/WEB-INF/jsp/data/data_form.jsp
View File

@ -39,7 +39,7 @@ boolean batchSet = ("true".equalsIgnoreCase(getStringValue(request, "batchSet"))
</title>
</head>
<body>
<div id="${pageId}" class="page-data-form">
<div id="${pageId}" class="page-form">
<div class="head">
</div>
<div class="content">

14
datagear-web/src/main/webapp/WEB-INF/jsp/data/data_grid.jsp
View File

@ -44,7 +44,7 @@ List<PropertyPathDisplayName> conditionSource = (List<PropertyPathDisplayName>)r
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-query">
<div id="${pageId}" class="page-grid page-grid-query">
<div class="head">
<div class="search">
<%@ include file="include/data_page_obj_searchform_html.jsp" %>
@ -64,8 +64,13 @@ List<PropertyPathDisplayName> conditionSource = (List<PropertyPathDisplayName>)r
<table id="${pageId}-table" width="100%" class="hover stripe">
</table>
</div>
<div class="foot">
<div id="${pageId}-pagination"></div>
<div class="foot foot-edit-grid">
<%if(!readonly){%>
<%@ include file="include/data_page_obj_edit_grid_html.jsp" %>
<%}%>
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>
@ -75,6 +80,9 @@ List<PropertyPathDisplayName> conditionSource = (List<PropertyPathDisplayName>)r
<%@ include file="include/data_page_obj_searchform_js.jsp" %>
<%@ include file="../include/page_obj_pagination.jsp" %>
<%@ include file="include/data_page_obj_grid.jsp" %>
<%if(!readonly){%>
<%@ include file="include/data_page_obj_edit_grid_js.jsp" %>
<%}%>
<script type="text/javascript">
(function(pageObj)
{

2
datagear-web/src/main/webapp/WEB-INF/jsp/data/data_prop_value_form.jsp
View File

@ -43,7 +43,7 @@ boolean isPrivatePropertyModel = ModelUtils.isPrivatePropertyModelTail(propertyP
</title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-propvalue">
<div id="${pageId}" class="page-form page-form-propvalue">
<div class="head">
</div>
<div class="content">

10
datagear-web/src/main/webapp/WEB-INF/jsp/data/data_prop_value_grid.jsp
View File

@ -46,7 +46,7 @@ boolean isPrivatePropertyModel = ModelUtils.isPrivatePropertyModelTail(propertyP
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-empv">
<div id="${pageId}" class="page-grid <%if(clientOperation){%>page-grid-hidden-foot<%}%> page-grid-empv">
<div class="head">
<div class="search">
<%if(!clientOperation){%>
@ -68,12 +68,14 @@ boolean isPrivatePropertyModel = ModelUtils.isPrivatePropertyModelTail(propertyP
<%}%>
</div>
</div>
<div class="content <%if(clientOperation){%>content-hidden-foot<%}%>">
<div class="content">
<table id="${pageId}-table" style="width:100%;" class="hover stripe">
</table>
</div>
<div class="foot <%if(clientOperation){%>hidden-foot<%}%>"">
<div id="${pageId}-pagination"></div>
<div class="foot">
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>

6
datagear-web/src/main/webapp/WEB-INF/jsp/data/data_select_prop_value.jsp
View File

@ -43,7 +43,7 @@ else
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-spv">
<div id="${pageId}" class="page-grid page-grid-spv">
<div class="head">
<div class="search">
<%@ include file="include/data_page_obj_searchform_html.jsp" %>
@ -60,7 +60,9 @@ else
</table>
</div>
<div class="foot">
<div id="${pageId}-pagination"></div>
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>

20
datagear-web/src/main/webapp/WEB-INF/jsp/data/include/data_page_obj_edit_grid_html.jsp Normal file
View File

@ -0,0 +1,20 @@
<%--
/*
* Copyright 2018 datagear.tech. All Rights Reserved.
*/
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
编辑表格功能HTML片段。
--%>
<div class="edit-grid">
<div class="edit-grid-switch-wrapper">
<label for="${pageId}-editGridSwitch">编辑表格</label>
<input id="${pageId}-editGridSwitch" type="checkbox" value="1" />
</div>
<div class="edit-grid-operation">
<button id="${pageId}-editGridButtonCancel" type="button" class="button-cancel" style="display: none;">恢复</button>
<button id="${pageId}-editGridButtonCancelAll" type="button" class="button-cancel-all" style="display: none;">全部恢复</button>
<button id="${pageId}-editGridButtonSave" type="button" class="button-save recommended" style="display: none;">保存</button>
</div>
</div>

57
datagear-web/src/main/webapp/WEB-INF/jsp/data/include/data_page_obj_edit_grid_js.jsp Normal file
View File

@ -0,0 +1,57 @@
<%--
/*
* Copyright 2018 datagear.tech. All Rights Reserved.
*/
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
编辑表格功能JS片段。
依赖：
page_obj_grid.jsp
data_page_obj.jsp
data_page_obj_edit_grid_html.jsp
变量：
--%>
<script type="text/javascript">
(function(pageObj)
{
pageObj.editGridSwitch = function()
{
return pageObj.element("#${pageId}-editGridSwitch");
};
pageObj.editGridOperation = function()
{
return pageObj.element(".edit-grid-operation");
};
pageObj.editGridOperationButtons = function()
{
return pageObj.element(".edit-grid-operation button");
};
pageObj.editGridSwitch().checkboxradio({icon:false}).click(function()
{
if($(this).is(":checked"))
{
pageObj.editGridOperationButtons().show("fade");
pageObj.element(".head .operation .ui-button").addClass("ui-state-highlight");
pageObj.element(".head .search").addClass("ui-state-disabled");
pageObj.element(".foot .pagination").addClass("ui-state-disabled");
}
else
{
pageObj.editGridOperationButtons().hide("fade");
pageObj.element(".head .operation .ui-button").removeClass("ui-state-highlight");
pageObj.element(".head .search").removeClass("ui-state-disabled");
pageObj.element(".foot .pagination").removeClass("ui-state-disabled");
}
});
$.initButtons(pageObj.editGridOperation());
})
(${pageId});
</script>

2
datagear-web/src/main/webapp/WEB-INF/jsp/driverEntity/driverEntity_form.jsp
View File

@ -25,7 +25,7 @@ boolean readonly = ("true".equalsIgnoreCase(getStringValue(request, DriverEntity
<title><%@ include file="../include/html_title_app_name.jsp" %><fmt:message key='<%=titleMessageKey%>' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-driverEntity">
<div id="${pageId}" class="page-form page-form-driverEntity">
<form id="${pageId}-form" action="<%=request.getContextPath()%>/driverEntity/<%=formAction%>" method="POST">
<div class="form-head"></div>
<div class="form-content">

6
datagear-web/src/main/webapp/WEB-INF/jsp/driverEntity/driverEntity_grid.jsp
View File

@ -26,7 +26,7 @@ boolean selectonly = ("true".equalsIgnoreCase(getStringValue(request, DriverEnti
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-driverEntity">
<div id="${pageId}" class="page-grid page-grid-hidden-foot page-grid-driverEntity">
<div class="head">
<div class="search">
<%@ include file="../include/page_obj_searchform.html.jsp" %>
@ -50,7 +50,9 @@ boolean selectonly = ("true".equalsIgnoreCase(getStringValue(request, DriverEnti
</table>
</div>
<div class="foot">
<div id="${pageId}-pagination"></div>
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>

2
datagear-web/src/main/webapp/WEB-INF/jsp/driverEntity/driverEntity_import.jsp
View File

@ -17,7 +17,7 @@
<title><%@ include file="../include/html_title_app_name.jsp" %><fmt:message key='driverEntity.importDriverEntity' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-driverEntityImport">
<div id="${pageId}" class="page-form page-form-driverEntityImport">
<form id="${pageId}-form" action="<%=request.getContextPath()%>/driverEntity/saveImport" method="POST">
<div class="form-head"></div>
<div class="form-content">

2
datagear-web/src/main/webapp/WEB-INF/jsp/global_setting.jsp
View File

@ -17,7 +17,7 @@
<title><%@ include file="include/html_title_app_name.jsp" %><fmt:message key='globalSetting.smtpSetting' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-globalSetting">
<div id="${pageId}" class="page-form page-form-globalSetting">
<form id="${pageId}-form" action="<%=request.getContextPath()%>/globalSetting/save" method="POST">
<div class="form-head"></div>
<div class="form-content">

4
datagear-web/src/main/webapp/WEB-INF/jsp/login.jsp
View File

@ -47,7 +47,7 @@ if(loginUser == null)
<a class="link" href="<c:url value="/" />"><fmt:message key='backToMainPage' /></a>
</div>
</div>
<div class="page-data-form page-data-form-login">
<div class="page-form page-form-login">
<form id="${pageId}-form" action="<c:url value="/login/doLogin" />" method="POST">
<div class="form-head"></div>
<div class="form-content">
@ -92,7 +92,7 @@ if(loginUser == null)
//元素设置了“checked='checked'”后icon显示有问题，这里先隐藏
$("input[type=checkbox]", pageObj.element()).checkboxradio({icon:false});
var dialog=pageObj.element(".page-data-form").dialog({
var dialog=pageObj.element(".page-form").dialog({
appendTo: pageObj.element(),
title: "<fmt:message key='login.login' />",
position: {my : "center top", at : "center top+75"},

4
datagear-web/src/main/webapp/WEB-INF/jsp/register.jsp
View File

@ -23,7 +23,7 @@
<a class="link" href="<c:url value="/" />"><fmt:message key='backToMainPage' /></a>
</div>
</div>
<div class="page-data-form page-data-form-register">
<div class="page-form page-form-register">
<form id="${pageId}-form" action="<c:url value="/register/doRegister" />" method="POST">
<div class="form-head"></div>
<div class="form-content">
@ -87,7 +87,7 @@
//元素设置了“checked='checked'”后icon显示有问题，这里先隐藏
$("input[type=checkbox]", pageObj.element()).checkboxradio({icon:false});
var dialog=pageObj.element(".page-data-form").dialog({
var dialog=pageObj.element(".page-form").dialog({
appendTo: pageObj.element(),
title: "<fmt:message key='register.register' />",
position: {my : "center top", at : "center top+75"},

2
datagear-web/src/main/webapp/WEB-INF/jsp/reset_password.jsp
View File

@ -47,7 +47,7 @@ String loginUrl = request.getContextPath() + "/login";
<a class="link" href="<c:url value="/" />"><fmt:message key='backToMainPage' /></a>
</div>
</div>
<div class="page-data-form page-data-form-reset-password">
<div class="page-form page-form-reset-password">
<div class="head">
<fmt:message key='resetPassword.resetPassword' />
</div>

6
datagear-web/src/main/webapp/WEB-INF/jsp/reset_password_request_history.jsp
View File

@ -19,7 +19,7 @@
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-reset-password-request-history">
<div id="${pageId}" class="page-grid page-grid-reset-password-request-history">
<div class="head">
<div class="search">
<%@ include file="include/page_obj_searchform.html.jsp" %>
@ -32,7 +32,9 @@
</table>
</div>
<div class="foot">
<div id="${pageId}-pagination"></div>
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>

2
datagear-web/src/main/webapp/WEB-INF/jsp/schema/schema_build_url.jsp
View File

@ -19,7 +19,7 @@ boolean isPreview = "1".equals(getStringValue(request, "preview"));
<title><%@ include file="../include/html_title_app_name.jsp" %><fmt:message key='schema.schemaBuildUrl' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-buildSchemaUrl">
<div id="${pageId}" class="page-form page-form-buildSchemaUrl">
<div id="dbUrlBuilderScriptCode" style="display: none;">
$.schemaUrlBuilder.add(
<%=request.getAttribute("scriptCode")%>

2
datagear-web/src/main/webapp/WEB-INF/jsp/schema_url_builder.jsp
View File

@ -16,7 +16,7 @@
<title><%@ include file="include/html_title_app_name.jsp" %><fmt:message key='schemaUrlBuilder.schemaUrlBuilder' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-schemaUrlBuilder">
<div id="${pageId}" class="page-form page-form-schemaUrlBuilder">
<form id="${pageId}-form" action="<%=request.getContextPath()%>/schemaUrlBuilder/saveScriptCode" method="POST">
<div class="form-head"></div>
<div class="form-content">

2
datagear-web/src/main/webapp/WEB-INF/jsp/user/user_form.jsp
View File

@ -27,7 +27,7 @@ boolean isAdd = "saveAdd".equals(formAction);
<title><%@ include file="../include/html_title_app_name.jsp" %><fmt:message key='<%=titleMessageKey%>' /></title>
</head>
<body>
<div id="${pageId}" class="page-data-form page-data-form-user">
<div id="${pageId}" class="page-form page-form-user">
<form id="${pageId}-form" action="<%=request.getContextPath()%>/user/<%=formAction%>" method="POST">
<div class="form-head"></div>
<div class="form-content">

6
datagear-web/src/main/webapp/WEB-INF/jsp/user/user_grid.jsp
View File

@ -26,7 +26,7 @@ boolean selectonly = ("true".equalsIgnoreCase(getStringValue(request, AbstractCo
<%if(!ajaxRequest){%>
<div style="height:99%;">
<%}%>
<div id="${pageId}" class="page-data-grid page-data-grid-user">
<div id="${pageId}" class="page-grid page-grid-hidden-foot page-grid-user">
<div class="head">
<div class="search">
<%@ include file="../include/page_obj_searchform.html.jsp" %>
@ -48,7 +48,9 @@ boolean selectonly = ("true".equalsIgnoreCase(getStringValue(request, AbstractCo
</table>
</div>
<div class="foot">
<div id="${pageId}-pagination"></div>
<div class="pagination-wrapper">
<div id="${pageId}-pagination" class="pagination"></div>
</div>
</div>
</div>
<%if(!ajaxRequest){%>

120
datagear-web/src/main/webapp/static/theme/common.css
View File

@ -722,59 +722,59 @@ table.dataTable tbody tr.selected .checkbox .ui-icon{
}
/*驱动信息管理表单页*/
.page-data-form-driverEntity{
.page-form-driverEntity{
}
.page-data-form-driverEntity .driver-files{
.page-form-driverEntity .driver-files{
display: inline-block;
height: 8em;
overflow: auto;
padding: 3px 2px;
}
.page-data-form-driverEntity .driver-files .driver-file{
.page-form-driverEntity .driver-files .driver-file{
margin-bottom: 5px;
padding: 2px 2px;
white-space: nowrap;
overflow: hidden;
}
.page-data-form-driverEntity .driver-files .driver-file .driver-file-icon{
.page-form-driverEntity .driver-files .driver-file .driver-file-icon{
cursor: pointer;
margin-right: 0.2em;
}
.page-data-form-driverEntity .driver-files .driver-file .driver-file-info{
.page-form-driverEntity .driver-files .driver-file .driver-file-info{
white-space: nowrap;
overflow: hidden;
}
.page-data-form-driverEntity .driver-upload-parent{
.page-form-driverEntity .driver-upload-parent{
display: inline-block;
vertical-align: top;
margin-left: 0.2em;
}
/*驱动程序导入表单页*/
.page-data-form-driverEntityImport{
.page-form-driverEntityImport{
}
.page-data-form-driverEntityImport .driver-entity-infos{
.page-form-driverEntityImport .driver-entity-infos{
display: inline-block;
height: 15em;
overflow: auto;
padding: 3px 2px;
}
.page-data-form-driverEntityImport .driver-entity-infos .driver-entity-item{
.page-form-driverEntityImport .driver-entity-infos .driver-entity-item{
margin-bottom: 5px;
padding: 2px 2px;
white-space: nowrap;
overflow: hidden;
}
.page-data-form-driverEntityImport .driver-entity-infos .driver-entity-item .ui-icon-close{
.page-form-driverEntityImport .driver-entity-infos .driver-entity-item .ui-icon-close{
cursor: pointer;
margin-right: 0.2em;
}
.page-data-form-driverEntityImport .driver-entity-infos .driver-entity-item .driver-entity-info{
.page-form-driverEntityImport .driver-entity-infos .driver-entity-item .driver-entity-info{
white-space: nowrap;
overflow: hidden;
}
/*表单页*/
.page-data-form{
.page-form{
}
/*查询表单*/
@ -890,7 +890,7 @@ table.dataTable tbody tr.selected .checkbox .ui-icon{
}
/*表格页*/
.page-data-grid{
.page-grid{
position: relative;
width: 100%;
height: 100%;
@ -898,111 +898,155 @@ table.dataTable tbody tr.selected .checkbox .ui-icon{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.page-data-grid .head{
.page-grid .head{
height: 2.5em;
padding: .25em 0;
}
.page-data-grid .head .search{
.page-grid .head .search{
display: inline-block;
width: 41%;
}
.page-data-grid .head .operation{
.page-grid .head .operation{
display: inline-block;
float: right;
width: 57%;
text-align: right;
}
.page-data-grid .content{
.page-grid .content{
position: absolute;
width: 100%;
top: 3em;
bottom: 2em;
bottom: 3em;
}
.page-data-grid .content.content-hidden-foot{
.page-grid.page-grid-hidden-foot .content{
bottom: 0em;
}
.page-data-grid .foot{
.page-grid .foot{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2em;
height: 3em;
display: inline-block;
padding: 0 0;
}
.page-data-grid .foot.hidden-foot{
.page-grid.page-grid-hidden-foot .foot{
height: 0;
}
.page-grid .foot .pagination-wrapper{
display: inline-block;
float: right;
width: 90%;
height: 100%;
position: relative;
}
.page-grid .foot .pagination-wrapper .pagination{
display: inline-block;
position: absolute;
bottom: 0;
right: 0.1em;
}
.page-grid .foot.foot-edit-grid .edit-grid{
display: inline-block;
width: 50%;
height: 100%;
position: relative;
}
.page-grid .foot.foot-edit-grid .edit-grid .edit-grid-switch-wrapper{
display: inline-block;
position: absolute;
font-size: small;
bottom: 0;
left: 0.1em;
}
.page-grid .foot.foot-edit-grid .edit-grid .edit-grid-operation{
display: inline-block;
position: absolute;
right: -3.5em;
bottom: 0;
}
.page-grid .foot.foot-edit-grid .edit-grid .edit-grid-operation .ui-button{
margin-left: 0.2em;
margin-right: 0.2em;
}
.page-grid .foot.foot-edit-grid .edit-grid .edit-grid-operation .ui-button.button-save{
padding-left: 2.5em;
padding-right: 2.5em;
margin-left: 1em;
}
.page-grid .foot.foot-edit-grid .pagination-wrapper{
width: 49%;
}
.page-data-form-buildSchemaUrl .url-preview{
.page-form-buildSchemaUrl .url-preview{
margin-top: 1em;
text-align: center;
height: 2em;
font-weight: bold;
}
.page-data-form-schemaUrlBuilder .form-item-value-scriptCode{
.page-form-schemaUrlBuilder .form-item-value-scriptCode{
display: block;
}
.page-data-form-schemaUrlBuilder .preview-script-code-button.ui-button{
.page-form-schemaUrlBuilder .preview-script-code-button.ui-button{
padding-left: 2em;
padding-right: 2em;
}
.page-data-form-schemaUrlBuilder form .form-content .form-item .form-item-value textarea.script-code-textarea{
.page-form-schemaUrlBuilder form .form-content .form-item .form-item-value textarea.script-code-textarea{
height: 22em;
}
.page-data-form-schemaUrlBuilder .script-code-note{
.page-form-schemaUrlBuilder .script-code-note{
display: inline-block;
width: 35%;
height: 22em;
overflow: auto;
}
.page-data-form-schemaUrlBuilder .script-code-note span{
.page-form-schemaUrlBuilder .script-code-note span{
white-space: nowrap;
}
.page-data-form-reset-password{
.page-form-reset-password{
position: absolute;
width: auto;
left: 9%;
right: 9%;
}
.page-data-form-reset-password .head{
.page-form-reset-password .head{
margin-top: 1em;
font-size: larger;
font-weight: bold;
text-align: center;
}
.page-data-form-reset-password .content .steps{
.page-form-reset-password .content .steps{
margin-top: 2em;
margin-bottom: 1em;
}
.page-data-form-reset-password .content .steps .step{
.page-form-reset-password .content .steps .step{
display: inline-block;
font-size: larger;
width: 18%;
margin-right: 2%;
padding: 0.5em 2%;
}
.page-data-form-reset-password .content .form-content{
.page-form-reset-password .content .form-content{
height: 10em;
padding: 2em 3em;
}
.page-data-form-reset-password .content .form-foot .ui-button{
.page-form-reset-password .content .form-foot .ui-button{
width: 14em;
}
.page-data-form-reset-password .content .form-content .step-finish-content{
.page-form-reset-password .content .form-content .step-finish-content{
font-size: large;
}
.page-data-form-reset-password .content .form-content .step-finish-content a{
.page-form-reset-password .content .form-content .step-finish-content a{
margin: 0 0.3em;
font-weight: bold;
}
.page-data-form-reset-password .content .form-content .skip-check-user-admin-warn{
.page-form-reset-password .content .form-content .skip-check-user-admin-warn{
margin-top: 0.2em;
padding: 0.3em 0.3em;
}
.page-data-form-reset-password .content .form-content .skip-check-user-admin-warn .ui-icon-info{
.page-form-reset-password .content .form-content .skip-check-user-admin-warn .ui-icon-info{
margin-right: 0.3em;
}

2
datagear-web/src/main/webapp/static/theme/datagear-pagination.css
View File

@ -5,8 +5,6 @@
@CHARSET "UTF-8";
.pagination{
text-align: right;
padding: 0.1em 0.1em;
}
.pagination .label{
display: inline-block;