TP模型管理之預覽模型 · TP5常用代碼

# 【TP5·預覽模型·思路分析】 [TOC] ## 知識點 > 1、制作靜態模型預覽模板（整合WebUploader、UEditor） 2、整合多圖片上傳插件WebUploader 3、整合編輯器（百度編輯器UEditor 1.4.3.3版本） 4、自動生成模型預覽頁面（根據模型字段自動生成） 5、定界符（<<<EOF ... EOF(必須頂格寫);） 6、選項（box）字段預覽思路理解 7、條件判斷（兩種方法）一是if....else...（條件三種以內）；二是switch...case...（多條件） 8、回車鍵（\n）注意回車鍵必須在雙引號之間才有用（"\n"） 9、循環中不顯示某部分內容{volist name="forminfos" id="vo" key="k"}...{/volist}默認key為i ## 問題 > 1、異步刪除不能正常使用（已解決：contentType:"application/x-www-form-urlencoded", ） 2、文本編輯器顯示不出來（已解決：定義一個插件路徑） ## 備注：$.ajax 中的contentType和dataType 參考網頁：https://www.cnblogs.com/htoooth/p/7242217.html contentType 主要設置你發送給服務器的格式 dataType 設置你收到服務器數據的格式在 jquery 的 ajax 中， contentType都是默認的值：application/x-www-form-urlencoded 這種格式的特點就是，name/value 成為一組，每組之間用 & 聯接，而 name與value 則是使用 = 連接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 這是get 而 post 請求則是使用請求體，參數不在 url 中，在請求體中的參數表現形式也是: key=fdsa&lang=zh的形式。 ## 【循環中不顯示某部分內容】 > 1、控制器獲取記錄總條數 $info為當前模型字段總條數 $this->assign('total_num',count($info)); > 2、模板中判斷：當total_num不等于總條數，則輸出虛線 ~~~ {volist name="forminfos" id="vo" key="k"} <div class="form-group" {eq name='vo.formtype' value='datetime'}id="data_1"{/eq}> <label class="col-sm-2 control-label">{$vo.name}</label> <div class="col-sm-10"> {$vo.form} </div> </div> {neq name="total_num" value="$k"}<div class="hr-line-dashed"></div>{/neq} {/volist} ~~~ ## 【自動生成模型預覽頁面】 ### 思路 > a、獲取模型的字段 b、獲取字段的類型 c、給類型寫成函數（函數生成相應的模板） d、顯示在模板中去 ### 1、控制器代碼 ~~~ //獲取當前模型字段$id為模型ID $modelsFieldArray = Db::name('models_field')->where('modelid',$id)->order('sort')->select(); //預覽模型 foreach ($modelsFieldArray as $value) { //字段名 $field = $value['field']; //字段類型 $func = $value['formtype']; //判斷函數是否存在$func為變量函數 //函數位置：當前模塊下面的common.php文件 if(function_exists($func)){ //獲取表單HTML代碼 $form = $func($value); if($form != ''){ $info[$field] = array( 'name' => $value['name'], 'form' => $form, 'formtype' => $value['formtype'] ); } } } $this->assign('forminfos',$info); ~~~ ### 2、公共函數 ~~~ 函數文件位置：application/admin/common.php function text($fieldinfo){ //字段名 $field = $fieldinfo['field']; //反序列化設置項 $setting = unserialize($fieldinfo['setting']); //默認值 $value = $setting['defaultvalue']; //是否密碼框 $type = "text"; if( $setting['ispassword'] ) { $type = "password"; } $form = <<<EOF <input id="info_$field" name="info[$field]" type="$type" class="form-control" value="$value"> EOF; return $form; } ~~~ 其它字段（變量函數，單獨新建文件，見：TP模型管理之公共函數） ### 3、模板代碼 ~~~ {volist name="forminfos" id="vo"} <div class="form-group"> <label class="col-sm-2 control-label">{$vo.name}</label> <div class="col-sm-10"> {$vo.form} </div> </div> <div class="hr-line-dashed"></div> {/volist} ~~~ ## 是否密碼框 ~~~ $type = "text"; if( $setting['ispassword'] ) { $type = "password"; } <input type="$type" class="form-control" name="$field" value="$value"> ~~~ ## TP5整合相關插件 ### 整合多圖片上傳插件WebUploader #### 插件簡介 WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。采用大文件分片并發上傳，極大的提高了文件上傳效率。官網：http://fex.baidu.com/webuploader/ #### 快速入門第一、插件位置：WWW\tp5\public\static\admin\plugins\webuploader-0.1.5 第二、引入資源：使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。 ~~~  <link rel="stylesheet" type="text/css" href="webuploader文件夾/webuploader.css">  <script type="text/javascript" src="webuploader文件夾/webuploader.js"></script>  ~~~ 第三、圖片上傳與普通文件上傳相比，此demo演示了：文件過濾，圖片預覽，圖片壓縮上傳等功能。 #### 代碼介紹 > 1、Html 要實現如上demo，首先需要準備一個按鈕，和一個用來存放添加的文件信息列表的容器。 ~~~  <div id="uploader-demo">  <div id="fileList" class="uploader-list"></div> <div id="filePicker">選擇圖片</div> </div> ~~~ > 2、Javascript（創建Web Uploader實例） ~~~ // 初始化Web Uploader var uploader = WebUploader.create({ // 選完文件后，是否自動上傳。 auto: true, // swf文件路徑 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服務端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 選擇文件的按鈕。可選。 // 內部根據當前運行是創建，可能是input元素，也可能是flash. pick: '#filePicker', // 只允許選擇圖片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); ~~~ > 3、初始化代碼修改 > 在BootStrap的tab組件中加入webuploader，如果不是默認頁會出現點擊無法彈出打開對話框，解決方法即將初始化代碼放在單獨的函數中調用 ~~~ $('a[data-toggle="tab"]').on('shown.bs.tab',function(e){ var target = e.target.toString(); if(target.indexOf('tab-4')>0){ initWebUploader(); } }); ~~~ #### 知識點：Bootstrap 標簽頁（Tab）插件參考網址：http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html 標簽頁（Tab）在 Bootstrap 導航元素一章中介紹過。通過結合一些 data 屬性，您可以輕松地創建一個標簽頁界面。通過這個插件您可以把內容放置在標簽頁或者是膠囊式標簽頁甚至是下拉菜單標簽頁中。如果您想要單獨引用該插件的功能，那么您需要引用 tab.js。或者，正如 Bootstrap 插件概覽一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。 > 用法您可以通過以下兩種方式啟用標簽頁：通過 data 屬性：您需要添加 data-toggle="tab" 或 data-toggle="pill" 到錨文本鏈接中。添加 nav 和 nav-tabs 類到 ul 中，將會應用 Bootstrap 標簽樣式，添加 nav 和 nav-pills 類到 ul 中，將會應用 Bootstrap 膠囊式樣式。 > 事件下表列出了標簽頁（Tab）插件中要用到的事件。這些事件可在函數中當鉤子使用。事件一：show.bs.tab 該事件在標簽頁顯示時觸發，但是必須在新標簽頁被顯示之前。分別使用 event.target 和 event.relatedTarget 來定位到激活的標簽頁和前一個激活的標簽頁。 ~~~ $('a[data-toggle="tab"]').on('show.bs.tab', function (e) { e.target // 激活的標簽頁 e.relatedTarget // 前一個激活的標簽頁 }) ~~~ #### webuploader 第二種樣式或將照片拖到這里，單次最多可選300張參考網址：http://fex.baidu.com/webuploader/demo.html > 1、引入文件 ~~~ <link href="__ADMIN__/plugins/webuploader-0.1.5/xb-webuploader.css" rel="stylesheet"> <script type="text/javascript"> var BASE_URL = "__ADMIN__/plugins/webuploader-0.1.5"; </script> <script src="__ADMIN__/js/uploader.js"></script> <script src="__ADMIN__/plugins/webuploader-0.1.5/webuploader.js"></script> ~~~ > 2、html代碼 ~~~ <div id="uploader" class="xb-uploader"> <div class="queueList"> <div class="placeholder"> <div class="filePicker"></div> <p>或將照片拖到這里，單次最多可選300張</p> </div> </div> <div class="statusBar" style="display:none;"> <div class="progress"> <span class="text">0%</span> <span class="percentage"></span> </div> <div class="info"></div> <div class="btns"> <div class="webuploader-container filePicker2"> <div class="webuploader-pick">繼續添加</div> <div style="position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; overflow: hidden;" id="rt_rt_1armv2159g1o1i9c2a313hadij6"> </div> </div> <div class="uploadBtn">開始上傳</div> </div> </div> </div> ~~~ > 3、js代碼這里只張貼關鍵代碼，JS初始化（實例化） ~~~ // 實例化 uploader = WebUploader.create({ pick: { id: "#uploader .filePicker", label: '點擊選擇文件', multiple : true }, dnd: "#uploader .queueList", paste: document.body, // accept: { // title: 'Images', // extensions: 'gif,jpg,jpeg,bmp,png', // mimeTypes: 'image/*' // }, // swf文件路徑 swf: BASE_URL + '/Uploader.swf', disableGlobalDnd: true, chunked: true, server: "ajax_upload", fileNumLimit: 300, fileSizeLimit: 200 * 1024 * 1024, // 200 M fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M }); ~~~ ### 整合編輯器（百度編輯器UEditor 1.4.3.3版本） #### 官方網站： http://fex.baidu.com/ueditor/ #### 思路分析 ~~~  <script id="container" name="content" type="text/plain"> 這里寫你的初始化內容 </script>  <script type="text/javascript" src="ueditor.config.js"></script>  <script type="text/javascript" src="ueditor.all.js"></script>  <script type="text/javascript"> var ue = UE.getEditor('container'); </script> ~~~ #### 代碼實現 > 1、html代碼 ~~~ <div class="form-group"> <label class="col-sm-2 control-label">編輯器</label> <div class="col-sm-10"> <script id="container" name="content" type="text/plain">雪狐網</script> <script src="__ADMIN__/plugins/ueditor1_4_3_3/ueditor.config.js"></script> <script src="__ADMIN__/plugins/ueditor1_4_3_3/ueditor.all.js"></script> <script> var um = UE.getEditor('container',{ initialFrameHeight:300, autoHeightEnabled:false, catchRemoteImageEnable:true }); </script> </div> </div> ~~~ 備注：編輯器插件很簡單，就上面的代碼即可