自定义筛选应用

一、引言

ICMS V8 是一款功能强大的内容管理系统，它提供了丰富的自定义选项，让用户能够根据自己的需求来筛选应用。本文档将详细介绍如何在 ICMS V8 中自定义筛选应用。

二、添加应用

  1. 登录 ICMS V8 后台管理界面。
  2. 在左侧菜单栏中，找到“系统” >> “应用管理” >> “添加应用” 菜单，点击进入。

基本信息

根据您的实际情况填写即可

应该类型选“自定义应用”，其它都默认。

菜单配置、路由配置、基础字段

默认，不需要更改

字段编辑器

属性组件

添加需要参考筛选的字段，在右侧选择 “属性(下拉列表)”“属性(多选列表)”“属性(单选框)”“属性(复选框)” 拖拉到编辑器相关位置

20240701172154.jpg

添加完成后 点击字段的右侧编辑按钮，编辑该字段的相关信息。

可添加多个字段

20240701172441.jpg

字段填加完成后，点提交完成应用添加操作

添加属性

在左侧菜单栏中，找到“辅助” >> “属性” >> “添加属性” 菜单，点击进入。

所属应用：选择刚才添加的应用

标题：填写前端显示的分组标题，填入字段名称或者您想要分组名称即可

属性字段：选需要添加数据的字段

属性数据

字段需要参与筛选的数据

每行一个

数据格式

名称:值
名称: 属性值将按序号填充
名称 属性值将用名称填充

1.名称:值

名称：前端筛选时显示的文字

值：筛选选中后的值,任意字符串

例：户型数据

别墅:bs
一居室:1s
二居室:2s

它们的值为 别墅=bs，一居室=1s，二居室=2s 等等

年代

更早之前:1999
2000以前:2000
2001:2001

2.名称:

属性值将按序号填充

例：语言

其它:
英语:
法语:
中文:

它们的值为 其它=0，英语=1，法语=2，中文=3

3.名称

属性值将用名称填充

例：地区

北京
上海
重庆

它们的值为 北京=北京，上海=上海，重庆=重庆

添加完成后，在筛选应用里就可以选择这些选项了

普通组件

添加基础组件单选框、多选框、下拉列表、多选列表

20240712095830.jpg

数据选项

添加完字段后，点击字段编辑按钮，进行选项数据添加

20240712101027.jpg

如果选项值不是数字，请将字段类型改为 字符串(VARCHAR)

目前选项数据格式，支持两级

格式：

一级选项(二级选项1,二级选项2,二级选项3,二级选项4)

一级选项=选项值(二级选项1,二级选项2,二级选项3,二级选项4)

示例

面积=mj(50-80㎡,80-100㎡,100-130㎡,130㎡及以上,50㎡及以下);
场景=cj(家装,办公,店装,商超,餐饮,教育,民宿,娱乐,其他公装);
房型=hx(普通住宅,别墅,复式,大平层,loft,跃层);

20240712183735.jpg

三、添加筛选内容

在左侧菜单栏中，找到“内容” >> “您添加应用时填写的名称” >> “添加？？” 菜单，点击进入。

20240712123828.jpg

四、前端调用

自定义应用的栏目首页、列表默认模板为 content.group.htm

内容模板为 content.htm

属性组件调用

分组调用

直接将该应用的属性全部调用出来

<!--{iCMS:prop:group appid="$APP.id" loop="true" row="100" }-->
筛选字段：<!--{$prop_group.field}-->
分组标题：<!--{$prop_group.title}-->
重置链接：<!--{$prop_group.url}-->
是否重置选中：<!--{$prop_group.active}--> true:重置 false:未选中
筛选选项数组：<!--{$prop_group.items}--> 
其它参数请用 <!--{$prop_group|print_r}--> 输出查看

<!--{$prop_group.items}--> 采用 foreach 遍历选项数组

<!--{foreach key="key" value="item" from="$prop_group.items"}-->
选项值：<!--{$item.value}-->
选项名称：<!--{$item.text}-->
选项是否选中：<!--{$item.active}--> true:选中 false:未选中
选项链接：<!--{$item.url}--> 可直接点击跳转该链接选中，或者自行处理，
其它参数请用 <!--{$item|print_r}--> 输出查看

只需要当前链接参数为 筛选字段=选项值，多选采用多个 字段=选项值1,选项值2 拼接
例：yuyan=ot&juqing=14
或者 &juqing=15,14
<!--{/foreach}-->

<!--{/iCMS}-->

示例

<!--{iCMS:prop:group appid="$APP.id" loop="true" row="100" }-->
<div class="row mb-2">
    <label class="col-sm-1 col-form-label text-sm-end" for="<!--{$prop_group.field}-->"><!--{$prop_group.title}--></label>
    <div class="col-sm-10 text-wrap">
        <div class="btn-group d-flex flex-wrap" role="group" aria-label="Basic radio toggle button group">
            <input type="radio" class="btn-check" name="<!--{$prop_group.field}-->" id="<!--{$prop_group.key}-->" autocomplete="off" value="" <!--{$prop_group.active?'checked':''}-->>
            <a href="<!--{$prop_group.url}-->" class="btn btn-outline-secondary" for="<!--{$prop_group.id}-->">不限</a>

            <!--{foreach key="key" value="item" from="$prop_group.items"}-->
            <input type="<!--{$prop_group.type}-->" class="btn-check" name="<!--{$prop_group.field}-->" id="<!--{$item.key}-->" autocomplete="off" value="<!--{$item.value}-->" <!--{$item.active?'checked':''}-->>
            <a href="<!--{$item.url}-->" class="btn btn-outline-secondary" for="<!--{$item.key}-->"><!--{$item.text}--></a>
            <!--{/foreach}-->
        </div>
    </div>
</div>
<!--{/iCMS}-->

普通组件调用

<!--{iCMS:content:field field="字段名" loop="true"}-->
选项值：<!--{$content_field.value}-->
选项名称：<!--{$content_field.name}-->
选项是否选中：<!--{$content_field.active}--> true:选中 false:未选中
选项链接：<!--{$content_field.url}--> 可直接点击跳转该链接选中，或者自行处理，
其它参数请用 <!--{$content_field|print_r}--> 输出查看

<!--{/iCMS}-->

示例

<div class="row mb-2">
    <label class="col-sm-1 col-form-label text-sm-end">字段名称</label>
    <div class="col-sm-10 text-wrap">
        <div class="btn-group d-flex flex-wrap" role="group" aria-label="Basic radio toggle button group">
            <!--{iCMS:content:field field="字段名" loop="true"}-->
            <input type="checkbox" class="btn-check" name="字段名" id="<!--{$content_field.id}-->" autocomplete="off" value="<!--{$content_field.value}-->" <!--{$content_field.active?'checked':''}-->>
            <a href="<!--{$content_field.url}-->" class="btn btn-outline-secondary" for="<!--{$content_field.id}-->"><!--{$content_field.text}--></a>
            <!--{/iCMS}-->
        </div>
    </div>
</div>

调用数据

采用 where 接收选择后的筛选条件，然后传入iCMS:content:list标签 参与数据筛选

where="$WHERE"

<!--{iCMS:content:list loop="true" page="true" row="5" sub="all" cid="$node.id" where="$WHERE"}-->
<!--{$content_list|print_r}-->
<!--{/iCMS}-->

最后上传个调用的demo文件 有需要的自己行下载 demo.zip

五、总结

通过以上步骤，用户可以在 ICMS V8 中轻松地自定义筛选应用，以满足自己的需求。在操作过程中，请注意遵循相关注意事项，以确保设置的正确性和有效性。

配置Google登录: 下一篇