DHTMLX基本用法

最新推荐文章于 2026-03-27 02:57:01 发布

原创最新推荐文章于 2026-03-27 02:57:01 发布 · 3k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#DHTMLX

DHTMLX学习之路专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用DHTMLX进行网页布局，包括toolbar、menu、grid和form的构建。从下载基本库开始，详细讲解了布局创建、菜单与工具栏的设置、数据网格的配置以及与数据库的同步。还涵盖了过滤器、表单绑定、数据处理器的使用，以及如何在grid中添加和删除数据记录。

调用基本的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方法的异同之处