调用基本的dhtmlx.js和dhtmlx.css
1.需要下载dhtmlxsuite基本库
构建网页布局,常用有toolbar/menu/grid/form
1.构建基本的布局
dhtmlxEvent(window,”load”,function()加载网页
dhtmlXLayoutObject对象创建布局对象
2.创建具体的布局样式,调用或者内嵌CSS
3cell对象下的各种方法,设定样式.比如,setText() 设立标题
按钮添加
1.dhtmlx.image_path引用图片
2.创建attachMenu对象
3.menu.setIconsPath表现menu的图标
4.menu.XML表现menu的内容列表
5.menu.loadStruct(“data/menu.xml”);引用对应的menu.xml
toolbar添加
方式类似按钮
grid添加
1.attachGrid()
2.配置gird,直接在html中添加
contactsGrid.setHeader(“Name,Last Name,Email”); //sets the headers of columns
contactsGrid.setColumnIds(“fname,lname,email”); //sets the columns’ ids
contactsGrid.setInitWidths(“250,250,*”); //sets the initial widths of columns
contactsGrid.setColAlign(“left,left,left”); //sets the alignment of columns
contactsGrid.setColTypes(“ro,ro,ro”); //sets the types of columns
contactsGrid.setColSorting(“str,str,str”); //sets the sorting types of columns
3.contactsGrid.init();结束grid的初始化
将grid与数据库同步
1.数据库新建表,字段先建好
2.同步数据库的数据到grid中,需要dhtmlxConnector library,connector文件夹
3.新建contacts.php 连接数据库
4..contactsGrid.load(“data/contacts.php”);连接PHP
过滤器添加,grid查询功能
1.contactsGrid.attachHeader(“#text_filter,#text_filter,#text_filter”);在grid上面添加filter
from添加
1.contactForm = layout.cells(“b”).attachForm();把from添加到相应的cell里面
2.创建from.xml,创建from的列表项
3.loadStruct调用xml
将from链接Bind到grid中
1.contactForm.bind(contactsGrid);
保存来自from的数据,数据处理器dataprocessor
1.初始化dhtmlxDataProcessor,并将它添加到grid中
var dpg = new dataProcessor(“data/contacts.php”); //inits dataProcessor
dpg.init(contactsGrid); //associates the dataProcessor instance with the grid
2.handler处理程序来响应submit按钮的onButtonClick事件,并且把更新的书架发送到数据库服务器
在grid中添加和删除数据记录
1.调研方法onClick()来响应Add按钮的点击事件,在grid中创建新的row
2.调用方法 onAfterUpdate(),选择新建的数据记录,一旦grid完成来自服务器的响应,记录成功的添加到数据库中。选择最新被创建的row,然后focus到from的第一个input中。
dpg.attachEvent("onAfterUpdate", function(sid, action, tid, tag){if (action == "inserted"){contactsGrid.selectRowById(tid); //selects the newly-created row contactForm.setFocusOnFirstActive();//set focus to the 1st form's input }
});
3.调用onClick()方法,系统调用重写,相应delete按钮
PS
1.注意onClick与onButtonClick方法的异同之处