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} ]} ];