EHT 开发框架 Form 表单动态绑定的实现

今天给大家介绍下EHT开发框架Form表单类在开发框架中的应用及Form表单的实现

Form 表单类的作用：

1、通过Form表单类，可以将表单数据绑定到 Form 类中的data 属性中，开发人员可以直接调用表点的 data 将表单中的数据传递到其他业务中或传递到后台，无需一个一个元素的赋值；

2、通过Form表单类，可以动态的进行表单下拉选择数据的绑定或后台数据的选择绑定，形成下载列表表格，提供给用户进行数据项目的选择；

3、通过Form表单类，可以轻松的对date类型的数据表单录入生成 DatePicker 选择器，供用户对日期的选择；

4、通过Form表单类，还可以对表单填的数据进行动态验证

下图是调用Form表单类表单原始产生的效果

具体见demo演示：http://demo.ehtsoft.com/

s

实现 上述的效果代码如下：

<div id="form" style="padding:19px;">
<input type="text" name="txt0"/>
<select name="txt1" codes="[{value:'1',label:'男'},{value:'2',label:'女','default':true}]"></select>
<input type="text" name="txt2" codes='[{value:"1",label:"男"},{value:"2",label:"女","default":true}]'>
<input type="text" name="txt3" codes="NATIONAL">
<select name="txt4" codes="NATIONAL"></select>
<input type="text" name="date1" ehtType="date" value="date1"/>
<input type="text" name="date2" ehtType="date" value="date2"/>
<input type="text" name="txt4" codes="NATIONAL"/>
<input type="text" name="date3" ehtType="date" value="date3"/>
<div id="div"></div>
<input type="button" id="formtest" value="form test data"/>
<input type="button" id="formtest2" value="fill data form"/>
</div>

直接在表单元素input 等组件中添加 codes 属性或ehtType属性，然后调用 Form类即可，调用方法如下

<script>

$(function(){

    new Eht.Form({selector:"#form"});

   //这样调用就行了，这样，就可以生成如上图的表单录入形式

});

</script>

通过 eht 开发框架是不是很简单哦

EHT Form 类的实现，相对来说有点复杂了，不过，EHT开发平台框架的前端已经实现了

下面代码是Eht.Form类的实现代码，给大家分享下，呵呵

/**
 * 表单处理类
 * @param options
 * @returns {Eht.Form}
 */
Eht.Form=function(options){
var form = this;
this.data = new Object();
var defaults = {selector:null,
opstatusField:"op_status",//modify 修改,new 新建
dataclone:true,//数据是否克隆，克隆返回的数据时另外的一个数据对象，不同于参数的 data 数据
data:null,
dateformat:"yyyy-MM-dd",
codeDefaultField:"default",
clickshow:true,
focusshow:true,
maxCodeSize:10
};
this.options = $.extend(defaults,options);
this.selector = $(this.options.selector);
if(this.options.focusshow==true){
this.options.clickshow = false;
}
this.datePicker = new Eht.DatePicker({show:false,format:this.options.dateformat});
this.dgSelector = $("<div style='width:420px;position:absolute;display:none;z-index:800;'></div>");//datagrid.selector
this.datagrid = new Eht.DataGrid({selector:this.dgSelector,isPaginate:false,isFixedColumn:false,width:400,height:230,dragcolumn:false,
columns:[{field:"value",label:"值"},{field:"label",label:"描述"},{field:"mnemonic",label:"助记符"}]
});
this.datagrid.clickRow=function(data, e){
this.objectui.val(data.label);
if(form.data[this.objectui.attr("fieldName")]!=data.value){
form.data[this.objectui.attr("fieldName")] = data.value;
if(form.data[form.options.opstatusField]!="new"){
form.data[form.options.opstatusField]="modify";
}
}
this.selector.hide(100);
};
this.selector.append(this.dgSelector);
// clone 或对 this.data 赋值
if(this.options.data!=null){
if(this.options.dataclone==false){
this.data = this.options.data;
}else{
for(p in this.options.data){
this.data[p] = this.options.data[p];
}
}
}

$(this.options.selector).find("input,select,textarea").each(function(){
form.initCodes($(this));
form.initDateEhtType($(this));
});
//添加change事件
$(this.options.selector).find("input,select,textarea").each(function(){
if(Eht.toLowerCase($(this).attr("type"))!="button" && Eht.toLowerCase($(this).attr("type"))!="image"){
/** 将 form.data 存在的数据赋值到 form 元素中 **/
if($(this).attr("name") && form.data[$(this).attr("name")]!=undefined && form.data[$(this).attr("name")]!=null){
$(this).val(form.data[$(this).attr("name")]+"");
}
/** 给代码参照(datagrid)对象comb 赋值（label）**/
if($(this).attr("fieldName") && $(this).attr("codes")){
form.setCompCodesLabel($(this),form.data[$(this).attr("fieldName")]);
}
/** 将表单的数据赋值给 form.data **/
if($(this).attr("name")){
form.data[$(this).attr("name")]=$(this).val();
}
// change 事件
$(this).change(function(){
if($(this).attr("name")){
form.data[$(this).attr("name")]=$(this).val();
if(form.data[form.options.opstatusField]!="new"){
form.data[form.options.opstatusField]="modify";
}
}
});
}
});
};
Eht.Form.prototype.setCompCodesLabel=function(curcomp,value){
var rtn = 0;
var arr = this.getCodes(curcomp);
for(var i=0;i<arr.length;i++){
if(arr[i].value==value){
rtn = i;
curcomp.val(arr[i].label);
break;
}
}
return i;
};
Eht.Form.prototype.getDataIndexAndSelected=function(arr,field,value){
var rtn = -1;
if(arr){
for(var i=0;i<arr.length;i++){
if(arr[i][field]==value){
rtn = i;
arr[i][this.datagrid.selectedField]=true;
break;
}
}
}
return rtn;
};
Eht.Form.prototype.getCodes=function(curcomp){
var rtn = new Array();
if(curcomp.attr("codes")){
var  reg = /\[.*?\]/g;
if(reg.test(curcomp.attr("codes"))){
rtn = eval("("+curcomp.attr("codes")+")");
}else{
if(Eht.Codes!=null){
rtn = Eht.Codes[curcomp.attr("codes")];
}
}
}
return rtn;
};
Eht.Form.prototype.initCodes = function(curcomp){
var form = this;
var attrs=["id","name","class","style","codes","ehtType","placeholder","disabled","readonly"];
if(curcomp.attr("codes")){
var arr = this.getCodes(curcomp);
if(arr.length > form.options.maxCodeSize && curcomp.get(0).tagName!="SELECT"){
fillcodegrid(curcomp);
}else{
fillcode(curcomp,arr);
}
}
function fillcode(curcomp,arr){
if(arr){
if(curcomp.get(0).tagName=="SELECT"){
selectoption(curcomp,arr);
}else{
var select = $("<select>");
for(var i=0;i<attrs.length;i++){
if(curcomp.attr(attrs[i])){
select.attr(attrs[i],curcomp.attr(attrs[i]));
}
}
curcomp.replaceWith(select);
selectoption(select,arr);
}
}
}
function selectoption(curcomp,arr){
if(arr){
for(var i=0;i<arr.length;i++){
var option = $('<option value="'+arr[i].value+'">'+arr[i].label+'</option>');
if(arr[i][form.options.codeDefaultField]=="true" || arr[i][form.options.codeDefaultField]==true){
option.attr("selected",true);
}
curcomp.append(option);
}
}
}
function getCodeDefaultValue(codes){
var rtn = null;
for(var i=0;i<codes.length;i++){
if(codes[i][form.options.codeDefaultField]=="true" || codes[i][form.options.codeDefaultField]==true){
rtn = codes[i].value;
break;
}
}
return rtn;
}
function fillcodegrid(curcomp){
var comp = new Eht.FormCombo(curcomp, form);
curcomp.attr("fieldName",curcomp.attr("name"));
if(form.data[curcomp.attr("fieldName")]==undefined || form.data[curcomp.attr("fieldName")]==null){
form.data[curcomp.attr("fieldName")]=getCodeDefaultValue(form.getCodes(curcomp));
}
curcomp.removeAttr("name");
comp.clickArrbutton=function(pform, pcurcomp){
pform.datePicker.close();
pform.datagrid.objectui = pcurcomp;
pform.datagrid.tbBody.children().remove();
var arr = pform.getCodes(pcurcomp);
var sindex = pform.getDataIndexAndSelected(arr, "value", form.data[pcurcomp.attr("fieldName")]);
pform.datagrid.dgBody.css("font-size","10px");
pform.datagrid.dgHeader.css("font-size","10px");
pform.datagrid.setPosition(pcurcomp);
pform.dgSelector.show(50,function(){
pform.datagrid.drawGridBody(arr);
pform.datagrid.resetSize(400,230);
pform.datagrid.setSelectedRow(sindex);
});
pform.datagrid.selector.unbind('mouseup').bind('mouseup',function(e) {
e.stopPropagation();
return false;
});
$(document).unbind('mouseup').bind('mouseup',function(e) {
pform.datagrid.selector.hide();
$(document).unbind('mouseup');
});
var tmparr = null;
pcurcomp.unbind("keydown").bind("keydown",function(evt){
if(evt.keyCode==38 || evt.keyCode==40){
if(pform.datagrid.selector.css("display")=="none"){
pform.datagrid.selector.show(50);
pform.datagrid.reDrawColWidth(true);
}
var srow = pform.datagrid.getSelectedRows();
var index = 0;
if(srow.size()==0){
pform.datagrid.setSelectedRow(0,evt);
}else{
index = srow.attr("dataIndex")-0;
}
pform.datagrid.setSelectedRow(index,evt);
}
});
pcurcomp.unbind("keyup").bind("keyup",function(evt){
if(evt.keyCode!=9 && evt.keyCode!=38 && evt.keyCode!=40){
if(evt.keyCode==13){
var o = getSelectedData();
if(o!=null){
if(pform.datagrid.selector.css("display")=="none"){
pform.datagrid.selector.show(50);
pform.datagrid.reDrawColWidth(true);
}else{
pform.datagrid.selector.hide(100);
}
if(pform.data[$(this).attr("fieldName")]!=o.value){
if(pform.data[pform.options.opstatusField]!="new"){
pform.data[pform.options.opstatusField]="modify";
}
pform.data[$(this).attr("fieldName")]=o.value;
}
$(this).val(o.label);
}
}else{
if(pform.datagrid.selector.css("display")=="none"){
pform.datagrid.selector.show(50);
pform.datagrid.reDrawColWidth(true);
}
tmparr = new Array();
for(var i=0;i<arr.length;i++){
if(arr[i].mnemonic){
if(arr[i].mnemonic.toLowerCase().search($(this).val().toLowerCase())!=-1){
tmparr.push(arr[i]);
}
}else{
tmparr.push(arr[i]);
}
}
//清楚 数据中的 选择标记
for(var i=0;i<arr.length;i++){
delete arr[i][pform.datagrid.selectedField];
}
if(tmparr.length>=1){
tmparr[0][pform.datagrid.selectedField]=true;
}
pform.datagrid.drawGridBody(tmparr);
}
function getSelectedData(){
var r=null;
if(tmparr!=null){
for(var k=0;k<tmparr.length;k++){
if(tmparr[k][pform.datagrid.selectedField]==true){
r = tmparr[k];
break;
};
}
}else{
var sds=form.datagrid.getSelectedData();
if(sds.length==1){
r = sds[0];
}
}
return r;
};
};
});
};
};
};
Eht.Form.prototype.initDateEhtType = function(curcomp){
var form = this;
if(curcomp.attr("ehtType")){
if(Eht.toLowerCase(curcomp.attr("ehtType"))=="date"){
curcomp.attr("placeholder",form.datePicker.options.format.toLowerCase());
var combo = new Eht.FormCombo(curcomp,form,"date");
combo.clickArrbutton=function(form, curcomp){
form.datagrid.selector.hide(100);
form.datePicker.objectui=curcomp;
form.datePicker.setPosition(curcomp);
form.datePicker.show(curcomp.val());
form.datePicker.selector.unbind('mouseup').bind('mouseup',function(e) {
e.stopPropagation();
return false;
});
$(document).unbind('mouseup').bind('mouseup',function(e) {
form.datePicker.close();
$(document).unbind('mouseup');
});
};
form.datePicker.selectedDate=function(value){
if(form.datePicker.objectui){
form.datePicker.objectui.val(value);
form.data[form.datePicker.objectui.attr("name")]=value;
if(form.data[form.options.opstatusField]!="new"){
form.data[form.options.opstatusField]="modify";
}
}
form.datePicker.close();
};
}
}
};
/**
 * 像表单填充数据
 * @param data
 */
Eht.Form.prototype.fill = function(data){
this.clear();
var form = this;
if(data!=null){
if(this.options.dataclone==false){
this.data = data;
}else{
for(p in data){
this.data[p] = data[p];
}
}
}
$(this.options.selector).find("input,select,textarea").each(function(){
if(Eht.toLowerCase($(this).attr("type"))!="button" && Eht.toLowerCase($(this).attr("type"))!="image"){
/** 将 form.data 存在的数据赋值到 form 元素中 **/
if($(this).attr("name") && form.data[$(this).attr("name")]!=undefined && form.data[$(this).attr("name")]!=null){
$(this).val(form.data[$(this).attr("name")]+"");
}
/** 给代码参照(datagrid)对象comb 赋值（label）**/
if($(this).attr("fieldName") && $(this).attr("codes")){
form.setCompCodesLabel($(this),form.data[$(this).attr("fieldName")]);
}
}
}); 
};
/**
 * 清空表单
 * @param properties 参数中的属性不清楚，用 "," 分割  如:  "name,orgid"
 */
Eht.Form.prototype.clear=function(properties){
var data = this.data;
var keeps = new Object();
if(properties){
for(var i=0;i<properties.split(",").length;i++){
keeps[properties.split(",")[i]]=true;
}
}
for(p in this.data){
if(!keeps[p]){
delete this.data[p];
}
}
$(this.options.selector).find("input,select,textarea").each(function(){
if($(this).attr("name") && Eht.toLowerCase($(this).attr("type"))!="button" && Eht.toLowerCase($(this).attr("type"))!="image"){
if(!keeps[$(this).attr("name")]){
if($(this).get(0).tagName=="SELECT"){
$(this).get(0).selectedIndex=0;
data[$(this).attr("name")]=$(this).val();
}else{
$(this).val("");
}
}
}
});
};
Eht.Form.prototype.enable=function(){
$(this.options.selector).find("input,select,textarea").each(function(){
if($(this).attr("name") && Eht.toLowerCase($(this).attr("type"))!="button" && Eht.toLowerCase($(this).attr("type"))!="image"){
$(this).attr("disabled",false);
}
}); 
};
Eht.Form.prototype.disable=function(){
$(this.options.selector).find("input,select,textarea").each(function(){
if($(this).attr("name") && Eht.toLowerCase($(this).attr("type"))!="button" && Eht.toLowerCase($(this).attr("type"))!="image"){
$(this).attr("disabled",true);
}
}); 
};
/**
 * 表单验证
 */
Eht.Form.prototype.validate=function(){

return true;
};