自定义筛选应用

## 一、引言 ICMS V8 是一款功能强大的内容管理系统，它提供了丰富的自定义选项，让用户能够根据自己的需求来筛选应用。本文档将详细介绍如何在 ICMS V8 中自定义筛选应用。 ## 二、添加应用 1. 登录 ICMS V8 后台管理界面。 2. 在左侧菜单栏中，找到“系统” >> “应用管理” >> “添加应用” 菜单，点击进入。 ### 基本信息 根据您的实际情况填写即可 应该类型选“自定义应用”，其它都默认。 ### 菜单配置、路由配置、基础字段 默认，不需要更改 ### 字段编辑器 ### 属性组件 添加需要参考筛选的字段，在右侧选择 “属性(下拉列表)”“属性(多选列表)”“属性(单选框)”“属性(复选框)” 拖拉到编辑器相关位置  添加完成后 点击字段的右侧编辑按钮，编辑该字段的相关信息。 可添加多个字段  字段填加完成后，点提交完成应用添加操作 #### 添加属性 在左侧菜单栏中，找到“辅助” >> “属性” >> “添加属性” 菜单，点击进入。 所属应用：选择刚才添加的应用 标题：填写前端显示的分组标题，填入字段名称或者您想要分组名称即可 属性字段：选需要添加数据的字段 #### 属性数据 字段需要参与筛选的数据 每行一个 ##### 数据格式 **名称:值** **名称:** 属性值将按序号填充 **名称** 属性值将用名称填充 ###### 1.名称:值 名称：前端筛选时显示的文字 值：筛选选中后的值,任意字符串 例：户型数据 > 别墅:bs > 一居室:1s > 二居室:2s 它们的值为 别墅=bs，一居室=1s，二居室=2s 等等 年代 > 更早之前:1999 > 2000以前:2000 > 2001:2001 ###### 2.名称: 属性值将按序号填充 例：语言 > 其它: > 英语: > 法语: > 中文: 它们的值为 其它=0，英语=1，法语=2，中文=3 ###### 3.名称 属性值将用名称填充 例：地区 > 北京 > 上海 > 重庆 它们的值为 北京=北京，上海=上海，重庆=重庆 添加完成后，在筛选应用里就可以选择这些选项了 ### 普通组件 添加基础组件单选框、多选框、下拉列表、多选列表  #### 数据选项 添加完字段后，点击字段编辑按钮，进行选项数据添加  **如果选项值不是数字，请将字段类型改为 字符串(VARCHAR)** 目前选项数据格式，支持两级 格式： > 一级选项(二级选项1,二级选项2,二级选项3,二级选项4) > 一级选项=选项值(二级选项1,二级选项2,二级选项3,二级选项4) 示例 > 面积=mj(50-80㎡,80-100㎡,100-130㎡,130㎡及以上,50㎡及以下); > 场景=cj(家装,办公,店装,商超,餐饮,教育,民宿,娱乐,其他公装); > 房型=hx(普通住宅,别墅,复式,大平层,loft,跃层);  ## 三、添加筛选内容 在左侧菜单栏中，找到“内容” >> “您添加应用时填写的名称” >> “添加？？” 菜单，点击进入。  ## 四、前端调用 自定义应用的栏目首页、列表默认模板为 `content.group.htm` 内容模板为 `content.htm` ### 属性组件调用 #### 分组调用 直接将该应用的属性全部调用出来 ```html <!--{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}--> ``` #### 示例 ```html <!--{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}--> ``` ### 普通组件调用 ```html <!--{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"` ```html <!--{iCMS:content:list loop="true" page="true" row="5" sub="all" cid="$node.id" where="$WHERE"}--> <!--{$content_list|print_r}--> <!--{/iCMS}--> ``` 最后上传个调用的demo文件 有需要的自己行下载 [demo.zip](https://www.icmsdev.com/uploads/22/321/22321870aeeb0e7c65bc5266bcf499ec.zip) ## 五、总结 通过以上步骤，用户可以在 ICMS V8 中轻松地自定义筛选应用，以满足自己的需求。在操作过程中，请注意遵循相关注意事项，以确保设置的正确性和有效性。