整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
树控件的使用
node对象格式：
id：绑定节点的标识值。
text：显示的节点文本。
iconCls：显示的节点图标CSS类ID。
checked：该节点是否被选中。
state：节点状态，'open' 或 'closed'。
attributes：绑定该节点的自定义属性。
children: 一个节点数组声明了若干节点。
注意1.调试object对象：
console.info(node); 在控制台输出对象。点击会显示详细信息
注意2:获取子节点的两种方式：
通过getChildren方法获取
$("#easyUITree").tree("getChildren",node)
通过children参数获取
例如：
[{
"id":1,
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1",
"checked":true
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop",
"checked":true
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"Languages",
"state":"closed",
"children":[{
"text":"Java"
},{
"text":"C#"
}]
}]
<script type="text/javascript">
$(function(){
$("#easyUITree").tree({
url:"treedata.json",
//定义是否启用拖拽功能。
dnd:true,
//定义节点在展开或折叠的时候是否显示动画效果。
animate:true,
//定义是否在每一个借点之前都显示复选框。
checkbox:true,
//定义是否显示树控件上的虚线。
lines:true,
onClick:function(node){
//alert(node.text);
//控制台打印
//console.info(node);
//$("#easyUITree").tree("getChildren",node)
var children=node.children;
alert(children.length)
}
})
})
</script>
-------
、统计图表ECharts
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
主页：http://echarts.baidu.com/
2、弹窗/层 Layer
layer是一款近年来备受青睐的web弹层组件，她具备全方位的解决方案，致力于服务各水平段的开发人员，您的页面会轻松地拥有丰富友好的操作体验。
在与同类组件的比较中，layer总是能轻易获胜。她尽可能地在以更少的代码展现更强健的功能，且格外注重性能的提升、易用和实用性。layer兼容了包括IE6在内的所有主流浏览器。 她数量可观的接口，使得您可以自定义太多您需要的风格，每一种弹层模式各具特色，广受欢迎。
layer遵循LGPL协议，将永久性提供无偿服务。历经数年，截至到2016年09月12日，已运用在20万余家web平台，其中包括中国联通、蚂蚁短租、慕课网、phpyun等等知名网站。
主页：http://layer.layui.com/
3、日期选择 LayDate
你是时候换一款日期控件了，而layDate非常愿意和您成为工作伙伴。她致力于成为全球最用心的web日期支撑，为国内外所有从事web应用开发的同仁提供力所能及的动力。她基于原生JavaScript精心雕琢，兼容了包括IE6在内的所有主流浏览器。她具备优雅的内部代码，良好的性能体验，和完善的皮肤体系，并且完全开源，你可以任意获取开发版源代码，一扫某些传统日期控件的封闭与狭隘。layDate本着资源共享的开发者精神和对网页日历交互无穷的追求，延续了layui一贯的简单与易用。她遵循LGPL协议，您可以免费将她用于任何个人项目。
layDate除了包含日期范围限制、开始日期设定、自定义日期格式、时间戳转换、当天的前后若干天返回、时分秒选择、智能响应、自动纠错、节日识别，快捷键操作等常规功能外，还拥有更多趋近完美的解决方案。
主页：http://laydate.layui.com/
4、表单验证jQuery Validate
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
该插件是由 J?rn Zaefferer 编写和维护的，他是 jQuery 团队的一名成员，是 jQuery UI 团队的主要开发人员，是 QUnit 的维护人员。该插件在 2006 年 jQuery 早期的时候就已经开始出现，并一直更新至今。
主页：https://jqueryvalidation.org/
5、表单向导jquery-steps
jquery-steps是一个聪明的UI组件，它允许您轻松地创建精灵般的接口。这个插件组成部分内容更有条理，有序的页面视图。此外，它很简单，jQuery验证可以防止步改变或提交。
支持HTML5和交互方法，异步（AJAX）内容加载，容易表单验证，嵌入式iframe内容，清爽的过渡效果，键盘导航，简单的步骤操作，在一个页面中的多个向导，轻松导航，状态持久性。
主页：http://www.jquery-steps.com/
6、文件上传Web Uploader
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。
头条号这里就是采用了这款图片上传插件。
主页：http://fex.baidu.com/webuploader/
7、图标库 阿里巴巴矢量图标库
Iconfont.cn是由阿里巴巴UX部门推出的矢量图标管理网站，也是国内首家推广Webfont形式图标的平台。网站涵盖了1000多个常用图标并还在持续更新中，Iconfont平台为用户提供在线图标搜索、图标分捡下载、在线储存、矢量格式转换、个人图标库管理及项目图标管理等基础功能。同时iconfont.cn平台作为矢量图标倡导者，积极在线分享矢量图标制作经验、前端应用说明，及应用中常见的一些问题。
主页：http://www.iconfont.cn/
8、树形菜单jsTree
jsTree是一个基于jQuery的Tree控件。支持 XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。
主页：https://www.jstree.com/
9、表格Bootstrap table
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。目前在github上已经有2600多个Star，可见其受欢迎程度。
支持 Bootstrap 3 和 Bootstrap 2
自适应界面
固定表头
非常丰富的配置参数
直接通过标签使用
显示/隐藏列
显示/隐藏表头
通过 AJAX 获取 JSON 格式的数据
支持排序
格式化表格
支持单选或者多选
强大的分页功能
支持卡片视图
支持多语言
支持插件
主页：http://bootstrap-table.wenzhixin.net.cn/zh-cn/
10、CSS动画Animation.css
Animation.css是一个迷人的动画库，它提供了一堆很酷的，有趣的，跨浏览器的动画，你可以在项目中调用它们。
主页：https://daneden.github.io/animate.css/
限于篇幅，这次只介绍这10款，说是介绍，其实只是抛砖引玉而已，具体的用法我没有附上，其实任何一个库或者控件插件类的，看官方文档是最佳的使用方式，如果有任何问题，请留言，谢谢
单的本质是业务，没有表单是无法完成业务系统的，而动态表单使业务系统更高级。动态表单是什么呢？它是如何工作的？应用场景有哪些？一起来看一下吧。
表单在网页中主要负责数据采集功能，是提交数据的一切形式。表单的本质是提交数据，不仅仅包含输入框、下拉选择框等这些控件，常见的按钮空间也属于一个表单。
动态表单（Dynamic Form），指在前端运行过程中可依赖某些业务逻辑发生表单项变化的表单，还包括表单布局、表单数据管理、表单校验、表单交互、表单项联动逻辑等原本由前端编程完成的表单开发，转由后端通过 API 接口输出表单描述自动完成上述所有内容的表单开发形式。
（动态表单原理示意图）
表单的本质是业务，而动态表单使业务系统更高级。
普通表单是一个表单写一份前端的代码，代码全部由前端开发者完成（后端配合接口输出）。而动态表单则是一个表单对应一个 JSON（由后端输出），所有表单由一份代码（动态表单引擎）进行加载和渲染。
所以，动态表单具有以下优势：
表单控件是提供一组允许用户操作的对象，从而接收用户输入的数据，用户可操作该对象来执行对表单设计，修改等操作。
input元素无疑是一个庞大和复杂的元素，但它并不是唯一的表单控件。还有button、select、option、label、optgroup、textarea、fieldset、legend这八个传统表单控件，datalist、progress、meter、output、keygen这五个新增表单控件。
动态表单是老厂商天翎核心技术之一，也是天翎公司核心产品MyApps的重要组成部分。通过对于动态表单的应用，可以避免在电子流程系统中硬编码的数据采集及处理表单，提高系统的可维护性。
说明：
Form，动态表单实现的基本入口，描述了DynaForm的最基本属性，比如名称、ID、以及最核心的TemplateContext。TemplateContext中保存的是Form的描述XML，通过此XML描述两类信息：
FormElement，接口，表示Form中的基本元素；
FormField，动态表单的最基本元素，在myApps/OBPM中被声明为Abstract，具体Object行为依赖于具体的SubClass实现；
TextField，单行文本框，继承FormField；
SelectField，下拉选择框，继承FormField；
TextareaField，多行文本框，继承FormField；
CheckBoxField，复选框，继承FormField；
RadioBoxField，单选框，继承FormField；
Textpart，静态文本段，除各种Field以外的静态文本部分，继承FormElement；
ComponentField，自定义组件，继承FormField；
AttachmentUploadField，附件上传组件，继承FormField；
ImageUploadField，图片上传组件，继承FormField；
ViewDialogField，视图组件，用于实现主从结构的表单，继承FormField；
CalctextField，计算文本组件，用于实现需要计算的文本，继承FormField；
IncludeField，实现SubForm的包含，继承FormField；
WordField，Word组件，继承FormField；
OcrField，为将来预留的接口，系统暂未实现；
表单引擎是为快速实施项目研发的轻量级表单设计工具。采用表单引擎工具可在不开发和新增加代码的情况下设计出新表单样式，同比程序开发可省掉程序员差不多70%的开发工作量，并且后期维护相对简单，管理方便。
在了解了表单的基本机构后，进一步看看表单引擎是如何工作的。
从客户端（Client）输入数据（Document），比如一个excel文件，表单（Form）结合excel文件自动生成HTML，如下图：
（表单结合文档生成HTML过程）
（XML解析为表单对象的过程）
（表单转为HTML过程）
（表单生成数据库）
天翎Myapps低代码开发平台的表单引擎是基于Web界面上可视化编辑的表单设计系统，同时支持印刷模式和拖拽模式两种设计方式，形象可见，操作方便。印刷模式可以做一些复杂的表单配置，同时还支持word表格的导入；拖拽模式：基于Vue的表单设计器，采用可视化拖拉拽的模式进行表单的设计。
（表单前台）
（表单后台）
本文由 @周志军Jarod 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
*请认真填写需求信息，我们会在24小时内与您取得联系。
