manager/my-worker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

表单演示优化。

Browse Source
This commit is contained in:
thinkgem
2018-05-13 18:47:18 +08:00
parent a4c0ee8f3c
commit d74b527635
3 changed files with 397 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
web/src/main/resources/views/modules/demo/formEditForm.html
View File

@@ -79,9 +79,9 @@
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 日期选择：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 日期选择：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/> dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -89,9 +89,9 @@
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 日期时间：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 日期时间：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/> dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -110,6 +110,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 用户多选：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:treeselect id="testUser2" title="用户选择"
path="testUser.userCode" labelPath="testUser.userName"
url="${ctx}/sys/office/treeData?isLoadUser=true"
class="" allowClear="true" checkbox="true"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
@@ -122,8 +136,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
@@ -143,7 +155,7 @@
<label class="control-label col-sm-2" title=""> <label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 备注信息：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 备注信息：<i class="fa icon-question hide"></i></label>
<div class="col-sm-10"> <div class="col-sm-10">
<#form:ueditor path="remarks" maxlength="10000" height="200" class="required" <#form:ueditor path="remarks" maxlength="10000" height="200" class=""
simpleToolbars="true" readonly="false" outline="false"/> simpleToolbars="true" readonly="false" outline="false"/>
</div> </div>
</div> </div>
@@ -160,6 +172,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2">返回路径：</label>
<div class="col-sm-10">
<#form:fileupload id="uploadImage2" returnPath="true"
filePathInputId="uploadImage2Path" fileNameInputId="uploadImage2Name"
uploadType="image" readonly="false" maxUploadNum="3" isMini="false"/>
<#form:input name="uploadImage2Path" class="form-control"/>
<#form:input name="uploadImage2Name" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
@@ -243,7 +269,7 @@ $("#testDataChildDataGrid").dataGrid({
}, },
{header:'日期选择', name:'testDate', width:150, {header:'日期选择', name:'testDate', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true', editable:true, edittype:'text', editoptions:{'class':'form-control Wdate ', 'readonly':'true',
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});
}); });
@@ -251,7 +277,7 @@ $("#testDataChildDataGrid").dataGrid({
}, },
{header:'日期时间', name:'testDatetime', width:150, {header:'日期时间', name:'testDatetime', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true', editable:true, edittype:'text', editoptions:{'class':'form-control Wdate ', 'readonly':'true',
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});
}); });
@@ -334,14 +360,15 @@ $("#testDataChildDataGrid").dataGrid({
<script> <script>
$("#inputForm").validate({ $("#inputForm").validate({
submitHandler: function(form){ submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){ // js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message); // js.showMessage(data.message);
if(data.result == Global.TRUE){ // if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){ // js.closeCurrentTabPage(function(contentWindow){
contentWindow.page(); // contentWindow.page();
}); // });
} // }
}, "json"); // }, "json");
js.showMessage('模拟保存成功');
} }
}); });
</script> </script>

25
web/src/main/resources/views/modules/demo/formLayoutForm.html
View File

@@ -81,9 +81,9 @@
<div class="col-xs-4"> <div class="col-xs-4">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 日期：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 日期：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/> dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -91,9 +91,9 @@
<div class="col-xs-4"> <div class="col-xs-4">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 时间：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 时间：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/> dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -241,14 +241,15 @@
<script> <script>
$("#inputForm").validate({ $("#inputForm").validate({
submitHandler: function(form){ submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){ // js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message); // js.showMessage(data.message);
if(data.result == Global.TRUE){ // if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){ // js.closeCurrentTabPage(function(contentWindow){
contentWindow.page(); // contentWindow.page();
}); // });
} // }
}, "json"); // }, "json");
js.showMessage('模拟保存成功');
} }
}); });
</script> </script>

67
web/src/main/resources/views/modules/demo/formTableForm.html
View File

@@ -14,11 +14,11 @@
<div class="form-unit">基本信息</div> <div class="form-unit">基本信息</div>
<#form:hidden path="id"/> <#form:hidden path="id"/>
<div class="row"> <div class="row">
<div class="col-xs-6"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 单行文本：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 单行文本：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-10">
<#form:input path="testInput" maxlength="200" class="form-control"/> <#form:input path="testInput" maxlength="200" class="form-control"/>
</div> </div>
</div> </div>
@@ -79,9 +79,9 @@
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 日期选择：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 日期选择：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDate" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/> dataFormat="date" onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -89,9 +89,9 @@
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
<span class="required ">*</span> 日期时间：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 日期时间：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8"> <div class="col-sm-8">
<#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate required" <#form:input path="testDatetime" readonly="true" maxlength="20" class="form-control Wdate "
dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/> dataFormat="datetime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});"/>
</div> </div>
</div> </div>
@@ -110,6 +110,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col-xs-6">
<div class="form-group">
<label class="control-label col-sm-4" title="">
<span class="required hide">*</span> 用户多选：<i class="fa icon-question hide"></i></label>
<div class="col-sm-8">
<#form:treeselect id="testUser2" title="用户选择"
path="testUser.userCode" labelPath="testUser.userName"
url="${ctx}/sys/office/treeData?isLoadUser=true"
class="" allowClear="true" checkbox="true"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
@@ -122,8 +136,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="row">
<div class="col-xs-6"> <div class="col-xs-6">
<div class="form-group"> <div class="form-group">
<label class="control-label col-sm-4" title=""> <label class="control-label col-sm-4" title="">
@@ -143,7 +155,7 @@
<label class="control-label col-sm-2" title=""> <label class="control-label col-sm-2" title="">
<span class="required hide">*</span> 备注信息：<i class="fa icon-question hide"></i></label> <span class="required hide">*</span> 备注信息：<i class="fa icon-question hide"></i></label>
<div class="col-sm-10"> <div class="col-sm-10">
<#form:ueditor path="remarks" maxlength="10000" height="200" class="required" <#form:ueditor path="remarks" maxlength="10000" height="200" class=""
simpleToolbars="true" readonly="false" outline="false"/> simpleToolbars="true" readonly="false" outline="false"/>
</div> </div>
</div> </div>
@@ -160,6 +172,20 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label class="control-label col-sm-2">返回路径：</label>
<div class="col-sm-10">
<#form:fileupload id="uploadImage2" returnPath="true"
filePathInputId="uploadImage2Path" fileNameInputId="uploadImage2Name"
uploadType="image" readonly="false" maxUploadNum="3" isMini="false"/>
<#form:input name="uploadImage2Path" class="form-control"/>
<#form:input name="uploadImage2Name" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row"> <div class="row">
<div class="col-xs-12"> <div class="col-xs-12">
<div class="form-group"> <div class="form-group">
@@ -243,7 +269,7 @@ $("#testDataChildDataGrid").dataGrid({
}, },
{header:'日期选择', name:'testDate', width:150, {header:'日期选择', name:'testDate', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true', editable:true, edittype:'text', editoptions:{'class':'form-control Wdate ', 'readonly':'true',
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false});
}); });
@@ -251,7 +277,7 @@ $("#testDataChildDataGrid").dataGrid({
}, },
{header:'日期时间', name:'testDatetime', width:150, {header:'日期时间', name:'testDatetime', width:150,
formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'}, formatter:'date', formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'Y-m-d H:i:s'},
editable:true, edittype:'text', editoptions:{'class':'form-control Wdate required', 'readonly':'true', editable:true, edittype:'text', editoptions:{'class':'form-control Wdate ', 'readonly':'true',
dataInit: function(element){ $(element).on('focus', function(){ dataInit: function(element){ $(element).on('focus', function(){
WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false}); WdatePicker({dateFmt:'yyyy-MM-dd HH:mm',isShowClear:false});
}); });
@@ -334,14 +360,15 @@ $("#testDataChildDataGrid").dataGrid({
<script> <script>
$("#inputForm").validate({ $("#inputForm").validate({
submitHandler: function(form){ submitHandler: function(form){
js.ajaxSubmitForm($(form), function(data){ // js.ajaxSubmitForm($(form), function(data){
js.showMessage(data.message); // js.showMessage(data.message);
if(data.result == Global.TRUE){ // if(data.result == Global.TRUE){
js.closeCurrentTabPage(function(contentWindow){ // js.closeCurrentTabPage(function(contentWindow){
contentWindow.page(); // contentWindow.page();
}); // });
} // }
}, "json"); // }, "json");
js.showMessage('模拟保存成功');
} }
}); });
</script> </script>