整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
樹控件的使用
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小時內與您取得聯系。
