CN108062386A - 一种实现web页面地域跨级别多选的方法 - Google Patents

一种实现web页面地域跨级别多选的方法 Download PDF

Info

Publication number
CN108062386A
CN108062386A CN201711337009.1A CN201711337009A CN108062386A CN 108062386 A CN108062386 A CN 108062386A CN 201711337009 A CN201711337009 A CN 201711337009A CN 108062386 A CN108062386 A CN 108062386A
Authority
CN
China
Prior art keywords
region
multiselect
rank
web page
component
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201711337009.1A
Other languages
English (en)
Inventor
何苗
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
It Is Obvious That Marketing Data Services Ltd In Chengdu
Original Assignee
It Is Obvious That Marketing Data Services Ltd In Chengdu
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by It Is Obvious That Marketing Data Services Ltd In Chengdu filed Critical It Is Obvious That Marketing Data Services Ltd In Chengdu
Priority to CN201711337009.1A priority Critical patent/CN108062386A/zh
Publication of CN108062386A publication Critical patent/CN108062386A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Memory System Of A Hierarchy Structure (AREA)

Abstract

本发明公开了一种实现web页面地域跨级别多选的方法，其特征在于，包括以下步骤：(1)预处理；1a：构造组件；1b：初始化组件；1c：选中初始；1d；绑定事件；(2)地域选择；2a：将地域进行级联；2b：地域多选；2c：地域合并。本发明步骤简单且操作方便，还能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，从而可方便用户使用，因此适合推广使用。

Description

一种实现web页面地域跨级别多选的方法
技术领域
本发明涉及一种地域跨级别多选的方法，尤其涉及一种实现web页面地域跨级别多选的方法。
背景技术
现有的地域组件多是实现地域级联单选操作或对单独的某一区域进行多选，其填充初始化功能不完善，无法填充多选地域；且多选地域组件功能缺失，没有地域合并功能。
发明内容
本发明的目的在于提供一种实现web页面地域跨级别多选的方法，以期能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，以方便用户使用。
本发明通过下述技术方案实现：
一种实现web页面地域跨级别多选的方法，包括以下步骤：
(1)预处理
1a：构造组件；
1b：初始化组件；
1c：选中初始值；
1d；绑定事件；
(2)地域选择
2a：将地域进行级联；
2b：地域多选；
2c：地域合并。
进一步的，所述组件包括模板，数据和函数方法；所述模板作为基础样式，设置在标签template中，该模板用于构成组件的骨架；所述数据为组件提供输入参数，该数据存放在data变量中；所述函数方法包括实现web页面地域跨级别多选功能的方法，该函数方法都存放在组件的methods变量中。
再进一步的，所述数据包括省province，市city，区area，展示地域liveArea，选中地域selectedArea，删除地域removedArea，缓存数据cache。
更进一步的，步骤2a中将地域进行级联的具体过程为：将省/市设置为父级区域，并将省级下的市或市级下的区设置为子级区域；传入父级区域码，即可获取父级区域对应的子级区域。
为了更好地实现本发明，步骤2b中进行地域多选的具体过程为：通过多选checkbox选择地域，根据选中的地域即可禁用已选中的父级区域。
步骤2c中进行地域合并的具体过程为：将选中地域队列遍历，判断是否存在大地域覆盖小地域的情况，如果是，则将小地域过滤，展示对应的大地域。
本发明与现有技术相比，具有以下优点及有益效果：
(1)本发明步骤简单且操作方便，还能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，从而可方便用户使用。
(2)本发明提供的是完整的地域跨级别多选的方法，能够在初始化选中地域，并能解除选中地域，还能实现不同范围的省、市、区同时选中，在选中大地域时自动覆盖小地域，能自动过滤已选中地域，可方便用户快速灵活的选择地域。
具体实施方式
下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。
实施例
本发明的实现web页面地域跨级别多选的方法，首先进行预处理。在预处理的过程中，需要构造组件，该组件包括模板、数据和函数方法。所述模板作为基础样式，设置在标签template中，该模板用于构成组件的骨架。所述数据为组件提供输入参数，该数据存放在data变量中。所述组件需要定义参数包括省province，市city，区area，展示地域liveArea，选中地域selectedArea，删除地域removedArea，缓存数据cache；数据即可为上述定义的参数提供输入初始值initial，传入上述参数对应的数据，即可选中对应地域的功能。所述函数方法包括实现web页面地域跨级别多选功能的方法，具体包括重置初始化方法init，初始化数据方法initialize，缓存方法memoize，获取数据请求方法getLiveArea，监听方法watch，选择省方法provinceChange，选择市方法cityChange，移除选中列表项方法remove，清空选中列表方法empty，以及JavaScript中的原生方法apply和findIndex方法，以上函数方法都存放在组件的methods变量中。
构造组件完成后初始化组件，具体的组件初始化的过程为：定义缓存方法中的memoize方法，该采用的是JavaScript原生语言，利用对象属性将数据存储起来，并利用JavaScript中的apply将获取的省市区数据分别存入对象中进行数据缓存，并向变量cache中存储数据，以区域码areacode作为key，将获取的地域数据缓存到此变量cache中。然后填充地域数据，将获取到的地域数据赋值给变量liveArea，用于模板同步展示地域信息，利用缓存数据分别填充地域级联数据和多选面板数据。
完成组件初始化后选中初始值，通过传入参数initial，将参数initial的数据赋值给选中地域数据变量selectedArea，选中地域初始值并展示选中数据。
然后绑定事件，为组件添加监听事件。具体的，利用JavaScript的事件监听方法addEventListener，通过循环遍历将对应的地域选择项，地域选择项的areacode添加到事件监听方法中，利用组件的watch方法监听选中地域变量selectedArea和传入的初始值变量initial。再利用组件的选择省方法provinceChange和选择市方法cityChange监听选择省province和市city以及区area的变化。
完成预处理后，即可进行地域选择。在进行地域选择时，首先需要将地域进行级联，即将省/市设置为父级区域，并将省/市对应的省级下的市或市级下的区设置为子级区域。当设置省为父级区域时，则设置该省对应的市为子级区域；当设置市为父级区域时，则设置该市对应的区为子级区域。然后传入父级区域码，即可获取父级区域对应的子级区域。监听省或市值的变化，改变省或市的值，并传递对应改变的区域码，即可获取此区域码对应的子级区域数据，然后赋值给变量对应的子级区域所对应的市或区。
将地域级联后即可进行地域多选，即通过多选checkbox选择地域，根据选中的地域即可禁用已选中的父级区域。具体的，在选中或取消地域时，可利用watch方法监听变量selectedArea，传入selectedArea当前值，对比判断selectedArea当前值与初始值相比是增加还是减少。当selectedArea当前值与初始值相比增加时，则向选中地域数据的对象selectedArea增加相应的地域areacode；当selectedArea当前值与初始值相比减少时，则对比选中地域数据的对象selectedArea将减少的地域areacode，并从选中地域数据对象selectedArea中删除。同时，利用findIndex方法查找selectedArea中是否有对应的区域码，如果是，则将级联选择框中对应的区域项添加disabled属性，将此区域项禁用掉；如果否，则不做处理；并添加disabled属性，禁用已选中的省或市。
完成地域多选后将地域进行合并。在选择地域时，将选中地域队列遍历，判断是否存在大地域覆盖小地域的情况，如果是，则将小地域过滤，展示对应的大地域。具体的，实时监听选中的地域值selectedArea，地域值selectedArea有变化时，甄别省和市是否存在大地域覆盖小地域的情况，如果是，则将覆盖的小地域剔除掉，完成地域合并。
本发明步骤简单且操作方便，还能丰富地域组件的功能，灵活的实现地域级联多选、跨地域多选、初始化选中地域等目的，从而可方便用户使用。本发明提供的是完整的地域跨级别多选的方法，能够在初始化选中地域，并能解除选中地域，还能实现不同范围的省、市、区同时选中，在选中大地域时自动覆盖小地域，能自动过滤已选中地域，可方便用户快速灵活的选择地域。
如上所述，便可较好的实现本发明。

Claims (6)

1.一种实现web页面地域跨级别多选的方法，其特征在于，包括以下步骤：
(1)预处理
1a：构造组件；
1b：初始化组件；
1c：选中初始值；
1d；绑定事件；
(2)地域选择
2a：将地域进行级联；
2b：地域多选；
2c：地域合并。
2.根据权利要求1所述的一种实现web页面地域跨级别多选的方法，其特征在于：所述组件包括模板，数据和函数方法；所述模板作为基础样式，设置在标签template中，该模板用于构成组件的骨架；所述数据为组件提供输入参数，该数据存放在data变量中；所述函数方法包括实现web页面地域跨级别多选功能的方法，该函数方法都存放在组件的methods变量中。
3.根据权利要求2所述的一种实现web页面地域跨级别多选的方法，其特征在于：所述数据包括省province，市city，区area，展示地域liveArea，选中地域selectedArea，删除地域removedArea，缓存数据cache。
4.根据权利要求1～3任一项所述的一种实现web页面地域跨级别多选的方法，其特征在于：步骤2a中将地域进行级联的具体过程为：将省/市设置为父级区域，并将省级下的市或市级下的区设置为子级区域；传入父级区域码，即可获取父级区域对应的子级区域。
5.根据权利要求4所述的一种实现web页面地域跨级别多选的方法，其特征在于：步骤2b中进行地域多选的具体过程为：通过多选checkbox选择地域，根据选中的地域即可禁用已选中的父级区域。
6.根据权利要求5所述的一种实现web页面地域跨级别多选的方法，其特征在于：步骤2c中进行地域合并的具体过程为：将选中地域队列遍历，判断是否存在大地域覆盖小地域的情况，如果是，则将小地域过滤，展示对应的大地域。
CN201711337009.1A 2017-12-14 2017-12-14 一种实现web页面地域跨级别多选的方法 Pending CN108062386A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201711337009.1A CN108062386A (zh) 2017-12-14 2017-12-14 一种实现web页面地域跨级别多选的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201711337009.1A CN108062386A (zh) 2017-12-14 2017-12-14 一种实现web页面地域跨级别多选的方法

Publications (1)

Publication Number Publication Date
CN108062386A true CN108062386A (zh) 2018-05-22

Family

ID=62138747

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201711337009.1A Pending CN108062386A (zh) 2017-12-14 2017-12-14 一种实现web页面地域跨级别多选的方法

Country Status (1)

Country Link
CN (1) CN108062386A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109885225A (zh) * 2018-12-14 2019-06-14 平安万家医疗投资管理有限责任公司 一种级联式选择的显示方法、装置及计算机设备

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR20110136272A (ko) * 2010-06-14 2011-12-21 주식회사 다음커뮤니케이션 체크박스 영역에 있는 복수의 아이템들에 대한 선택 방법
CN106104473A (zh) * 2014-03-25 2016-11-09 微软技术许可有限责任公司 用户可选操作系统
CN106201501A (zh) * 2016-07-06 2016-12-07 全程网络科技（上海）有限公司 一种对移动端表单界面的可配置化构建方法及系统
US20170061451A1 (en) * 2008-08-12 2017-03-02 Iheartmedia Management Services, Inc. Audience migration information

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20170061451A1 (en) * 2008-08-12 2017-03-02 Iheartmedia Management Services, Inc. Audience migration information
KR20110136272A (ko) * 2010-06-14 2011-12-21 주식회사 다음커뮤니케이션 체크박스 영역에 있는 복수의 아이템들에 대한 선택 방법
CN106104473A (zh) * 2014-03-25 2016-11-09 微软技术许可有限责任公司 用户可选操作系统
CN106201501A (zh) * 2016-07-06 2016-12-07 全程网络科技（上海）有限公司 一种对移动端表单界面的可配置化构建方法及系统

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
CRPER: "Vue编写多地区选择组件", 《脚本之家HTTPS://WWW.JB51.NET/ARTICLE/121659.HTM》 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109885225A (zh) * 2018-12-14 2019-06-14 平安万家医疗投资管理有限责任公司 一种级联式选择的显示方法、装置及计算机设备

Similar Documents

Publication Publication Date Title
CN108334892B (zh) 一种基于卷积神经网络的车型识别方法、装置及设备
Doling et al. Housing East Asia: socioeconomic and demographic challenges
DE102020002301A1 (de) Automatisches Detektieren nutzerseitig angeforderter Objekte in Bildern
CN109408699B (zh) 一种同步缓存zTree树实现树节点快速检索的方法
CN106843904A (zh) 界面动态布局方法及其系统
DE112016004859T5 (de) Personalisiertes Entitäten-Repository
CN105893278A (zh) 系统缓存垃圾清理方法、装置和终端设备
CN105718815A (zh) 一种系统文件自动清理方法及装置
CN106933617A (zh) 汽车软件适配系统及其适配方法
CN108153505A (zh) 手写输入内容的显示方法、电子设备及计算机存储介质
CN107609047A (zh) 应用推荐方法、装置、移动设备及存储介质
CN108062386A (zh) 一种实现web页面地域跨级别多选的方法
CN105955847A (zh) 一种电子设备文件防误删的方法及系统
CN106201224A (zh) 一种数据批量处理的方法及装置
CN106599004A (zh) 一种地图数据的显示方法及装置
US6438269B1 (en) Method for multi-step filtering spatious objects by utilizing MMP filter in spatial database system
CN110309386A (zh) 一种网页爬取的方法和装置
CN109739885A (zh) 基于本地缓存的数据查询方法、装置、设备及存储介质
CN105551027B (zh) 一种边界跟踪方法及装置
CN102567588B (zh) 一种异构cad集成中的拓扑元素匹配方法
CN116958325A (zh) 图像处理模型的训练方法、装置、电子设备及存储介质
CN106250183A (zh) 一种移动设备软件升级方法及装置
CN105893445A (zh) 数据处理的方法、服务器和终端设备
CN103248942B (zh) 可视化节目列表的更新方法及更新装置
CN105404589B (zh) 一种垃圾回收方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20180522

RJ01 Rejection of invention patent application after publication