现在的位置: 首页 > 综合 > 正文

dhtmlxForm

2017年12月28日 ⁄ 综合 ⁄ 共 4099字 ⁄ 字号 评论关闭

dhtmlxForm:

链接 Samples:http://www.dhtmlx.com/docs/products/docsExplorer/samples.shtml

链接 Docs:http://docs.dhtmlx.com/doku.php

dhxForm初始化:

var dhtmxFormData=[...];
var myForm = new dhtmlXForm(formData.layout, dhtmxFormData);

dhxFormData Type:

settings, //默认设置 [Allows to override some default form settings for items (placed at the beginning of data block).In case you specify the same attribute in settings and item: setting's value will be ignored. ]
fieldset, //控件组:实线围起,且线框线上可输入控件组名称[allows to combine several sense-connected items]
"block"  //没有名称,无线框围起,的控件组[Allows to combine several sense-connected items. It's identical to fieldset but doesn't have label and frame. ]
{type: "newcolumn", offset:20}  //新的一列[Allows to create a new column of items]	
label, //标题(粗体显示)[Presents a text label. ]
input, 
		{type: "input", name: "prj_name", label: "Project Name", value: "My Project", tooltip: "Enter your Project Name here", required: true, info: true, note: { text: "Enter your project name here. This fields is required."}},
		{type: "input", name: "prj_descr", label: "Project Description", value: "My project is great!", rows: 3, note: { text: "Enter your project description. It should reflect your project basic purposes. This fields is not required but also important." }}
combo, select
		{type:"combo",name:"noticeType",label:"通知类型",inputWidth:100,validate:"NotEmpty"},
button, 	
		{type: "button",name:"cancle", value: "取消", position:"absolute", inputLeft:160}
password,
		{type: "password", label: "Password", value: "123"},
radio, 
		 {type: "radio", name: "font", value: "by_pages", label: "Use fonts defined by pages", checked: true, readonly: true},
		 {type: "radio", name: "font", value: "custom", label: "Use custom font", list:[]...
checkbox, 
		{type: "checkbox", name: "ch", label: "Open new windows in a new tab instead", checked: true},
btn2state
		{type: "btn2state", label: "Update the app automatically", checked: true, info:true, required:true},
		{type: "btn2state", label: "Configure privacy settings", list:[]...
upload //文件上传
file, 	
calendar, 
editor, 
container, 
	
//具体代码参考API,doc文档	
{type: "block", inputWidth: 250, list:[
	{type: "button", name:"save",value: "提交"},
	{type:"newcolumn", offset:20},  //另起一列
	{type: "button",name:"cancle", value: "取消", position:"absolute", inputLeft:35} //position,inputLeft:调整间距
]}	
required: true,
validate: "NotEmpty"
validate: "ValidTime",ValidInteger
validate: "NotEmpty,ValidEmail",
tooltip: "Please enter your valid e-mail address",
note: {text: "Enter your project name here. This fields is required."}
className: "button_save"
//
myForm.enableLiveValidation(true);
myForm.setFontSize(t + "px");
numberFormat: "0,000.00"
/*
var dp = new dataProcessor("php/data.php");
dp.init(myForm);
*/	

dhxForm Combo注入数据:

function getComboList(combo,url,callback){
 	$.getJSON(url,function(json){
		 var comboData= [{value: "",text: ""}];
	     for(var j=0;j<json.length;j++){
	      		var temp={text:json[j].name,value:json[j].id};
	      		comboData.push(temp);
	      }
	     combo.addOption(comboData);
	     if(callback){
	    	 callback.call(this);
	     }
	});
}

dhxForm的save保存操作:

//1.
form.send(url, mode, callback) //发送请求给服务器,自动携带form的参数数据,由服务器按照name自动接受
//[Save data to the server side script,Names of parameters on server-side are equal to values of “name” attributes on client-side ]
//mode -(optional) a sending mode, can be get or post. The default value - post
//2.
form.attachEvent("onButtonClick",function(name){//保存按钮
	switch(name){
		case "save":{
			console.log(form.getFormData(true));//获取form的数据
			form.send("<%=request.getContextPath()%>saveData.do?id="+urlData.id, "get", function(loader,response){
				//...
			}, false);
			break;
		}
		case "cancle":{
			parent.dhxWins.window("notice_mgmt").close();
			break;
		}
	}	
});
//3.
form.save() //[Saves data of form in DB.]

dhxForm的get获取数据操作:

form.load("<%=request.getContextPath()%>/getData.do?id="+urlData.id,"json");
//获取数据后会自动为dhxForem的各元素加载数据,不用手动去绑定

其他:

Move Option Between Selects:

http://www.dhtmlx.com/docs/products/dhtmlxForm/samples/03_api/12_move_option.html

var formData=[
	{type:"block", list:[
		{type:"settings",position:"label-left",labelWidth:90,inputWidth: 150, labelAlign: "right",offsetTop:10}, 
		{type:"input",name:"password1",label:"设置密码:",value:"",required:true, validate: "NotEmpty"},
		{type:"input",name:"password2",label:"重复密码:",value:"",required:true, validate: "NotEmpty"}
	]},
	{type:"block",list:[
		{type:"settings",offsetTop:15}, 
		{type:"button",name:"save",value:"确定",position:"absolute", inputLeft:40},
		{type: "newcolumn", offset:20},
		{type:"button",name:"cancle",value:"取消",position:"absolute", inputLeft:120}
	]}
];

【上篇】
【下篇】

抱歉!评论已关闭.