最终效不雅如下：

实现 Email 列表

创建Email 列表：

其中:

• columns 用来定义表头;
• header:{ content:"masterCheckbox" } 定义了可以全选列表的 checkbox;
• template:"{common.checkbox()}" 设置每个列表项都邑带有一个 checkbox;
• scrollX 设置为 false，意味着禁用了程度的滚动条。
• fillspace 设置为 true，意味可以主动填充宽度。

最终效不雅如下：

事宜处理

事宜，让组件具备交互功能：

还记得我们的在“快速开端”部分的那缸莨狁吗?这里同样须要用表格来实现 Email 列表：

最终效不雅如下：

按钮实现

按钮实现如下：

个中：

• "my_datatable" 为 datatable 组件的 id。绑定了"my_tree"的点击事宜;
• $$("my_tree").select(1) 意味着树节点会选中第一个节点。

【编辑推荐】

1. Top 10 JavaScript编辑器，你在用哪个？
2. JavaScript创建对象的七种方法
3. JavaScript六种持续方法
4. Vue vs React: Javascript框架之战
5. 不要再在JavaScript中写 CSS了

【义务编辑：枯木 TEL：（010）68476606】

最终效不雅如下：

展示 Email 正文

展示 Email 正文实现如下：

如不雅想显示文本，可以编写如下脚本：

最终效不雅如下：

编辑窗口

发送邮件，我们须要有一个编辑窗口：

个中：

• "my_datatable" 为 datatable 组件的 id。绑定了"my_tree"的点击事宜;
• $$("my_tree").select(1) 意味着树节点会选中第一个节点。

然后在“创建”的按钮上，添加弹出窗口的事宜：

最终效不雅如下：

资本

源码：

• https://github.com/waylau/webix-tutorial

参考文献：

• https://opensource.com/article/17/5/10-step-guide-webix-framework
• https://docs.webix.com/tutorials__quick_start.html
• 本文同步至https://waylau.com/email-client-with-webix 

个中:

• tree 是一个功能丰富的树形组件;
• open 设置为 true，来让我们的树在初始化时就处于打开状况。

　　推荐阅读

　　超融合基础设施产品为数据中心增添动力

作为IT时代的大年夜业人员，你应当懂得VCE的融合体系家族(如今是Dell EMC的融合平台部分)在以前喂恼菩一向在跨>>>详细阅读

本文标题：实用！如何使用Webix创建Email客户端

地址：http://www.17bianji.com/lsqh/36010.html

 1/2    1