PBOOTCMS自定义多图细解,添加多图标题效果
时间：2020-01-12 来源：本站
本文根据官方群中网友上传的二次开发文件整理资料所得，上传人为紫雨。
本文仅为提供一下修改方法和调用测试。方便大家使用。
此功能一共修改了两处文件：
apps/admin/view/default/contentcontent.html apps/admin/view/default/contentextfield.html
修改：content.html
1：引入JS：<script type="text/javascript" src="{APP_THEME_DIR}/js/jquery.dragsort-0.5.2.min.js"></script>
2：在大概280行左右，下拉的IF语句结束后添加如下代码，这里主要是为新增文章的时候添加多图上传自定义字段：
{if($value->type==10)}<!-- 多图 -->
<div class="layui-form-item">
<label class="layui-form-label">多图</label>
<div class="layui-input-inline">
<input type="text" name="[value->name]" id="pics_[value->name]" placeholder="请上传轮播多图" class="layui-input">
</div>
<button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
<i class="layui-icon"></i>上传多图
</button>
<div id="pics_[value->name]_box" class="pic addedit"><dl></dl> <!-- 规避空内容拖动bug --></div>
</div>
<script type="text/javascript">
$("#pics_[value->name]_box").dragsort({
dragSelector: "dl",
dragBetween: false,
dragEnd: saveOrder_[value->name],
placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});
function saveOrder_[value->name]() {
var data = $("#pics_[value->name]_box dl dt img").map(function() {
return $(this).data("url");
}).get();
$("input[name=[value->name]]").val(data.join(","))
};
</script>
{/if}
3： 在大概280行左右，下拉的IF语句结束后添加如下代码，这里主要是为修改文章的时候添加多图上传自定义字段：
{if($value->type==10)}<!-- 多图 -->
<div class="layui-form-item">
<label class="layui-form-label">[value->description]</label>
<div class="layui-input-inline">
<input type="text" name="[value->name]" id="pics_[value->name]" value="{$content->{$value->name}}" placeholder="请上传轮播多图" class="layui-input">
</div>
<button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
<i class="layui-icon"></i>上传多图
</button>
<div id="pics_[value->name]_box" class="pic addedit">
<dl></dl> <!-- 规避空内容拖动bug -->
{php}$name=$value->name; {/php}
{php}
if([$content]->$name){
$pics=explode(',',[$content]->$name);
}else{
$pics = array();
}
foreach ($pics as $value) {
echo "<dl><dt><img src='".SITE_DIR.$value."' data-url='".$value."'></dt><dd>删除</dd></dl></dl>";
}
{/php}
</div>
</div>
<script type="text/javascript">
$("#pics_{php}echo $name;{/php}_box").dragsort({
dragSelector: "dl",
dragBetween: false,
dragEnd: saveOrder_{php}echo $name;{/php},
placeHolderTemplate: "<dl class='placeHolder'><dt></dt></dl>"
});
function saveOrder_{php}echo $name;{/php}() {
var data = $("#pics_{php}echo $name;{/php}_box dl dt img").map(function() {
return $(this).data("url");
}).get();
$("input[name={php}echo $name;{/php}]").val(data.join(","))
};
</script>
{/if}然后修改：extfield.html
1：大概40多行的位置，增加一个TYPE为10的多图扩展：
{if($value->type==10)}多图上传{/if}2：第100行左右字段类型中添加多图上传的类型
<option value="10">多图上传</option>
3：第190行左右添加
<option value="10" {if([$extfield->type]==10)}selected{/if}>多图上传</option>至此，修改结束。可以后台测试并添加多图。
但是现在问题来了。后台我们虽然添加了，数据也有了。但是PB并没有对扩展字段进行多字符串的解析。那么在前台要如何才能调用呢。在数据库中我们可以看到，他的格式为：
/static/upload/image/20200112/1578774353308471.png,/static/upload/image/20200112/1578774354491186.png,/static/upload/image/20200112/1578774354992829.png,/static/upload/image/20200112/1578774354615149.png,/static/upload/image/20200112/1578774354674052.png
这样的字符串。
PB本身解析多图的是：
{pboot:pics num=3 id={content:id}}
<img src='[pics:src]'>
{/pboot:pics}但是由于新加的是扩展字段，所以这个代码已经不适用了。
但是既然是字符串，我们就可以用JS进行拆解。
<script language="javascript">
str="{content:ext_newpics}"; //这是一字符串
var strs= new Array(); //定义一数组
strs=str.split(","); //字符分割
for (i=0;i<strs.length ;i++ )
{
document.write('<img src='+strs[i]+'>'); //分割后的字符输出
}
</script>同样，我们可以用这个方法来实现多图加标题。
<script language="javascript">
str="{content:pics}"; //这是一字符串
str2="{content:ext_newpics}"; //这是一字符串
var strs= new Array(); //定义一数组
var strs2= new Array(); //定义一数组
strs=str.split(","); //字符分割
strs2=str2.split(","); //字符分割
for (i=0;i<strs.length ;i++ )
{
document.write('<div class="myimg"><img src='+strs[i]+' >'+'<br/>'+strs2[i]+'</div>' ); //分割后的字符输出
}
</script>
<style type="text/css">
.content{display: inline-block;}
.myimg{width:200px; float:left; height:250px; margin-right:10px; display: block;}
.myimg img{width:100%; height: 200px;}
</style>
