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/

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

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

$(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;
};

EHT 开发框架 Form 表单动态绑定的实现相关推荐

Java 表单提交下拉框_Java实现Layui的form表单动态绑定下拉框
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Java实现Layui的form表单动态绑定下拉框 [1]视图层爱好: 立即提交重置 $(function () { //[1]加载&初始化l ...
Java POJO Bean 对象与 Web Form 表单的自动装配
PS: 我一直在找寻为什么 struts2有自动将form字段和getter setter 自动匹配的功能, 这篇文章解答了我的疑惑深度剖析:Java POJO Bean 对象与 Web Form ...
JavaScript基础（九）form表单、事件、3D
form表单.事件.3D form表单 form表单操作 event事件对象案例事件冒泡事件的绑定与解绑键盘事件默认事件面试题选项卡 javascript实现 jQuery实现 3D 3 ...
form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
form表单提交编码的问题
浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urle ...
js异步提交form表单的解决方案
1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span sty ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单的reset
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值.): 1.使用reset按钮,条件reset按钮必须在form表单内部. 2. <input id="But ...

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

EHT 开发框架 Form 表单动态绑定的实现相关推荐

最新文章

热门文章