前几天接了一个任务用DhtmlForm读取xml文件。百度下Dhtmlxform,竟然没有一篇中文的文章,搜了部分外文资料,加上垃圾到几点的官方API,终于算是完成了任务。
1.DhtmlxForm 要求的标准xml格式
<?xml version="1.0"?> <items> <item type="label" name="label1" label="基本配置"/> <item type="checkbox" name="check3" checked="true" label="全路径" position="label-right" /> <item type="radio" name="ffff" checked="" value="online" label="单目录" position="label-right" /> <item type="radio" name="ffff" checked="true" value="disk" label="双目录" position="label-right" /> <item type="checkbox" name="check1" checked="true" label="前目录" position="label-right" /> <item type="checkbox" name="check2" checked="true" label="后目录" position="label-right" /> <item type="select" name="myselect" label="传递方式" > <option text="post" value="op111" selected="" /> <option text="get" value="op222" selected="true" /> </item> <item type="input" name="inputx" value="2007.7.27更新" label="配置描述" rows="2" position="label-left" /> </items>
2.Dhtmlxform生成的结果图
可以看到,Dhtmlxform能根据xml中的描述,自动生成这种样式的界面,是不是很酷啊!!!
你可以对应着上面的xml看一下,很简单就能看到每个元素的设置吧。
3.开始Dhtmlxform吧!
一、首先界面上的有个用来放form的东西,就是要有html文件中有个元素。
比如table、div等都可以。(没有是不能创建dhtmlxform的)
<div id="rightf"> </div>
我先加了个div
4.包含官方库
需要引用的是:
<!-- form --> <script type="text/javascript" src="../../lib/dhtmlxform/dhtmlxform.js"></script> <script type="text/javascript" src="../../lib/dhtmlxform/dhtmlxcommon.js"></script> <script type="text/javascript" src="../../lib/dhtmlxform/dhtmlxdataprocessor.js"></script> <link rel="stylesheet" type="text/css" href="../../lib/dhtmlxform/skins/dhtmlxform_dhx_skyblue.css"></link>
三个库,加上一个css文件,主要用来设置颜色和框框的样式的。必须有啊。
下载地址:点击打开链接
如果你只用dhtmlxform,就直接下form,要是还要用其他的话,就直接下suite吧。
suite中有所有的组件元素:
dhtmlxAccordion
dhtmlxAjax
dhtmlxCalendar
dhtmlxChart
dhtmlxColorPicker
dhtmlxCombo
dhtmlxConnector
dhtmlxDataProcessor
dhtmlxDataStore
dhtmlxDataView
dhtmlxEditor
dhtmlxForm
dhtmlxGrid
dhtmlxLayout
dhtmlxMenu
dhtmlxSlider
dhtmlxTabbar
dhtmlxToolbar
dhtmlxTree
dhtmlxWindows
5.创建Dhtmlxform
var rightform = new dhtmlXForm("rightf"); rightform.setSkin("dhx_skyblue"); //rightform.loadStruct("C:/Smart/Workbench/2.0.2/System/xml/tm.xml"); rightform.loadStructString(current_value);
rightf为div的id,skin的设置你是包含的css一致的。第三句是加载xml,前一句是加载个xml文件,后一句是加载一个字符串,但是此字符串必须是标准的完整的xml语句。
6.dhtmlxform的API
官方文档:点击打开链接
官方文档中列出了所有的API,不过很不幸的是,没有丝毫的说明。
特别提示:由于Dhtmlx这个库都分为收费版和免费版,对于免费版有部分函数是不起作用的,所有如果发现怎么就是不起作用时,不用怀疑自己的人品。还有就是至今没人破解dhtmlxform(dhtmlxtree早就有破解的了)。
函数介绍:
.unload() 销毁掉dhtmlxform,这是在html页面中form就不见了
.getForm() 得到form自身
好了别的就不写了,简单的应该应该朋友们还认识
所有的API:点击打开链接
7.dhtmlxform支持的元素
由于我的本部分代码是和Dhtmlxtree、DhtmlxLayout结合的,所有就不贴代码了。
菜鸟一只,欢迎批评指正!