metadata-dhtmlx-ui 是一个前端组件库，它提供了多种方便、高效的前端组件，如表格、表单、树形控件等。本文将详细介绍如何使用该npm包。
安装
使用npm安装metadata-dhtmlx-ui：
npm install metadata-dhtmlx-ui
或者可以使用yarn：
yarn add metadata-dhtmlx-ui
基本使用
首先，我们需要创建一个包含metadata-dhtmlx-ui组件的html页面。这里以创建一个包含一个表格的示例页面为例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ------------
----- ---------------- ---------------------------------------------------------- --------------- ----------------
----- ---------------- -------------------------------------------------------------------- --------------- ----------------
------- ------------------------------------------------------------------
-------
------
---- ------------------- ----------------------------------------
--------
--- ---- - --- -----------------------------------
--------------------------------------------------------------------
------------------ -----------
--------------------------------
-----------------------------
----------------------------------
------------
-------------------------
---------
-------
-------页面中包含了一个div容器，id为“grid_container”，表示一个表格组件，并通过JavaScript代码创建了一个Grid对象，设置表格的列头、列宽、列类型等，并最终加载了一个XML格式的数据。
上述代码通过css引入了metadata-dhtmlx-ui库的样式文件，以及js引入了dhtmlx.js文件。关于样式文件的引入，需要注意的是，metadata-dhtmlx-ui是基于dhtmlx提供的库进行封装，它的样式文件只是对dhtmlx的样式进行了修改，所以在引入metadata-dhtmlx-ui时需要先引入dhtmlx的样式文件。
示例代码
下面是metadata-dhtmlx-ui的另一个示例代码，它展示了一个包含一个表单和一个树形控件的页面：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------------- ------------
----- ---------------- ---------------------------------------------------------- --------------- ----------------
----- ---------------- -------------------------------------------------------------------- --------------- ----------------
------- ------------------------------------------------------------------
-------
------
---- ------------------- ----------------------------------------
---- ------------------- ----------------------------------------
--------
--- ---- - --- ---------------------------- -
- ---------------- ---------------------- --------------- -------------- --
- ------------- ----------- ----------- --
- ------------- ----------- ---------- --
- ------------- ----------- -------------- -
---
--- ---- - --- ---------------------------------- ------- ------- ---
--------------------------------------------------------------------
-------------------------
-------------------------
-----------------------
---------
-------
-------页面中包含了一个div容器，id为“form_container”，表示一个表单组件，可以动态地添加、删除表单元素，并通过JavaScript代码创建了一个Form对象；另一个div容器，id为“tree_container”，表示一个树形控件，并通过JavaScript代码创建了一个Tree对象。
深入探讨
metadata-dhtmlx-ui提供了很多的前端组件以及API，这些内容可以通过官方文档了解更多。
dhtmlxGrid对象
dhtmlxGrid对象是metadata-dhtmlx-ui中一个重要的组件，它提供了非常高效的展示和编辑表格的方式。下面是一些dhtmlxGrid对象常用的API：
setImagePath
设置表格中图片的路径。
grid.setImagePath("node_modules/metadata-dhtmlx-ui/codebase/imgs/");setHeader
设置表格的列头，每个列头之间用逗号隔开。
grid.setHeader("产品 ID,名称,编码");setInitWidths
设置表格的列宽，每个宽度之间用逗号隔开，可以使用百分比表示比例。宽度的总和应该等于表格容器的宽度。
grid.setInitWidths("100,*,150");setColTypes
设置表格的列类型，包括ro（只读）、ed（可编辑）、combo（下拉框）、ch（复选框）等。
grid.setColTypes("ro,ed,ed");setColSorting
设置表格的列排序方式，包括int（整数）、str（字符串）等。
grid.setColSorting("int,str,str");init
初始化表格对象。
grid.init();
loadXML
从XML文件中加载表格数据。
grid.loadXML("data.xml");dhtmlxForm对象
dhtmlxForm对象是metadata-dhtmlx-ui中另一个重要的组件，它提供了动态添加、删除表单元素、样式定制等功能。下面是一些dhtmlxForm对象常用的API：
setWidth
设置表单的宽度。
form.setWidth("500px");setHeight
设置表单的高度。
form.setHeight("300px");addItem
向表单中添加一个表单元素。
form.addItem({ type:"input", label:"电子邮件", name:"email" });removeItem
从表单中移除一个表单元素，参数为表单元素的名称。
form.removeItem("email");setFormData
将表单的值设置为一个JavaScript对象中的值。
form.setFormData({ name: "张三", age: 18, sex: "男" });dhtmlxTree对象
dhtmlxTree对象是metadata-dhtmlx-ui中另一个常用的组件，它提供了以树形结构展示数据的功能。下面是一些dhtmlxTree对象常用的API：
setImagePath
设置树形控件中图片的路径。
tree.setImagePath("node_modules/metadata-dhtmlx-ui/codebase/imgs/");setDataMode
设置树形控件使用的数据格式，支持json、xml等格式。
tree.setDataMode("json");enableCheckBoxes
启用树形控件的复选框功能。
tree.enableCheckBoxes(1);
load
从外部文件中加载树形控件的数据，文件格式可以是json、xml等格式。
tree.load("tree_data.json");总结
本文介绍了metadata-dhtmlx-ui的基本使用以及一些常用的API，包括dhtmlxGrid、dhtmlxForm、dhtmlxTree等组件的使用。
metadata-dhtmlx-ui提供了丰富而又实用的前端工具，可以方便开发人员快速构建自己的前端应用。希望本文对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fd581e8991b448dd617