# 【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。
~~~
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">
<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
<!--SWF在初始化的时候指定，在后面将展示-->
~~~
第三、图片上传
与普通文件上传相比，此demo演示了：文件过滤，图片预览，图片压缩上传等功能。
#### 代码介绍
> 1、Html
要实现如上demo，首先需要准备一个按钮，和一个用来存放添加的文件信息列表的容器。
~~~
<!--dom结构部分-->
<div id="uploader-demo">
<!--用来存放item-->
<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>
~~~
备注：编辑器插件很简单，就上面的代码即可
- Layer无刷新不跳转弹框提示信息
- 整合ThinkPHP+实用代码
- TP整合Layer插件实现无刷新
- 自定义助手函数
- 添加信息失败后不跳转
- 三种无限级分类
- TP常用代码
- 自定义公共函数
- TP模型管理专题
- TP模型管理之添加模型
- sfox_newmodel.sql
- TP模型管理之删除模型
- TP模型管理之编辑模型
- TP模型管理之字段添加
- sfox_newmodel.sql_edit
- layer_hplus.js_edit
- TP模型管理之字段删除
- TP模型管理之字段编辑
- TP模型管理之预览模型
- TP模型管理之公共函数
- layer_hplus.js_修订一
- TP模型管理之预览模型静态页
- 后台内容管理系统
- 分类树显示
- 内容列表显示
- 信息发布
- 编辑信息
- layer_hplus.js
- myJs第一版
- myJs第二版
- myJs第三版
- myJs第四版
- TP5插件用法
- Datatables
- WebUploader
- bootstrap-fileinput
- UEditor
- 简单调用
- 路径问题
- 跨域多图上传
- 跨域单图上传
- UEditor图片跨域上传解决方案
- 定制工具栏图标
- ajaxFileUpload
- LayUI
- 图片上传
- layui分页
- 搜索页
- 搜索优化及删除
- Uploadify
- TP5前端应用
- 静态首页
- 前台首页功能实现
- 自定义标签库
- 前台模板继承应用
- 首页自定义标签改进
- 文章内容页
- 自定义标签改进
- 自定义标签修正
- 图片等比例自动缩放
- 后台权限管理
- 角色管理
- 规则管理
- 权限设置
- 会员管理
- 权限管理
- 前台登录注册功能
- 注册登录
- 阿里大于手机注册
- 阿里大于升级阿里云短信服务
- 自动登录完成
- PHP异位或加密实现自动登陆
- 微信开发
- 分享接口
- 静态页面实现微信分享
- 动态页微信分享
- 页面静态化
- 1-全站静态化前期配置
- 2-链接地址静态化
- TP5常用片段代码
- 加载静态资源路径与常量
- thinkphp5预定义常量
- 删除某文件夹的内容
- 解压插件包
- 异步提交插件
- 其他功能
- 背景音乐
- 手机访问PC网站自动跳转到手机网站代码
- 手机微信音乐MP3播放器
- 后盾之网页背景音乐
- 播放器宽度自适应
- 前台首页数据调用
- 视频列表
- 搜索分页
- H5解决苹果（IOS）不能自动播放音乐
- 清空缓存
- 文件处理常识
- 删除路径下的所有文件夹和文件
- 一键清空缓存
- 评论留言
- 格式化时间
- 替换微博内容的URL地址@用户与表情
- PHP正则理解
- jQuery评论插件
- TP空操作
- TP路由
- 跨域访问
- 设置请其头允许跨域请求
- 模板前台判断手机访问跳转手机网址代码
- PHP遍历一个文件夹下所有文件和子文件夹
- PHP获取视频的第一帧与时长
- TP5数据库
- 链式操作原理
- update替换字段部分内容
- 后台开发
- 后台登录页居中显示
- TP5自带验证码
- JS & JQuery专题
- 二级城市联动菜单
- 模板引擎
- 混合模板编译
- 黄永成TP微博开发
- 消息推送
- memcache安装
- 插件开发
- 插件介绍
- 插件钩子
- 浅谈初步理解钩子
- 插件钩子(hooks)分析
- 插件钩子简单理解
- 控制器调用插件
- 钩子通用处理函数
- 插件基类代码
- 插件测试代码
- 浅谈钩子与插件
- 技术综合
- 常用代码
- PHP
- 56个PHP开发常用代码片段（上）
- 56个PHP 开发常用代码片段（中）
- 56个PHP 开发常用代码片段（下）
- sublime text安装自动补全注释的插件
- 影音视频开发
- 视频
- H5视频直播扫盲
- 音乐
- 语音
- PHP实现语音播报功能
- MUI
- 窗体操作