完善查询表单设计器

7 年前 · 91fe1f5c84
--- a/ureport2-console/src/main/java/com/bstek/ureport/console/designer/ReportDefinitionWrapper.java
+++ b/ureport2-console/src/main/java/com/bstek/ureport/console/designer/ReportDefinitionWrapper.java
@ -38,6 +38,7 @@ public class ReportDefinitionWrapper {
 	private HeaderFooterDefinition header;
 	private HeaderFooterDefinition footer;
 	private SearchForm searchForm;
+	private String searchFormXml;
 	private List<RowDefinition> rows;
 	private List<ColumnDefinition> columns;
 	private List<DatasourceDefinition> datasources;
@ -47,6 +48,7 @@ public class ReportDefinitionWrapper {
 		this.header=report.getHeader();
 		this.footer=report.getFooter();
 		this.searchForm=report.getSearchForm();
+		this.searchFormXml=report.getSearchFormXml();
 		this.rows=report.getRows();
 		this.columns=report.getColumns();
 		this.datasources=report.getDatasources();
@ -81,4 +83,10 @@ public class ReportDefinitionWrapper {
 	public List<RowDefinition> getRows() {
 		return rows;
 	}
+	public String getSearchFormXml() {
+		return searchFormXml;
+	}
+	public void setSearchFormXml(String searchFormXml) {
+		this.searchFormXml = searchFormXml;
+	}
 }
--- a/ureport2-console/src/main/resources/ureport-asserts/js/designer.bundle.js
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/designer.bundle.js
--- a/ureport2-console/src/main/resources/ureport-asserts/js/designer.bundle.js.map
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/designer.bundle.js.map
--- a/ureport2-console/src/main/resources/ureport-asserts/js/preview.bundle.js
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/preview.bundle.js
--- a/ureport2-console/src/main/resources/ureport-asserts/js/preview.bundle.js.map
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/preview.bundle.js.map
--- a/ureport2-console/src/main/resources/ureport-asserts/js/searchform.bundle.js
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/searchform.bundle.js
--- a/ureport2-console/src/main/resources/ureport-asserts/js/searchform.bundle.js.map
+++ b/ureport2-console/src/main/resources/ureport-asserts/js/searchform.bundle.js.map
--- a/ureport2-console/src/main/resources/ureport-html/html-preview.html
+++ b/ureport2-console/src/main/resources/ureport-html/html-preview.html
@ -12,9 +12,11 @@
 </style>
 	<script type="text/javascript" src="${contextPath}/ureport/res/ureport-asserts/venderjs/jquery.min.js"></script>
 	<script type="text/javascript" src="${contextPath}/ureport/res/ureport-asserts/venderjs/bootstrap.min.js"></script>
+ 	<script type="text/javascript" src="${contextPath}/ureport/res/ureport-asserts/venderjs/bootstrap-datetimepicker.js"></script>
 	<script type="text/javascript" src="${contextPath}/ureport/res/ureport-asserts/js/preview.bundle.js"></script>
 </head>
 <body style="margin:5px">
+${upSearchFormHtml}
 #if($tools.show)
 <div style="border:solid 1px #ddd;border-radius:5px;height:35px;width:100%;margin-bottom:5px;background:#f8f8f8">
 	<div style="text-align:${reportAlign}">
@ -95,6 +97,7 @@
 	</div>
 </div>
 #end
+${downSearchFormHtml}
 <div id="_ureport_table" style="float:${reportAlign}">
 	${content}
 </div>
@ -102,7 +105,7 @@
 <iframe name="_print_pdf_frame" width="0" height="0" frameborder="0" src="about:blank"></iframe>
 <script type="text/javascript">
 window._server="${contextPath}/ureport";
-window._locale="${locale}";
+window.formElements=[];
 $(document).ready(function(){
 	#if($totalPage>0)
 			$('#pageSelector').change(function(){
@ -119,6 +122,10 @@ $(document).ready(function(){
 		_intervalRefresh($intervalRefreshValue,"${file}",$totalPage,"${customParameters}");
 	#end
 	_buildChartDatas($chartDatas);
+	${searchFormJs}
+	function doSearch(){
+		submitSearchForm("${file}","${customParameters}");
+	}
 });
 </script>
 </body>
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/ReportDefinition.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/ReportDefinition.java
@ -26,6 +26,7 @@ import org.apache.commons.lang.StringUtils;
 import org.codehaus.jackson.annotate.JsonIgnore;

 import com.bstek.ureport.definition.datasource.DatasourceDefinition;
+import com.bstek.ureport.definition.searchform.RenderContext;
 import com.bstek.ureport.definition.searchform.SearchForm;
 import com.bstek.ureport.export.html.SearchFormData;
 import com.bstek.ureport.model.Cell;
@ -49,6 +50,7 @@ public class ReportDefinition implements Serializable{
 	private List<RowDefinition> rows;
 	private List<ColumnDefinition> columns;
 	private List<DatasourceDefinition> datasources;
+	private String searchFormXml;
 	@JsonIgnore
 	private String style;

@ -218,10 +220,12 @@ public class ReportDefinition implements Serializable{
 		if(searchForm==null){
 			return null;
 		}
+		RenderContext context=new RenderContext();
 		SearchFormData data=new SearchFormData();
 		data.setFormPosition(searchForm.getFormPosition());
-		data.setHtml(searchForm.toHtml());
-		data.setJs(searchForm.toJs());
+		data.setHtml(searchForm.toHtml(context));
+		data.setJs(searchForm.toJs(context));
+		data.setSearchFormXml(searchFormXml);
 		return data;
 	}
 	
@ -316,4 +320,10 @@ public class ReportDefinition implements Serializable{
 	public List<DatasourceDefinition> getDatasources() {
 		return datasources;
 	}
+	public String getSearchFormXml() {
+		return searchFormXml;
+	}
+	public void setSearchFormXml(String searchFormXml) {
+		this.searchFormXml = searchFormXml;
+	}
 }
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/Align.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/Align.java
@ -0,0 +1,25 @@
+/*******************************************************************************
+ * Copyright (C) 2017 Bstek.com
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+package com.bstek.ureport.definition.searchform;
+
+/**
+ * @author Jacky.gao
+ * @since 2017年11月2日
+ */
+public enum Align {
+	left,right;
+}
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ButtonComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ButtonComponent.java
@ -23,10 +23,11 @@ package com.bstek.ureport.definition.searchform;
 public abstract class ButtonComponent implements Component{
 	private String label;
 	private String style;
+	private Align align=Align.left;
 	private String type;
 	@Override
 	public String toHtml(RenderContext context) {
-		return "<button type=\"button\" id=\""+context.buildComponentId(this)+"\" class=\"btn "+style+"\">"+label+"</button>";
+		return "<div style='text-align:"+this.align+"'><button type=\"button\" id=\""+context.buildComponentId(this)+"\" class=\"btn "+style+" btn-sm\">"+label+"</button></div>";
 	}
 	public String getLabel() {
 		return label;
@ -47,4 +48,10 @@ public abstract class ButtonComponent implements Component{
 	public void setType(String type) {
 		this.type = type;
 	}
+	public Align getAlign() {
+		return align;
+	}
+	public void setAlign(Align align) {
+		this.align = align;
+	}
 }
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/CheckboxInputComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/CheckboxInputComponent.java
@ -31,7 +31,7 @@ public class CheckboxInputComponent extends InputComponent {
 		String name=getBindParameter();
 		for(Option option:options){
 			if(this.optionsInline){
-				sb.append("<span class='checkbox-inline'><input value='"+option.getValue()+"' type='checkbox' name='"+name+"'>"+option.getLabel()+"</span>");
+				sb.append("<span class='checkbox-inline' style='padding-top:0px'><input value='"+option.getValue()+"' type='checkbox' name='"+name+"'>"+option.getLabel()+"</span>");
 			}else{
 				sb.append("<span class='checkbox'><input type='checkbox' value='"+option.getValue()+"' name='"+name+"' style='margin-left: auto'><span style=\"margin-left:15px\">"+option.getLabel()+"</span></span>");
 			}				
@ -40,7 +40,24 @@ public class CheckboxInputComponent extends InputComponent {
 	}
 	@Override
 	public String initJs(RenderContext context) {
-		return "";
+		String name=getBindParameter();
+		StringBuilder sb=new StringBuilder();
+		sb.append("formElements.push(");
+		sb.append("function(){");
+		sb.append("if(''==='"+name+"'){");
+		sb.append("alert('复选框未绑定查询参数名，不能进行查询操作!');");
+		sb.append("throw '复选框未绑定查询参数名，不能进行查询操作!'");
+		sb.append("}");
+		sb.append("var names='';");
+		sb.append("$(\"input[name='"+getBindParameter()+"']:checked\").each(function(index,item){");
+		sb.append("if(names===''){names+=$(item).val();}else{names+=','+$(item).val();}");
+		sb.append("});");
+		sb.append("return {");
+		sb.append("\""+name+"\":names");
+		sb.append("}");
+		sb.append("}");
+		sb.append(");");
+		return sb.toString();
 	}
 	public void setOptionsInline(boolean optionsInline) {
 		this.optionsInline = optionsInline;
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ColComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ColComponent.java
@ -25,7 +25,7 @@ public class ColComponent extends ContainerComponent{
 	@Override
 	public String toHtml(RenderContext context) {
 		StringBuffer sb=new StringBuffer();
-		sb.append("<div class='col-md-"+size+"'");
+		sb.append("<div class='col-md-"+size+"' style='padding-left:2px;padding-right:2px'");
 		Object gridComponent=context.getMetadata(GridComponent.KEY);
 		if(gridComponent!=null){
 			GridComponent gc=(GridComponent)gridComponent;
@ -43,7 +43,11 @@ public class ColComponent extends ContainerComponent{
 	}
 	@Override
 	public String initJs(RenderContext context) {
-		return "";
+		StringBuilder sb=new StringBuilder();
+		for(Component c:children){
+			sb.append(c.initJs(context));
+		}
+		return sb.toString();
 	}
 	public void setSize(int size) {
 		this.size = size;
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/DateInputComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/DateInputComponent.java
@ -36,6 +36,20 @@ public class DateInputComponent extends InputComponent {
 		sb.append("format:'"+this.format+"'");
 		sb.append("");
 		sb.append("});");
+		
+		String name=getBindParameter();
+		sb.append("formElements.push(");
+		sb.append("function(){");
+		sb.append("if(''==='"+name+"'){");
+		sb.append("alert('日期输入框未绑定查询参数名，不能进行查询操作!');");
+		sb.append("throw '日期输入框未绑定查询参数名，不能进行查询操作!'");
+		sb.append("}");
+		sb.append("return {");
+		sb.append("\""+name+"\":");		
+		sb.append("$(\"input[name='"+name+"']\").val()");
+		sb.append("}");
+		sb.append("}");
+		sb.append(");");
 		return sb.toString();
 	}
 	
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/GridComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/GridComponent.java
@ -33,6 +33,7 @@ public class GridComponent implements Component{
 	public String toHtml(RenderContext context) {
 		StringBuffer sb=new StringBuffer();
 		sb.append("<div class='row'>");
+		context.putMetadata(KEY, this);
 		for(ColComponent c:cols){
 			sb.append(c.toHtml(context));
 		}
@ -41,7 +42,11 @@ public class GridComponent implements Component{
 	}
 	@Override
 	public String initJs(RenderContext context) {
-		return "";
+		StringBuffer sb=new StringBuffer();
+		for(ColComponent c:cols){
+			sb.append(c.initJs(context));
+		}
+		return sb.toString();
 	}
 	public void setBorderColor(String borderColor) {
 		this.borderColor = borderColor;
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/InputComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/InputComponent.java
@ -38,10 +38,10 @@ public abstract class InputComponent implements Component{
 		}
 		sb.append("<div class='form-group' style='margin:0px 0px 10px 0px'>");
 		if(this.labelPosition.equals(LabelPosition.top)){		
-			sb.append("<span>"+this.label+"</span>");			
+			sb.append("<span style='font-size:13px'>"+this.label+"</span>");			
 			sb.append(inputHtml(context));
 		}else{					
-			sb.append("<span class='col-md-3' style='text-align:right;padding-right:1px'>"+this.label+"</span>");			
+			sb.append("<span class='col-md-3' style='text-align:right;padding-right:1px;font-size:13px'>"+this.label+"</span>");			
 			sb.append("<div class='col-md-9' style='padding-left:1px;'>");
 			sb.append(inputHtml(context));
 			sb.append("</div>");
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/RadioInputComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/RadioInputComponent.java
@ -32,7 +32,7 @@ public class RadioInputComponent extends InputComponent {
 		sb.append("<div>");
 		for(Option option:options){
 			if(this.optionsInline){
-				sb.append("<span class='checkbox-inline' style='padding-top:0px;padding-left:2px'><input value='"+option.getValue()+"' type='radio' name='"+name+"'> "+option.getLabel()+"</span>");
+				sb.append("<span class='checkbox-inline' style='padding-top:0px;padding-left:2px;padding-top:0px'><input value='"+option.getValue()+"' type='radio' name='"+name+"'> "+option.getLabel()+"</span>");
 			}else{
 				sb.append("<span class='checkbox'><input value='"+option.getValue()+"' type='radio' name='"+name+"' style='margin-left: auto'> <span style=\"margin-left:15px\">"+option.getLabel()+"</span></span>");
 			}
@ -42,7 +42,21 @@ public class RadioInputComponent extends InputComponent {
 	}
 	@Override
 	public String initJs(RenderContext context) {
-		return "";
+		String name=getBindParameter();
+		StringBuilder sb=new StringBuilder();
+		sb.append("formElements.push(");
+		sb.append("function(){");
+		sb.append("if(''==='"+name+"'){");
+		sb.append("alert('单选框未绑定查询参数名，不能进行查询操作!');");
+		sb.append("throw '单选框未绑定查询参数名，不能进行查询操作!'");
+		sb.append("}");
+		sb.append("return {");
+		sb.append("\""+name+"\":");
+		sb.append("$(\"input[name='"+getBindParameter()+"']:checked\").val()");
+		sb.append("}");
+		sb.append("}");
+		sb.append(");");
+		return sb.toString();
 	}
 	public void setOptionsInline(boolean optionsInline) {
 		this.optionsInline = optionsInline;
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ResetButtonComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/ResetButtonComponent.java
@ -21,14 +21,12 @@ package com.bstek.ureport.definition.searchform;
 * @since 2017年10月24日
 */
 public class ResetButtonComponent extends ButtonComponent{
+	@Override
+	public String toHtml(RenderContext context) {
+		return "<button type=\"reset\" id=\""+context.buildComponentId(this)+"\" class=\"btn "+getStyle()+" btn-sm\">"+getLabel()+"</button>";
+	}
 	@Override
 	public String initJs(RenderContext context) {
-		StringBuilder sb=new StringBuilder();
-		sb.append("$('#"+context.buildComponentId(this)+"').click(function(){");
-		sb.append("alert('reset')");
-		sb.append("");
-		sb.append("");
-		sb.append("});");
-		return sb.toString();
+		return "";
 	}
 }
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/SearchForm.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/SearchForm.java
@ -25,16 +25,16 @@ import java.util.List;
 public class SearchForm {
 	private List<Component> components;
 	private FormPosition formPosition;
-	public String toHtml(){
-		RenderContext context=new RenderContext();
+	public String toHtml(RenderContext context){
 		StringBuilder sb=new StringBuilder();
+		sb.append("<form  style='margin-top:10px;margin-bottom:10px'>");
 		for(Component component:components){
 			sb.append(component.toHtml(context));
 		}
+		sb.append("</form>");
 		return sb.toString();
 	}
-	public String toJs(){
-		RenderContext context=new RenderContext();
+	public String toJs(RenderContext context){
 		StringBuilder sb=new StringBuilder();
 		for(Component component:components){
 			sb.append(component.initJs(context));
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/SubmitButtonComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/SubmitButtonComponent.java
@ -25,9 +25,7 @@ public class SubmitButtonComponent extends ButtonComponent{
 	public String initJs(RenderContext context) {
 		StringBuilder sb=new StringBuilder();
 		sb.append("$('#"+context.buildComponentId(this)+"').click(function(){");
-		sb.append("alert('reset')");
-		sb.append("");
-		sb.append("");
+		sb.append("doSearch();");
 		sb.append("});");
 		return sb.toString();
 	}
--- a/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/TextInputComponent.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/definition/searchform/TextInputComponent.java
@ -27,6 +27,20 @@ public class TextInputComponent extends InputComponent {
 	}
 	@Override
 	public String initJs(RenderContext context) {
-		return "";
+		String name=getBindParameter();
+		StringBuilder sb=new StringBuilder();
+		sb.append("formElements.push(");
+		sb.append("function(){");
+		sb.append("if(''==='"+name+"'){");
+		sb.append("alert('文本框未绑定查询参数名，不能进行查询操作!');");
+		sb.append("throw '文本框未绑定查询参数名，不能进行查询操作!'");
+		sb.append("}");
+		sb.append("return {");
+		sb.append("\""+name+"\":");		
+		sb.append("$('#"+context.buildComponentId(this)+"').val()");
+		sb.append("}");
+		sb.append("}");
+		sb.append(");");
+		return sb.toString();
 	}
 }
--- a/ureport2-core/src/main/java/com/bstek/ureport/export/html/SearchFormData.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/export/html/SearchFormData.java
@ -25,6 +25,7 @@ import com.bstek.ureport.definition.searchform.FormPosition;
 public class SearchFormData {
 	private String html;
 	private String js;
+	private String searchFormXml;
 	private FormPosition formPosition;
 	public String getHtml() {
 		return html;
@ -44,4 +45,10 @@ public class SearchFormData {
 	public void setFormPosition(FormPosition formPosition) {
 		this.formPosition = formPosition;
 	}
+	public String getSearchFormXml() {
+		return searchFormXml;
+	}
+	public void setSearchFormXml(String searchFormXml) {
+		this.searchFormXml = searchFormXml;
+	}
 }
--- a/ureport2-core/src/main/java/com/bstek/ureport/parser/ReportParser.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/parser/ReportParser.java
@ -109,6 +109,7 @@ public class ReportParser {
 					}else if(target instanceof SearchForm){
 						SearchForm form=(SearchForm)target;
 						report.setSearchForm(form);
+						report.setSearchFormXml(ele.asXML());
 					}
 				}else{
 					throw new ReportParseException("Unknow element :"+ele.getName());
--- a/ureport2-core/src/main/java/com/bstek/ureport/parser/impl/searchform/SubmitButtonParser.java
+++ b/ureport2-core/src/main/java/com/bstek/ureport/parser/impl/searchform/SubmitButtonParser.java
@ -18,6 +18,7 @@ package com.bstek.ureport.parser.impl.searchform;

 import org.dom4j.Element;

+import com.bstek.ureport.definition.searchform.Align;
 import com.bstek.ureport.definition.searchform.SubmitButtonComponent;

 /**
@ -31,6 +32,10 @@ public class SubmitButtonParser implements FormParser<SubmitButtonComponent> {
 		btn.setLabel(element.attributeValue("label"));
 		btn.setStyle(element.attributeValue("style"));
 		btn.setType(element.attributeValue("type"));
+		String align=element.attributeValue("align");
+		if(align!=null){
+			btn.setAlign(Align.valueOf(align));
+		}
 		return btn;
 	}
 	@Override
--- a/ureport2-js/src/form/FormBuilder.js
+++ b/ureport2-js/src/form/FormBuilder.js
@ -71,6 +71,7 @@ export default class FormBuilder{
            const components= form.components;
            this.buildPageElements(components,this.rootContainer);
        }
+        this.pageProperty.refreshValue();
    }

    buildData(){
--- a/ureport2-js/src/form/container/ColContainer.js
+++ b/ureport2-js/src/form/container/ColContainer.js
@ -6,7 +6,7 @@ export default class ColContainer extends Container{
    constructor(colsize){
        super();
        this.colsize=colsize;
-        this.container=$("<div style='min-height:80px'>");
+        this.container=$("<div style='min-height:80px;padding: 1px'>");
        this.container.addClass("col-md-"+colsize+"");
        this.container.addClass("pb-dropable-grid");
    }
--- a/ureport2-js/src/form/instance/ButtonInstance.js
+++ b/ureport2-js/src/form/instance/ButtonInstance.js
@ -9,17 +9,22 @@ export default class ButtonInstance extends Instance{
        this.element=$('<div></div>');
        this.label=label;
        this.style="btn-default";
-        this.button=$(`<button type='button' class='btn btn-default'>${label}</button>`);
+        this.button=$(`<button type='button' class='btn btn-default btn-sm'>${label}</button>`);
        this.element.append(this.button);
        this.element.uniqueId();
        this.id=this.element.prop("id");
        this.editorType="button";
+        this.align='left';
    }
    setStyle(style){
        this.button.removeClass(this.style);
        this.button.addClass(style);
        this.style=style;
    }
+    setAlign(align){
+        this.element.css('text-align',align);
+        this.align=align;
+    }
    setLabel(label){
        this.label=label;
        this.button.html(label);
@ -27,6 +32,7 @@ export default class ButtonInstance extends Instance{
    initFromJson(json){
        this.setLabel(json.label);
        this.setStyle(json.style);
+        this.setAlign(json.align);
    }
    toJSON(){

--- a/ureport2-js/src/form/instance/DatetimeInstance.js
+++ b/ureport2-js/src/form/instance/DatetimeInstance.js
@ -10,7 +10,7 @@ export default class DatetimeInstance extends Instance{
        var seq=Utils.seq(DatetimeInstance.ID);
        var label="日期选择"+seq;
        this.element=this.newElement(label);
-        this.dateFormat="YYYY-MM-DD";
+        this.dateFormat="yyyy-mm-dd";
        this.inputElement=$("<div>");
        this.element.append(this.inputElement);
        this.datePickerinputGroup=$("<div class='input-group date'>");
@ -52,7 +52,7 @@ export default class DatetimeInstance extends Instance{
        };
    }
    toXml(){
-        let xml=`<input-datetime label="${this.label}" type="${DatetimeInstance.TYPE}" label-position="${this.labelPosition || 'top'}" bind-parameter="${this.bindParameter || ''}" format="${this.format}"></input-datetime>`;
+        let xml=`<input-datetime label="${this.label}" type="${DatetimeInstance.TYPE}" label-position="${this.labelPosition || 'top'}" bind-parameter="${this.bindParameter || ''}" format="${this.dateFormat}"></input-datetime>`;
        return xml;
    }
 }
--- a/ureport2-js/src/form/instance/Grid2X2Instance.js
+++ b/ureport2-js/src/form/instance/Grid2X2Instance.js
@ -16,7 +16,7 @@ export default class Grid2X2Instance extends ContainerInstance{
        this.id=this.element.prop("id");
        this.showBorder=false;
        this.borderWidth=1;
-        this.borderColor="#cccccc";
+        this.borderColor="#eee";
    }
    toJson(){
        const json={
--- a/ureport2-js/src/form/instance/Instance.js
+++ b/ureport2-js/src/form/instance/Instance.js
@ -12,7 +12,7 @@ export default class Instance{
    newElement(label){
        this.element=$("<div class='form-group row' style='margin:0px'>");
        this.label=label;
-        this.labelElement=$("<span class='control-label'></span>");
+        this.labelElement=$("<span class='control-label' style='font-size: 13px'></span>");
        this.element.append(this.labelElement);
        this.labelElement.text(label);
        return this.element;
@ -57,6 +57,7 @@ export default class Instance{
    fromJson(json){
        this.setLabel(json.label);
        this.setLabelPosition(json.labelPosition);
+        this.setBindParameter(json.bindParameter);
    }
    initFromJson(json){

--- a/ureport2-js/src/form/instance/ResetButtonInstance.js
+++ b/ureport2-js/src/form/instance/ResetButtonInstance.js
@ -12,11 +12,12 @@ export default class ResetButtonInstance extends ButtonInstance{
        return {
            label:this.label,
            style:this.style,
+            align:this.align,
            type:ResetButtonInstance.TYPE
        };
    }
    toXml(){
-        return `<button-reset label="${this.label}" type="${ResetButtonInstance.TYPE}" style="${this.style}"></button-reset>`;
+        return `<button-reset label="${this.label}" align="${this.align}" type="${ResetButtonInstance.TYPE}" style="${this.style}"></button-reset>`;
    }
 }
 ResetButtonInstance.TYPE='Reset-button';
--- a/ureport2-js/src/form/instance/SubmitButtonInstance.js
+++ b/ureport2-js/src/form/instance/SubmitButtonInstance.js
@ -12,11 +12,12 @@ export default class SubmitButtonInstance extends ButtonInstance{
        return {
            label:this.label,
            style:this.style,
+            align:this.align,
            type:SubmitButtonInstance.TYPE
        };
    }
    toXml(){
-        return `<button-submit label="${this.label}" type="${SubmitButtonInstance.TYPE}" style="${this.style}"></button-submit>`;
+        return `<button-submit label="${this.label}" align="${this.align}" type="${SubmitButtonInstance.TYPE}" style="${this.style}"></button-submit>`;
    }
 }
 SubmitButtonInstance.TYPE="Submit-button";
--- a/ureport2-js/src/form/property/ButtonProperty.js
+++ b/ureport2-js/src/form/property/ButtonProperty.js
@ -32,6 +32,17 @@ export default class ButtonProperty extends Property{
            const style=$(this).children("option:selected").val();
            _this.current.setStyle(style);
        });
+
+        const alignGroup=$(`<div class="form-group"><label>对齐方式</label></div>`);
+        this.col.append(alignGroup);
+        this.alignSelect=$(`<select class="form-control">
+            <option value="left">左对齐</option>
+            <option value="right">右对齐</option>
+        </select>`);
+        alignGroup.append(this.alignSelect);
+        this.alignSelect.change(function(){
+            _this.current.setAlign($(this).val());
+        });
    }
    refreshValue(current){
        this.current=current;
--- a/ureport2-js/src/form/property/DatetimeProperty.js
+++ b/ureport2-js/src/form/property/DatetimeProperty.js
@ -15,8 +15,8 @@ export default class DatetimeProperty extends Property{
        var formatGroup=$("<div class='form-group'><label class='control-label'>日期格式</label></div>");
        this.col.append(formatGroup);
        this.formatSelect=$("<select class='form-control'>");
-        this.formatSelect.append($("<option>YYYY-MM-DD</option>"));
-        this.formatSelect.append($("<option>YYYY-MM-DD HH:mm:ss</option>"));
+        this.formatSelect.append($("<option>yyyy-mm-dd</option>"));
+        this.formatSelect.append($("<option>yyyy-mm-dd hh:ii:ss</option>"));
        var self=this;
        this.formatSelect.change(function(){
            self.current.setDateFormat($(this).val());
--- a/ureport2-js/src/form/property/Property.js
+++ b/ureport2-js/src/form/property/Property.js
@ -76,6 +76,10 @@ export default class Property{
        for(let param of formBuilder.reportParameters || []){
            this.bindFieldSelect.append(`<option>${param.name}</option>`);
        }
-        this.bindFieldSelect.append(`<option selected></option>`);
+        if(!instance.bindParameter){
+            this.bindFieldSelect.append(`<option selected></option>`);
+        }else{
+            this.bindFieldSelect.val(instance.bindParameter);
+        }
    }
 }
--- a/ureport2-js/src/preview.js
+++ b/ureport2-js/src/preview.js
@ -4,7 +4,6 @@
 import Chart from "chart.js";
 import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
 import './form/external/bootstrap-datetimepicker.css';
-import './form/external/bootstrap-datetimepicker.js';
 import {getParameter,pointToMM,showLoading,hideLoading} from './Utils.js';
 import {alert} from './MsgBox.js';
 import PDFPrintDialog from './dialog/PDFPrintDialog.js';
@ -201,3 +200,31 @@ window._buildChart=function(canvasId,chartJson){
    };
    const chart=new Chart(ctx,chartJson);
 };
+
+window.submitSearchForm=function(file,customParameters){
+    const formData={};
+    for(let fun of window.formElements){
+        const json=fun.call(this);
+        for(let key in json){
+            formData[key]=json[key];
+        }
+    }
+    let url=window._server+"/preview/loadData?_u="+file+"";
+    if(customParameters){
+        url+=customParameters;
+    }
+    $.ajax({
+        url,
+        type:'POST',
+        data:formData,
+        success:function(report){
+            const tableContainer=$(`#_ureport_table`);
+            tableContainer.empty();
+            tableContainer.append(report.content);
+            _buildChartDatas(report.chartDatas);
+        },
+        error:function(){
+            alert('查询操作失败！');
+        }
+    });
+};