Overview of the main elements of the interface
DHTMLX is a complete set of interface components with client program effects, which solves common client operation requirements. This set of components uses JavaScript and xml to define component characteristics, and some components can even render HTML elements directly.
Common container elements include: layout, sliding window (accordion), tab (tab), window (window);
common data elements include: table (grid), tree (tree), selection box (combo), Calendar (calendar);
common form elements include: right-click menu (menu), toolbar (toolbar).
The process of using interface components:
(1) Refer to the necessary header files, mainly including script files.js and style files.css; all components must refer to dhtmlxcommon.js and the script file of this component. Some components also have skin style files.
(2) The ways of using interface components include (1) using Javascript and xml to initialize components and (2) directly rendering html elements.
a) If you use javascript and xml for initialization, you need to declare a <div> before the script, and specify the id, and then use the id to load the <div> in the script.
b) To directly render the html element, you need to declare the html element before the script, and specify the id, and then obtain the handle of the html element through the method of dhtmlXxxxxFromxxxx in the script, and operate it.
(3) The interface component can use xml to load data at one time, but it has been verified that an error will be reported when xml loads Chinese data. You can also use javascript to load data one by one. Most container components provide setContent or attachObject methods to load data. setContent also has similar functions such as setContentHTML, setContentHref, attachObject and attachUrl.
(4) Usually, using url makes the container content can be realized by another page, which can simplify the content of this page and reduce the coupling between the frame page and the data page; to access the parent container, you can use the _frame attribute of the component or its content. However, after using the url, the handle of the container will be lost, which is not conducive to the return visit to the container.
(5) Help document description: Open the index.html file after decompressing the dhtmlxSuite.zip archive. The
document is divided into the introduction of the Documentaction component. The introduction of the api
Samples (used in various scenarios)
Most usage scenarios find solutions in this official document
layout
(1) The Layout component is newly created using the constructor dhtmlXLayoutObject. This function accepts three parameters. The first parameter is the filling target, which can be an HTML element (id of a div), or other containers such as windows and tabs. The second parameter is the style of the layout, as shown in the following figure. The third parameter is the skin.
dhtmlx page layout structure
dhtmlx page layout structure
(2) You can further customize the response of the layout, for example, define the right-click menu through attachMenu, define the toolbar through attachToolbar, and define the status bar through attachStatusBar.
(3) You can further customize the appearance of each form in the layout. First, get the form through the cell method of dhxLayout, secondly define the title of the layout through setText, define whether the title is displayed through showHeader/hideHeader, define whether to expand through expand/collapse, define whether to maximize through dock/undock, through setHeight/setWidth Define its size.
(4) The content of the layout can be further customized. After the form is found, the target url can be displayed in the form through attachUrl, and other dhtmlx components can be used to fill this form through attachXxx.
bookmark
(一) Tab组件支持渲染html元素，但渲染过程不比从javascript构造简单，因此仍然建议使用构造函数dhtmlXTabBar新建。此函数接受两个参数，第一个参数是填充目标，第二个参数是样式(top、bottom、left、right)。
(二) 接下来必须用setImagePath指明图像资源目录。
(三) 接下来使用addTab为Tab添加页签。addTab接受三个参数，第一个参数是id，第二个参数是label，第三个参数是宽度。
(四) 可以进一步为每个页签指明内容，使用setContent、setContentHTML以及setContentHref可以将其他元素、HTML源代码、其他url作为页签内容。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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的方法定义每个面板里的页面。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<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 可以采用的方式如下
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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
|
1
2
3
4
5
6
7
|
Step1: 创建html元素
<table style=
"width:900px"
id=
" tableId "
></table>
Step2: 绑定html元素
var gridTemp =
new
dhtmlXGridFromTable(
"tableId"
);
注意：引入扩展包中的ext/dhtmlxgrid_start.js
Step3: 在文档加载时调用
<BODY onLoad=
"doInnit();"
>
|
Disadvantages: The method of
dhtmlXxxxxFromxxxx obtains the handle of the html element. When the operation is performed, the description of the document is not detailed and the use is limited (my own feeling) . Interaction (it is very convenient when the report is generated, this function is automatically blocked under Firefox) The original pop-up window plus refresh is an alternative to adding data to the old-fashioned product. Based on the cell-based editing implementation
drop down box
(1) Combo also supports HTML rendering and javascript creation.
(2) The most amazing way to use is of course the enableFilteringMode(true) method, which can easily make the input box program the characteristics of keyword hints implemented by most software such as google and Baidu.
dialog window
(1) The construction of the window must first construct dhtmlXWindows in javascript, and obtain the window handle through his createWindow.
(2) Next, define its global variable viewPort through enableAutoViewport(false) and setViewport(top, left, width, height, parentObj);
(3) Then specify the content for the window through attachXxx;
(4) If it is a dialog box, you want to restrict The background window gets the focus and should be specified as a modal window through setModal(true).
(5) Talk to the parent container and still use the _frame attribute to get the handle.
http://www.cnblogs.com/lidabo/archive/2011/11/02/2233468.html