dhtmlx技术使用总结与介绍中文手册

关注

转载最新推荐文章于 2026-06-19 16:10:30 发布 3.3w 阅读 AI 写同款· GEO 优化 ›

甘特图 Dhtmlx Gantt 甘特图Dhtmlx Gantt 阅读详情

界面的主要元素概述

DHTMLX是一套完整的具有客户端程序效果的界面组件，解决了常见的客户端操作要求。这套组件采用javascript、xml定义组件性征，某些组件甚至可以直接渲染HTML元素。
常见的容器元素包括：布局(layout)、滑动窗口(accordion)、页签(tab)、窗口(window)；
常见的数据元素包括：表格(grid)、树(tree)、选择框(combo)、日历(calendar)；
常见的窗体元素包括：右键菜单(menu)、工具条(toolbar)。

界面组件的使用流程：
(一) 引用必要的头文件，主要包括脚本文件.js以及样式文件.css；所有组件使用都必须引用dhtmlxcommon.js，以及本组件的脚本文件。部分组件还有皮肤样式文件。
(二) 界面组件使用的方式包括(1)使用Javascript、xml对组件进行初始化及(2)直接渲染html元素。
a) 使用javascript和xml进行初始化的，需要在脚本之前声明一个<div>，并指明id，再在脚本中利用id对<div>进行装载。
b) 直接渲染html元素的，需要在脚本之前声明html元素，并指明id，再在脚本中通过dhtmlXxxxxFromxxxx的方法获取html元素的句柄，并加以操作。
(三) 界面组件可以用xml一次性加载数据，但是经验证，xml加载中文数据是会报错。也可以使用javascript逐一加载数据，大多数容器组件提供setContent或者attachObject的方法来加载数据。setContent还有setContentHTML、setContentHref，attachObject还有attachUrl等系列作用类似的方法。
(四) 通常，使用url使容器内容可以由另外一个页面来实现，可以简化本页面的内容，降低框架页面和数据页面的耦合性；访问父容器可使用组件或其内容的_frame属性。但是使用了url以后，会丢失容器的句柄，不利于对容器的回访。
(五) 帮助文档说明：在dhtmlxSuite.zip 压缩包下解压后打开index.html 文件
文档分为Documentaction 组件的介绍 api的介绍
Samples（各种场景使用）
大部分使用场景在这份官方文档中寻找解决方法

布局

(一) Layout组件采用构造函数dhtmlXLayoutObject新建。此函数接受三个参数，第一个参数是填充目标，可以是HTML元素(div的id)、也可以是窗口、页签等其他容器，第二个参数是布局的样式，如下图所示，第三个参数是皮肤。

dhtmlx页面布局结构

(二) 可以进一步对layout的响应进行定制，例如通过attachMenu定义右键菜单，通过attachToolbar定义工具条，通过attachStatusBar定义状态条等。
(三) 可以进一步对layout里每个窗体的外观进行定制。首先先要通过dhxLayout的cell方法获取窗体，其次通过setText定义布局的标题，通过showHeader/hideHeader定义标题是否显示，通过expand/collapse定义是否展开，通过dock/undock定义是否最大化，通过setHeight/setWidth定义其尺寸。
(四) 可以进一步对layout的内容进行定制。找到窗体后，通过attachUrl可以再窗体内显示目标url，通过attachXxx可以使用其他dhtmlx组件来填充此窗体。

页签

(一) Tab组件支持渲染html元素，但渲染过程不比从javascript构造简单，因此仍然建议使用构造函数dhtmlXTabBar新建。此函数接受两个参数，第一个参数是填充目标，第二个参数是样式(top、bottom、left、right)。
(二) 接下来必须用setImagePath指明图像资源目录。
(三) 接下来使用addTab为Tab添加页签。addTab接受三个参数，第一个参数是id，第二个参数是label，第三个参数是宽度。
(四) 可以进一步为每个页签指明内容，使用setContent、setContentHTML以及setContentHref可以将其他元素、HTML源代码、其他url作为页签内容。

 
  
        Var tabbar=
        new 
        dhtmlXTabBar(
        "tab"
        ,
        "top"
        );
       

        tabbar.setImagePath(
        "./tabbar/codebase/imgs/"
        );
       

        tabbar.setSkinColors(
        "#FCFBFC"
        ,
        "#F4F3EE"
        ,
        "#FCFBFC"
        );
       

        tabbar.setHrefMode(
        "iframes"
        );
       

         
       

        tabbar.addTab(
        "s0"
        ,
        "首页"
        ,
        "100px"
        );
       

        tabbar.addTab(
        "s8"
        ,
        "159成本核算信息系统"
        ,
        "150px"
        );
       

         
       

        tabbar.setTabActive(
        "s8"
        ,
        true
        ,
        false
        );
       

         
       

        tabbar.setContentHref(
        "s0"
        ,
        "/"
        );
       

        tabbar.setContentHref(
        "s8"
        ,
        "./159/index.html"
        );
       

         
       

        //tabbar.loadXML("module.xml");
       

        tabbar.enableAutoReSize(
        true
        );
       
 
 

滑动窗口

(一) Accordion组件构造函数dhtmlXAccordion创建。此函数接受两个参数，第一个参数是填充目标，第二个参数是皮肤。
(二) 通过addItem可以逐一创建面板。此函数接受两个参数，第一个是面板id，第二个是面板标题。
(三) 通过dhtmlXAccordion的cell方法获得窗口内的面板，并通过attachXxx的方法定义每个面板里的页面。

 
        <div id=
        "m1" 
        style=
        "top: 20px;left 20px"
        >
       
        <table>
       
        <tr>
       
        <td></td>
       
        <td>
       
        <a href=
        "../159/1/1-1/list.html"
       
        onClick=
        "retrieve(this);return false;"
        >成本科目维护</a>
       
        </td>
       
        </tr>
       
        </table>
       
        </div>
       
        var dhxLayout =  
        new 
        dhtmlXLayoutObject(document.body, 
        "2U"
        );
       
        dhxLayout.cells(
        "b"
        ).hideHeader();
       
        dhxLayout.cells(
        "a"
        ).setWidth(
        230
        );
       
        dhxLayout.cells(
        "a"
        ).setText(
        "操作清单"
        );
       
        var dhxAccord = dhxLayout.cells(
        "a"
        ).attachAccordion();
       
        dhxAccord.addItem(
        "m1"
        , 
        "基础信息维护"
        );
       
        //dhxAccord.addItem("m2", "系统集成");
       
        dhxAccord.cells(
        "m1"
        ).attachObject(
        "m1"
        );
       
        //dhxAccord.cells("m2").attachObject("m2");
       
        dhxAccord.openItem(
        "m1"
        );
       
        function retrieve(url){
       
        dhxLayout.cells(
        "b"
        ).attachURL(url);
       
        }

页面布局图

表格

(一) Grid组件可通过HTML元素渲染，Grid组件扩展了html的td元素。Table里首行的 td 可以定义列的操作属性。这些属性包括只读(ro)、单行编辑(ed)、大段文本编辑(txt，类似于<textarea />)、复选框(ch)、单选按钮(ra)、下拉列表(co)、列表框(coro，不接受列表以外的输入)、金融格式(price)、动态标记(dyn)。
(二) 如果数据列是子表格，可以使用sub_row以及sub_row来标记列的类别。后者在调用时加载。
(三) Grid可以通过getCombo(列号).put(value,label)来定义复选框(co)和列表框(coro)的可选范围。
(四) Grid可以通过group/ungroup方法对数据分组显示
(五) Grid可以对表头或表底做特殊设置，例如本列求和(stat_total)、多列求和stat_multi_total)、最大值(stat_max)、最小值(stat_min)、平均值(stat_average)、计数值(stat_count)，相信有这些组件的帮助，我们也比Excel不逊色吧：）
(六) Grid还支持客户端的很多操作，例如addRow、moveRow、deleteRow等等，让我们告别原始的弹出窗口加刷新的老套添加数据的方法吧：D
(七) Grid竟然还支持和剪贴板(Clipboard)交换数据，通过enableBlockSelection、copyBlockToClipboard、gridToClipboard、rowToClipboard、cellToClipboard、gridFromClipboard、updateRowFromClipboard、addRowFromClipboard、updateCellFromClipboard等方法可以与Excel直接交换数据。
加载数据的实现的方式：
js 构建
A 先创建表各种属性：表头皮肤图片路径等
B 增加表格的body 可以采用的方式如下

 
        dhtmlxGrid supports different types of data sources:
       
        - xml;
       
        - csv;
       
        - json;
       
        - javascript array.
       
        基于服务器端：
       
        grid.load(url) -loads data from a remote file, xml is expected by 
        default
        ;
       
        grid.load(url,
        "csv"
        ) - the same 
        for 
        csv format;
       
        grid.load(url,
        "json"
        ) - the same 
        for 
        json format;
       
        grid.load(url,
        "jsarray"
        ) - the same 
        for 
        jsarray format.
       
        基于本地：
       
        grid.parse(object) -loads data from a string|object, xml is expected by 
        default
        ;
       
        grid.parse(data,
        "csv"
        ) - the same 
        for 
        csv format;
       
        grid.parse(data,
        "json"
        ) - the same 
        for 
        json format;
       
        grid.parse(data,
        "jsarray"
        ) - the same 
        for 
        jsarray format.

优点:一个拥有各种属性方法支持的对象我们可以在文档说明的范围内控制它
缺点：加载的数据格式需要符合他们的规则需要对数据封装也不直观格式受限
直接渲染html元素
注意：实现直接渲染html 元素必须从各组件中的扩展包中引入ext/dhtmlxXXX_start.js

 
        Step1: 创建html元素
       
        <table  style=
        "width:900px"  
        id=
        " tableId "
        ></table>
       
        Step2: 绑定html元素
       
        var gridTemp =  
        new 
        dhtmlXGridFromTable(
        "tableId"
        );
       
        注意：引入扩展包中的ext/dhtmlxgrid_start.js
       
        Step3: 在文档加载时调用
       
        <BODY onLoad=
        "doInnit();"
        >

缺点：dhtmlXxxxxFromxxxx的方法获取html元素的句柄进行操作时文档的说明不详细使用受限（我自己的感觉）
优点：数据更新时简单直观
问题列表
加载数据的方式
复杂的表头信息的处理
对excel的交互（报表生成时很方便该功能在火狐下自动屏蔽）
原始的弹出窗口加刷新的老套添加数据的替代产品基于单元格的编辑实现

下拉框

(一) Combo也同时支持HTML渲染和javascript创建。
(二) 最神奇的使用方式当然是enableFilteringMode(true)方法，可以轻松地使输入框编程google、百度等大多数软件实现的关键词提示的特性。

对话框窗口

(一) 窗口的构造首先要在javascript中构造dhtmlXWindows，并通过他createWindow，获得窗口句柄。
(二) 其次要通过enableAutoViewport(false)和setViewport(top,left,width,height, parentObj)定义其全局变量viewPort;
(三) 然后通过attachXxx为窗口指定内容；
(四) 如果是对话框，想限制背景窗口获得焦点，应通过setModal(true)指定是模态窗口。
(五) 与父容器对话，仍然使用_frame属性获得句柄。