亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

本文根據(jù)官方群中網(wǎng)友上傳的二次開發(fā)文件整理資料所得，上傳人為紫雨。

本文僅為提供一下修改方法和調(diào)用測(cè)試。方便大家使用。

此功能一共修改了兩處文件：

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語句結(jié)束后添加如下代碼，這里主要是為新增文章的時(shí)候添加多圖上傳自定義字段：

			                	 {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="請(qǐng)上傳輪播多圖"  class="layui-input">
			                     </div>
			                     <button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
								 	 <i class="layui-icon">&#xe67c;</i>上傳多圖
								 </button>
								 <div id="pics_[value->name]_box" class="pic addedit"><dl></dl> <!-- 規(guī)避空內(nèi)容拖動(dòng)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語句結(jié)束后添加如下代碼，這里主要是為修改文章的時(shí)候添加多圖上傳自定義字段：

			                	 {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="請(qǐng)上傳輪播多圖"  class="layui-input">
			                     </div>
			                     <button type="button" class="layui-btn uploads" data-des="pics_[value->name]">
								 	 <i class="layui-icon">&#xe67c;</i>上傳多圖
								 </button>
								 <div id="pics_[value->name]_box" class="pic addedit">
								 	 <dl></dl> <!-- 規(guī)避空內(nèi)容拖動(dòng)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多行的位置，增加一個(gè)TYPE為10的多圖擴(kuò)展：

{if($value->type==10)}多圖上傳{/if}

2：第100行左右字段類型中添加多圖上傳的類型

<option value="10">多圖上傳</option>

3：第190行左右添加

<option value="10" {if([$extfield->type]==10)}selected{/if}>多圖上傳</option>

至此，修改結(jié)束。可以后臺(tái)測(cè)試并添加多圖。

但是現(xiàn)在問題來了。后臺(tái)我們雖然添加了，數(shù)據(jù)也有了。但是PB并沒有對(duì)擴(kuò)展字段進(jìn)行多字符串的解析。那么在前臺(tái)要如何才能調(diào)用呢。在數(shù)據(jù)庫中我們可以看到，他的格式為：

/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}

但是由于新加的是擴(kuò)展字段，所以這個(gè)代碼已經(jīng)不適用了。

但是既然是字符串，我們就可以用JS進(jìn)行拆解。

 <script language="javascript"> 
str="{content:ext_newpics}"; //這是一字符串 
var strs= new Array(); //定義一數(shù)組 
strs=str.split(","); //字符分割 
for (i=0;i<strs.length ;i++ ) 
{ 
document.write('<img src='+strs[i]+'>'); //分割后的字符輸出 
} 
</script>

同樣，我們可以用這個(gè)方法來實(shí)現(xiàn)多圖加標(biāo)題。

 <script language="javascript"> 
str="{content:pics}"; //這是一字符串 
str2="{content:ext_newpics}"; //這是一字符串 
var strs= new Array(); //定義一數(shù)組 
var strs2= new Array(); //定義一數(shù)組 
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>