来源： 本站版本： (PHP)JTBC3.0
1.添加新字段类型texts模板
打开/console/common/template/console.JTBC
添加节点fieldformat-texts
代码如下:
<item>
<name><![CDATA[fieldformat-texts]]></name>
<default><![CDATA[
<tr>
<th valign="top"><t>{$=getSwapString($take('config.{$fieldname}', 'lng'), $take('global.config.{$fieldname}', 'lng'))}{$-required}</t></th>
<td><div class="att">
<h6>{$=getSwapString($take('config.{$fieldname}', 'lng'), $take('global.config.{$fieldname}', 'lng'))}{$-required}列表<input type="hidden" id="{$fieldname}" name="{$fieldname}" value="{${$fieldname}}"></h6>
<ul id="{$fieldname}_list">
<li id='{$fieldname}_li_1'>
<input type="text" name="{$fieldname}_name_1" class="i1" value="" placeholder="标题"/><input type="text" name="{$fieldname}_value_1" class="i1" value="" placeholder="内容"/><icons><icon class="delete" onclick="del_{$fieldname}('{$fieldname}_li_1')"></icon></icons>
</li>
</ul>
<br/>
<button class="b2" onclick="add_{$fieldname}();">增加</button>
<button class="b2" onclick="update_{$fieldname}();">更新</button>
</div>
<style>
#{$fieldname}_list li{margin-bottom:5px;}
#{$fieldname}_list li input{margin-right:25px;}
#{$fieldname}_list li input:first-child{width:120px;}
</style>
<script>
var {$fieldname}_ul = document.getElementById("{$fieldname}_list");
var {$fieldname}_val = document.getElementById("{$fieldname}").value;
if({$fieldname}_val != ''){
var {$fieldname}_ary = JSON.parse({$fieldname}_val);
var {$fieldname}_con = '';
for(var i in {$fieldname}_ary){
var lival = {$fieldname}_ary[i];
{$fieldname}_con +='<li id="{$fieldname}_li_'+lival[0]+'"><input type="text" name="{$fieldname}_name_'+lival[0]+'" class="i1" value="'+lival[1]+'" placeholder="标题"/><input type="text" name="{$fieldname}_value_'+lival[0]+'" class="i1" value="'+lival[2]+'" placeholder="内容"/><icons><icon class="delete" onclick="del_{$fieldname}(\'{$fieldname}_li_'+lival[0]+'\')"></icon></icons></li>';
}
{$fieldname}_ul.innerHTML = '';
{$fieldname}_ul.innerHTML = {$fieldname}_con;
}
{$fieldname}_ul.lastElementChild.getElementsByTagName('input')[0].oninput = function(){
update_{$fieldname}();
}
{$fieldname}_ul.lastElementChild.getElementsByTagName('input')[1].oninput = function(){
update_{$fieldname}();
}
function add_{$fieldname}(){
var lastli = {$fieldname}_ul.lastElementChild;
if(lastli){
var lastid = lastli.getAttribute("id");
lastnum = lastid.replace(/{$fieldname}_li_/g, "");
}
if(lastid) var newnum = Number(lastnum) + 1;
else var newnum = 1;
add_li_{$fieldname}({$fieldname}_ul,newnum,'{$fieldname}');
update_{$fieldname}();
{$fieldname}_ul.lastElementChild.getElementsByTagName('input')[0].oninput = function(){
update_{$fieldname}();
}
{$fieldname}_ul.lastElementChild.getElementsByTagName('input')[1].oninput = function(){
update_{$fieldname}();
}
}
function del_{$fieldname}(deid){
var deli = document.getElementById(deid);
deli.parentNode.removeChild(deli);
update_{$fieldname}();
}
function add_li_{$fieldname}(fobj,newnum,fieldname){
var li = document.createElement("li");
li.setAttribute("id",fieldname+"_li_"+newnum);
li.innerHTML='<input type="text" name="'+fieldname+'_name_'+newnum+'" class="i1" value="" placeholder="标题"/><input type="text" name="'+fieldname+'_value_'+newnum+'" class="i1" value="" placeholder="内容"/><icons><icon class="delete" onclick="del_'+fieldname+'(\''+fieldname+'_li_'+newnum+'\')"></icon></icons>';
fobj.appendChild(li);
}
function update_{$fieldname}(){
var lis = {$fieldname}_ul.getElementsByTagName('li');
var res = {};
for(var i = 0;i < lis.length;i++){
res[i] =Array(lis[i].getAttribute("id").replace(/{$fieldname}_li_/g, ""),lis[i].getElementsByTagName('input')[0].value,lis[i].getElementsByTagName('input')[1].value);
}
document.getElementById("{$fieldname}").value = JSON.stringify(res);
}
</script>
</td>
</tr>
]]></default>
</item>
2.添加前台格式化输出函数
打开/common/incfiles/lib/jtbc/page.inc.php
添加函数
public static function getInfos($ary,$tpl)
{
$arys = json_decode($ary,true);
if (is_array($arys))
{
$tmpstr = tpl::take('global.transfer.'.$tpl, 'tpl');
$tpl = new tpl($tmpstr);
$loopString = $tpl -> getLoopString('{@}');
foreach ($arys as $info)
{
$loopLineString = $loopString;
$loopLineString = str_replace('{$id}', base::htmlEncode($info[0]), $loopLineString);
$loopLineString = str_replace('{$title}', base::htmlEncode($info[1]), $loopLineString);
$loopLineString = str_replace('{$info}', base::htmlEncode($info[2]), $loopLineString);
$tpl -> insertLoopLine($loopLineString);
}
$tmpstr = $tpl -> getTpl();
$tmpstr = tpl::parse($tmpstr);
}
return $tmpstr;
}
3.添加前台格式化输出对应的模板
后台》模板配置》调用模板
添加节点
texts
内容
<ul>
{@}
<li id="li_{$id}"><span>{$title}:</span><span>{$info}</span></li>
{@}
</ul>
4.使用方法
4.1添加字段时,注释中填写
{"fieldType":"texts"}
后台即可使用本功能.
字段类型建议text
可以支持多参数,避免被截短,造成错误
支持同模块中添加多个字段
3中的前台模板,可以自己修改,其中{@}中的为参数输出内容模板,支持三个参数{$id},{$title},{$info},在2中的函数里有代码可以参考。
4.2前台模板调用
<div class="text">{$=getInfos(#infos,'texts')}</div>
其中#infos为调用的字段数据 infos为测试时创建的字段名
texts为调用模板中的节点名
这里可以自行创建调用模板节点，进行替换，以适应多种模板展示需求。
5.结束。
技术支持QQ：925474725