整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
模版引擎擴展是一種比較特殊的擴展，它不允許開發人員對擴展進行自定義，必須要嚴格按照第三方模版引擎提供的處理方式設計模版。也就是說如果改變模版引擎，模版必須重新設計。ThinkPHP內置了兩種模版引擎擴展（Smarty及Tempate）。要更改模版引擎，只需要在配置文件中指定TMPL_ENGINE_TYPE配置項即可，默認如下。
'TMPL_ENGNE_TYPE'=> 'Smarty'
這里需要注意的是，雖然系統提供了模版擴展機制，但只能完成基礎的模版解釋操作，對于模版原有的內置擴展并不支持，例如在模版中使用自定義函數、類庫、緩存等。但我們可以通過擴展控制器的方式實現，如以下代碼所示。
如上述代碼所示，通過創建一個PubAction的公共控制器，在該控制器中實現Smarty模版引擎的初始化，項目下的所有控制器均繼承于該控制器，通過這種方式就可以實現全功能的Smarty模版擴展，在設計模版時開發人員可以使用Smarty內置的所有功能，如以下代碼所示
index動作對應的index.html模版文件如下代碼所示
ataGear數據可視化分析平臺提供了導入靜態HTML模板的功能，使您可以利用已有的任意HTML網頁資源制作數據可視化看板。
首先，您需要準備一套已設置好布局的靜態HTML模板，其中包含的HTML網頁及相關資源，例如：
index.html
css/
|---style.css
|---images
|---bg.png
|---bg_head.png
js/
|---index.js
|---common.js它的靜態效果如下圖所示：
然后，將這套靜態HTML模板壓縮到一個ZIP文件中，使用DataGear看板的[導入]功能，將這個ZIP文件導入為看板。
導入成功后，打開看板編輯界面，為HTML模板中的div元素添加dg-chart-widget屬性綁定圖表組件，例如：
...
<div class="panel-content"
dg-chart-widget="圖表組件ID"></div>
...其中，圖表組件ID 是圖表管理列表中的一個圖表條目ID。
設置完所有的div元素后，一個數據可視化看板就制作完成了，點擊[保存并展示]按鈕，即可查看展示效果。
等等，默認的展示效果差強人意……，沒關系，自定義展示效果也很簡單！
首先，自定義圖表主題，打開看板編輯界面，為<body>標簽添加dg-chart-theme自定義圖表主題，如下代碼：
...
<body dg-chart-theme="{color:'#F0F0F0',
backgroundColor:'transparent',
actualBackgroundColor:'#050d3c'}">
...
</body>
...然后，自定義圖表設置項，為<body>標簽添加dg-chart-options屬性，定義全局圖表設置項：
<body ... dg-chart-options="{title:{show:false},
legend:{top:0},grid:{top:25}}">
<!--隱藏標題、圖例頂部展示、坐標系距頂部25像素，具體參考echarts設置項-->大功告成！
官網地址：http://www.datagear.tech
源碼地址：
https://gitee.com/datagear/datagear
https://github.com/datageartech/datagear
對于文件上傳，我們并不陌生，HTML自帶了上傳文件表單，但是我們都知道，那些真的滿足不了我們的大多數需求，諸如多選、預覽、刪除、拖拽等各類繁雜的功能，原生的文件上傳Input確實很難滿足我們的需求，因此就誕生了很多第三方的上傳組件，比如大家熟知的百度WebUploader、之前我也有介紹過類似的組件，功能都非常豐富，大家可以根據自己的需求酌情選擇，符合自己的需要才是最好的，當然原生的或許就夠了呢！
https://github.com/kartik-v/bootstrap-fileinput
此項目一共多大一千多次提交，60+發布以及，4k+star，可見還是很受廣大開發者的認可的！
以下是借助翻譯將功能大致描述下：
1、Bootstrap 3.x和4.x的增強型HTML 5文件輸入以及各種文件的文件預覽，提供多種選擇，可恢復的塊上傳等；
2、該插件允許您使用一種簡單的方法來設置高級文件選擇器/上傳控件，該控件專為Bootstrap 3.x或4.x CSS3樣式而設計；
3、它通過提供支持來預覽各種文件，即圖像，文本，html，視頻，音頻，閃存和對象，進一步增強了文件輸入功能。
4、此外，它還包括基于AJAX的上傳，拖放文件，查看上傳進度以及有選擇地預覽，添加或刪除文件。
【1】使用bower
bower install bootstrap-fileinput
【2】使用npm
npm install bootstrap-fileinput
【3】初始化，例如
//默認
$("#input-id").fileinput();
// 外加插件
$("#input-id").fileinput({'showUpload':false, 'previewFileType':'any'});
文件輸入功能（翻譯+意譯）：
1、該插件將簡單的HTML文件輸入轉換為高級文件選擇器控件。對于不支持JQuery或Javascript的瀏覽器，將有助于回退到正常的HTML文件輸入。
2、文件輸入包含以下三個部分，其中包含用于控制顯示的選項和模板：
3、type=file如果設置了插件，插件會自動將輸入轉換為高級文件選擇器輸入class=file。輸入的所有選項都可以作為HTML5 data屬性傳遞 。
4、能夠選擇和預覽多個文件。使用HTML 5文件閱讀器API來讀取和預覽文件。如果選擇了多個文件，則顯示正在加載到預覽區域的文件的進度。
5、提供預定義的模板和CSS類，可根據需要更改為文件輸入顯示的樣式。
6、能夠配置插件以顯示帶有初始標題的圖像/文件的初始預覽 （對于記錄更新方案更有用）。參考initialPreview， initialPreviewConfig，和 initialCaption 插件選項部分中的屬性用于配置此屬性。
7、能夠將內容縮放為詳細預覽。在預覽中查看縮放內容的幻燈片，最大化為無邊框或全屏預覽。
8、能夠通過拖放在初始預覽中對內容進行排序/重新排列。
9、能夠完全控制窗口小部件并控制樣式和布局。
10、通過語言環境/翻譯支持同一頁面上的多語言小部件。
11、顯示/隱藏以下任何或所有內容的選項：
12、自定義目標容器元素的位置以顯示整個插件，標題容器，標題文本，預覽容器，預覽圖像和預覽狀態。
13、對于文本文件預覽，將文本自動換行到縮略圖寬度，并顯示環繞指示符以在懸停時顯示完整文本。您可以自定義換行指示符（默認為...）。
14、自定義預覽，進度和所選文件的信息。
15、上傳操作默認為表單提交。支持上傳路由/服務器操作參數，用于基于自定義ajax的上傳
16、觸發JQuery事件以進行高級開發。目前可用的事件是filereset， fileclear，filecleared，fileloaded，和fileerror。
17、已禁用和只讀文件輸入支持。
18、動態自動調整超過容器寬度的長文件名的文件標題。
19、提升fileimageuploaded在預覽容器上完全加載圖像后觸發的新事件。
20、當預覽圖像超出預覽容器的大小時自動調整大小。
21、完全模板化和可擴展，允許以開發人員想要的方式配置文件輸入。
22、基于各種文件預覽類型預覽智能。內置的文件支持類型分類為 image，text，html，video，audio，flash， object，和other。
23、allowedPreviewTypes：您現在可以配置允許將哪些文件類型顯示為預覽。默認為['image', 'html', 'text', 'video', 'audio', 'flash', 'object']。因此，默認情況下，所有文件類型都被視為要預覽的對象。對于只有exampleTo預覽image 和video，你可以將其設置為['image', 'video']。要禁用所有文件類型的內容預覽并將其顯示previewIcon為縮略圖，請將其設置為null，empty或false。
24、allowedPreviewMimeTypes：除此之外allowedPreviewTypes，您還可以控制可以顯示哪些mime類型以供預覽。默認為null，表示支持所有mime類型。>注意：對于2.5.0版，您現在可以通過設置allowedFileTypes和控制允許上載哪些文件類型或擴展名allowedFileExtensions。
25、layoutTemplates：允許您在一個屬性中配置所有布局模板設置。可配置的布局的對象是：main1，main2， preview，caption，和modal。
26、previewTemplates：每種預覽類型的所有預覽模板都已合并為一個屬性，而不是圖像，文本等的單獨模板。鍵是設置的格式allowedPreviewTypes，值是用于預覽的模板。下面是每個預覽文件類型（默認預置的模板generic，image，text，html， video，audio，flash，object，和other）。該generic模板僅用于initialPreview使用直接標記顯示 內容。
27、previewSettings：允許您為每個預覽圖像類型配置寬度和高度。該插件具有默認的寬度和預定義的每個類型，即高度 image，text，html，video，audio，flash，和object。
28、fileTypeSettings：允許您使用回調配置和標識每個預覽文件類型。該插件具有預定義識別不同類型即默認回調 image，text，html，video，audio，flash，和object。
29、替換模板中的標簽已得到增強。使用此版本，它將自動檢查要在模板字符串中替換的每個標記的多次出現。
30、通過在任何其他事件中將輸出返回到中止上載，操作事件并輕松添加自己的自定義驗證消息。
31、支持多語言和區域設置。
好用的插件千千萬，當你正缺少這樣一個強大的文件上傳組件時，bootstrap-fileinput或許能幫到你，它雖然不是我用過最好的，但至少能符合很多場景下的需求了，特別適合對于文件上傳非常頻繁的時候來說，真的非常有用，希望能給你帶來幫助，當然您如果有更好的推薦，則感謝在評論區留言分享！
PS：筆者近期想深入的學習下Javascript,小伙伴們知道現在有什么書籍比較合適么，網絡上的系統化的較少，想要系統的深入學習下，感謝推薦的道友們！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
