前言
kendo-ui-react-jquery-diagram是一个基于kendo-ui和react的可交互的流程图和组织图表的组件库。该组件库带有强大的UI交互功能、高度可定制化的属性和事件，使您可以方便快捷地在您的项目中实现流程图和组织图。该组件库不仅可以提高开发效率，还可以为您的项目带来更好的用户体验。
安装
在npm上安装kendo-ui-react-jquery-diagram:
npm install --save kendo-ui-react-jquery-diagram
用法说明
引用组件
import { Diagram } from 'kendo-ui-react-jquery-diagram';创建流程图
使用Diagram组件可以轻松地创建流程图和组织图。您会需要定义一个节点和与其相关的一组连线。节点和连接项都可以是不能为空对象，如下所示：
const nodes = [
{ uniqueId: 'n1', x: 150, y: 150, width: 80, height: 90, content: 'Node 1' },
{ uniqueId: 'n2', x: 350, y: 150, width: 80, height: 90, content: 'Node 2' }
];
const connections = [
{ uniqueId: 'c1', from: 'n1', to: 'n2' }
];快速设置工具栏
建议在您的组件中使用Toolbar组件来更简便地设置工具栏，并在其中添加一个Button组件，以便用户可以在需要的时候添加或删除该节点或连接项:
-- -------------------- ---- -------
------ - -------- ------ - ---- --------------------------------
------------- - ------- -- -
------ -
---------
------- ----------- -- ---------------------- ----------------- --------- -- --- -------------
------- ----------- -- ------------------------- ----------------- ----------- -- ------ -------------
------- ----------- -- ---------------------------- ----------------- --------- -- --- -------------------
------- ----------- -- ------------------------------- ----------------- ----------- -- ------ -------------------
----------
--
--渲染组件
-- -------------------- ---- -------
------------- - -- -------- -------------- ----------- ---------------- -- -- -
------ -
-----
--------------------- -------- -------------- ----------- ---------------- ---
--------
------------------------
------------------------------------
--------------------------
--------------------------------------
----------------------------------------------
------------------------------------------
---------------------------------------------- --
------
--
--设置单个节点和连线
如果您想为单个节点和连线设置属性，您可以使用自定义content-template属性:
-- -------------------- ---- -------
----- ----- - -
-
--------- -----
-- ----
-- ----
------ ---
------- ---
-------- -
--------- ------------ --------- ----------------------------------------------------------------------------------------- ---------- ----------- --------
-
-
--
----- ----------- - -
-
--------- -----
-------- -
--------- ------------------------
------ ----
------- --
-
-
--示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------- - ---- --------------------------------
------ - -------- ------ - ---- --------------------------------
------ -------------------------------------------
----- --- ------- --------------- -
----- - -
------ -
- --------- ----- -- ---- -- ---- ------ --- ------- --- -------- ----- -- --
- --------- ----- -- ---- -- ---- ------ --- ------- --- -------- ----- -- -
--
------------ -
- --------- ----- ----- ----- --- ---- -
--
------- -
----- -------
-------- -------
------------- ---
------------ --
-
--
------------- - ------- -- -
------ -
---------
------- ----------- -- ---------------------- ----------------- --------- -- --- -------------
------- ----------- -- ------------------------- ----------------- ----------- -- ------ -------------
------- ----------- -- ---------------------------- ----------------- --------- -- --- -------------------
------- ----------- -- ------------------------------- ----------------- ----------- -- ------ -------------------
----------
--
--
------------- - -- -------- -------------- ----------- ---------------- -- -- -
------ -
-----
--------------------- -------- -------------- ----------- ---------------- ---
--------
------------------------
------------------------------------
--------------------------
--------------------------------------
----------------------------------------------
------------------------------------------
---------------------------------------------- --
------
--
--
----------------- - --- -- -
----- - ----- - - -----------
--------------- -- ------------- --- ------------------ - ---------
--------------- -- ------------- --- ------------------ - ---------
--------------- ----- ---
--
--------------------- - --- -- -
--------------- --------------------- -------------------------- ---
--
------------------- - --- -- -
----- - ------------ -------------------- - - -----------
------------------
--------- ---------------------- - ----
----- ----------------------
--- --------------------
---------- ---------------------
-------- ------------------------
---
--------------- ------------ --------------------- --------- ---
--
--------------------- - --- -- -
---------------
--
------- - -- -- -
----- - ----- - - -----------
------------ --------- ---------------- - ---- -- ---- -- ---- ------ --- ------- --- -------- ---- ----- ---
--------------- ----- ---
--
---------- - -- -- -
----- - ------ ----------- - - -----------
----- --------------- - --------------------------------------------------------------
----- -------------------- - --------------------------------------------------------------------
------------------------------ -- -
----- ------------ - ------------ -- ---------- --- ---------
----------------------------------------- ---
---
----------------------------------------- -- -
----- ------------------ - ------------------ -- ---------- --- ---------------
----------------------------------------------------------- ---
---
--------------- ------ ----------- ---
--
------------- - -- -- -
----- - ----------- - - -----------
------------------ --------- ---------------------- - ---- ----- ----- --- ---- ---
--------------- ----------- ---
--
---------------- - -- -- -
----- - ----------- - - -----------
----- ----------- - --------------------------------------------------------------------
-------------------------------- -- -
----- ------------------ - ------------------ -- ---------- --- ---------------
----------------------------------------------------------- ---
---
--------------- ----------- ---
--
-------- -
------ -
-----
--------------------- -------- ------------- -------------- ------------------- ----------- ---------------- ----------------- --------------------- ---
------
--
-
-
-------------------- --- ----------------------------------结论
kendo-ui-react-jquery-diagram是一个非常有用和灵活的组件，可让您优化流程图和组织图在您的项目中的实现。使用kendo-ui-react-jquery-diagram，您可以利用其许多功能和属性，轻松地管理节点和连接，从而提高了您的项目开发效率，更重要的是，还可以为用户带来更好的用户体验。如果您还没有尝试过kendo-ui-react-jquery-diagram，那么这就是您应该尝试的一个很好的包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efb4c49986ca68d88f4