(PHP)JTBC3.0添加点击筛选功能

本例子以新闻模块为例子
1.数据表添加字段
手动添加字段参考
`n_ptype` varchar(50) DEFAULT '0' COMMENT '{"fieldType":"radio","fieldRelatedFile":"sel_ptype"}',
`n_PSize` varchar(50) DEFAULT '0' COMMENT '{"fieldType":"radio","fieldRelatedFile":"sel_psize"}',
"fieldType":"radio"//单选
"fieldType":"checkbox"//多选
"fieldType":"select"//下拉框
2.添加字段对应的语言
/common/language/config.jtbc

    <item>
      <name><![CDATA[ptype]]></name>
      <zh-cn><![CDATA[按类型筛选]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[psize]]></name>
      <zh-cn><![CDATA[按尺寸筛选]]></zh-cn>
    </item>

3.修改模块前台代码
/case/common/incfiles/index.inc.php

  public static function moduleList()
  {


    $category = base::getNum(request::get('category'), 0);
    $ptype = base::getNum(request::get('ptype'), 0);//
    $psize = base::getNum(request::get('psize'), 0);//


    $variable['-category'] = $category;
    $variable['-page'] = $page;//
    $variable['-ptype'] = $ptype;//
    $variable['-psize'] = $psize;//


    $dal = new dal();
    if($ptype != 0) $dal -> ptype = $ptype;//
    if($psize != 0) $dal -> psize = $psize;//

4.列表模板添加对应筛选代码

       <form id="filterForm" name="form1" method="get" action="/{$>genre}/index.php">
          <input id="type" type="hidden" value="list" name="type" to="filter">
          <input id="category" type="hidden" value="{$-category}" name="category" to="filter">
          <input id="page" type="hidden" value="{$-page}" name="page" to="filter">
          <div id="list_fields">
          <ul>
          <li id="ptype" onclick="update_input();" style="display: inline-block;">
           <p>{$=take('global.config.ptype','lng')}</p>
             {$=xmlSelect('sel_ptype.*', '{$-ptype}', 'radio','ptype')}
           </li>
           <li></li>
           <li id='psize' onclick="update_input();" style="display: inline-block;">
           <p>{$=take('global.config.psize','lng')}</p>
           {$=xmlSelect('sel_psize.*', '{$-psize}', 'radio','psize')}
           </li>
           <li>
           <p onclick="reset_input();">重置</p>
           <p onclick="submitForm();">确定</p>
           </li>
           </ul>
          </div>
          <style>
          #list_fields input{display:none;}
          #list_fields label{padding:2px 5px;margin:5px 5px 0 0;}
          #list_fields label.active{font-weight:bold;background:#005f9b;color:#fff;}
          </style>
          <script>
            var list = document.getElementById('list_fields')
            var li = list.querySelectorAll('li');
            
            function submitForm(){
              var form = document.getElementById("filterForm");
              form.submit();
            }
            update_input();
            function update_input(){
                for(var i = 0; i <li.length; i++){
                  var label = li[i].getElementsByTagName("label");
                  for(var j = 0; j <label.length; j++){
                    var input = label[j].getElementsByTagName("input");
                    if(input[0].checked) label[j].className = "active";
                    else label[j].className = "";
                  }
                }
            }
            
            function reset_input(){
                for(var i = 0; i <li.length; i++){
                  var label = li[i].getElementsByTagName("label");
                  for(var j = 0; j <label.length; j++){
                    var input = label[j].getElementsByTagName("input");
                    input[0].checked = false;
                    if(input[0].value == 0){
                      input[0].checked = "checked";
                      label[j].className = "active";
                    }
                    else label[j].className = "";
                  }
                }
            }
          </script>
        </form>

说明
css部分可以根据实际情况自行修改
<style>
</style>

5.创建配套的语言文件
sel_ptype.jtbc和sel_psize.jtbc
上传位置/case/common/language/
sel_ptype.jtbc文件内容:

<?xml version="1.0" encoding="utf-8"?>
<xml mode="jtbc" author="jetiben">
  <configure>
    <node>item</node>
    <field>name,zh-cn</field>
    <base>item_list</base>
  </configure>
  <item_list>
    <item>
      <name><![CDATA[0]]></name>
      <zh-cn><![CDATA[不限]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[1]]></name>
      <zh-cn><![CDATA[端窗]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[2]]></name>
      <zh-cn><![CDATA[侧窗]]></zh-cn>
    </item>
  </item_list>
</xml>

sel_psize.jtbc文件内容:

<?xml version="1.0" encoding="utf-8"?>
<xml mode="jtbc" author="jetiben">
  <configure>
    <node>item</node>
    <field>name,zh-cn</field>
    <base>item_list</base>
  </configure>
  <item_list>
    <item>
      <name><![CDATA[0]]></name>
      <zh-cn><![CDATA[不限]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[1]]></name>
      <zh-cn><![CDATA[端窗]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[2]]></name>
      <zh-cn><![CDATA[侧窗]]></zh-cn>
    </item>
    <item>
      <name><![CDATA[3]]></name>
      <zh-cn><![CDATA[直径大于200mm]]></zh-cn>
    </item>
  </item_list>
</xml>

6.结束