(PHP)JTBC3.0模块添加自定义图文参数功能

1.添加新字段类型texts模板

打开/console/common/template/console.jtbc

添加节点fieldformat-texts

代码如下:

    <item>
      <name><![CDATA[fieldformat-imgtxt]]></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="标题"/>
             <div mode="upFile" class="upfile">
               <input type="hidden" name="{$fieldname}_value_1_source" class="upsource" value="" />
               <input type="text" name="{$fieldname}_value_1" class="i1 fileurl" style="margin-right: 70px;" value="" text-preview-title="{$=take('::console.att-preview-title', 'lng')}" text-preview-link="{$=take('::console.att-preview-link', 'lng')}" />
               <div class="upbtn"><button class="b4 upbtn" text="{$=take('global.config.upload', 'lng')}" uploading="{$=take('::console.uploading', 'lng')}">{$=take('global.config.upload', 'lng')}</button><span class="bar"></span><input type="file" class="upfiles hide" text-ok="{$=take('::console.iknow', 'lng')}" action="?type=action&amp;action=upload&amp;limit={$fieldname}_li_1" /></div>
               <textarea name="{$fieldname}_infos_1" class="t1" placeholder="内容"></textarea>
             </div>
        <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];
          var liary = {};
          liary['fileurl'] = lival[2];
          liary['uploadid'] = 0;
          {$fieldname}_con +='<li id="{$fieldname}_li_'+lival[0]+'"><input type="text" name="{$fieldname}_name_'+lival[0]+'" class="i1" value="'+lival[1]+'" placeholder="标题"/><div mode="upFile" class="upfile"><input type="hidden" name="{$fieldname}_value_'+lival[0]+'_source" class="upsource" value=\''+JSON.stringify(liary)+'\' /><input type="text" name="{$fieldname}_value_'+lival[0]+'" class="i1 fileurl" style="margin-right: 70px;" value="'+lival[2]+'" text-preview-title="{$=take('::console.att-preview-title', 'lng')}" text-preview-link="{$=take('::console.att-preview-link', 'lng')}" /> <div class="upbtn"><button class="b4 upbtn" text="{$=take('global.config.upload', 'lng')}" uploading="{$=take('::console.uploading', 'lng')}">{$=take('global.config.upload', 'lng')}</button><span class="bar"></span><input type="file" class="upfiles hide" text-ok="{$=take('::console.iknow', 'lng')}" action="?type=action&amp;action=upload&amp;limit={$fieldname}_value_'+lival[0]+'" /></div><textarea name="{$fieldname}_infos_'+lival[0]+'" class="t1" placeholder="内容">'+lival[3]+'</textarea></div><icons><icon class="delete" onclick="del_{$fieldname}(\'{$fieldname}_li_'+lival[0]+'\')"></icon></icons></li>';
      }
      {$fieldname}_ul.innerHTML = '';
      {$fieldname}_ul.innerHTML = {$fieldname}_con;
      jtbc.console.bindEventsByMode($({$fieldname}_ul));//这句可以删除.
  }
  {$fieldname}_ul.lastElementChild.getElementsByTagName('input')[0].oninput = function(){
      update_{$fieldname}();
  }
  {$fieldname}_ul.lastElementChild.getElementsByTagName('input')[2].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')[2].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="标题"/><div mode="upFile" class="upfile"><input type="hidden" name="'+fieldname+'_value_'+newnum+'_source" class="upsource" value="" /><input type="text" name="'+fieldname+'_value_'+newnum+'" class="i1 fileurl" style="margin-right: 70px;" value="" text-preview-title="{$=take('::console.att-preview-title', 'lng')}" text-preview-link="{$=take('::console.att-preview-link', 'lng')}" /><div class="upbtn"><button class="b4 upbtn" text="{$=take('global.config.upload', 'lng')}" uploading="{$=take('::console.uploading', 'lng')}">{$=take('global.config.upload', 'lng')}</button><span class="bar"></span><input type="file" class="upfiles hide" text-ok="{$=take('::console.iknow', 'lng')}" action="?type=action&amp;action=upload&amp;limit='+fieldname+'_value_'+newnum+'" /></div><textarea name="'+fieldname+'_infos_'+newnum+'" id="'+fieldname+'_infos_'+newnum+'" class="t1" placeholder="内容"></textarea></div><icons><icon class="delete" onclick="del_'+fieldname+'(\''+fieldname+'_li_'+newnum+'\')"></icon></icons>';
       fobj.appendChild(li);
       jtbc.console.bindEventsByMode($({$fieldname}_ul));
  }
  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')[2].value,lis[i].getElementByID('{$fieldname}_infos_'+i).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}', $info[1], $loopLineString);
          $loopLineString = str_replace('{$img}', base::htmlEncode($info[2]), $loopLineString);
          $loopLineString = str_replace('{$info}', base::htmlEncode($info[3]), $loopLineString);
          $tpl -> insertLoopLine($loopLineString);
        }
        $tmpstr = $tpl -> getTpl();
        $tmpstr = tpl::parse($tmpstr);
      }
      return $tmpstr;
    }

3.添加前台格式化输出对应的模板
后台》模板配置》调用模板
添加节点
imgtxt
内容

<ul>
{@}
<li id="li_{$id}"><span>{$title}:</span><span><img src="{img}" /></span><span>{$info}</span></li>
{@}
</ul>

4.使用方法

4.1添加字段时,注释中填写
{"fieldType":"imgtxt"}
后台即可使用本功能.

字段类型建议text
可以支持多参数,避免被截短,造成错误

支持同模块中添加多个字段

3中的前台模板,可以自己修改,其中{@}中的为参数输出内容模板,支持四个参数{$id},{$title},{$img},{$info},在2中的函数里有代码可以参考。

4.2前台模板调用
<div class="text">{$=getInfos(#infos,'imgtxt')}</div>
其中#infos为调用的字段数据 infos为测试时创建的字段名
imgtxt为调用模板中的节点名

这里可以自行创建调用模板节点，进行替换，以适应多种模板展示需求。

5.结束。