(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.结束。