企业官网建设流程全解析

免费查企业电话网站,搜索引擎优化的工具,python进行网站开发,建设网站英文#x1f4cc; 概述 筛选器管理模块允许用户保存和管理常用的筛选条件。该模块集成了 Cordova 框架与 OpenHarmony 原生能力#xff0c;提供了完整的筛选器管理功能。用户可以创建多个筛选器#xff0c;为每个筛选器设置特定的条件#xff0c;然后快速应用这些筛选器来查看特… 概述筛选器管理模块允许用户保存和管理常用的筛选条件。该模块集成了 Cordova 框架与 OpenHarmony 原生能力提供了完整的筛选器管理功能。用户可以创建多个筛选器为每个筛选器设置特定的条件然后快速应用这些筛选器来查看特定的数据。模块支持筛选器的编辑、删除和排序。 完整流程第一步筛选器数据加载当用户进入筛选器管理页面时应用会从数据库中加载所有已保存的筛选器。应用会显示每个筛选器的名称、条件和使用次数。第二步筛选器展示与管理数据加载完成后应用会将筛选器显示为列表形式。用户可以点击筛选器快速应用也可以编辑或删除筛选器。用户可以创建新的筛选器。第三步筛选器应用与同步当用户点击筛选器时应用会立即应用该筛选器的条件显示符合条件的数据。应用会更新筛选器的使用统计。 Web 代码实现HTML 筛选器列表dividfilters-pageclasspagedivclasspage-headerh1筛选器/h1buttonclassbtn btn-primaryonclickopenCreateFilterModal() 新建筛选器/button/divdividfilters-listclassfilters-list!-- 筛选器项动态生成 --/div!-- 创建/编辑筛选器模态框 --dividfilter-modalclassmodalstyledisplay:none;divclassmodal-contentdivclassmodal-headerh2idfilter-modal-title新建筛选器/h2buttonclassbtn-closeonclickcloseFilterModal()×/button/divformidfilter-formclassformdivclassform-grouplabelforfilter-name筛选器名称 */labelinputtypetextidfilter-namenamenamerequired/divdivclassform-grouplabelforfilter-tea-type茶叶类型/labelselectidfilter-tea-typenameteaTypeoptionvalue全部/option/select/divdivclassform-grouplabelforfilter-origin产地/labelselectidfilter-originnameoriginoptionvalue全部/option/select/divdivclassform-grouplabelforfilter-rating-min最低评分/labelselectidfilter-rating-minnameratingMinoptionvalue全部/optionoptionvalue11 星及以上/optionoptionvalue22 星及以上/optionoptionvalue33 星及以上/optionoptionvalue44 星及以上/optionoptionvalue55 星/option/select/divdivclassmodal-actionsbuttontypesubmitclassbtn btn-primary保存/buttonbuttontypebuttonclassbtn btn-secondaryonclickcloseFilterModal()取消/button/div/form/div/div/div筛选器管理页面包含筛选器列表和创建筛选器的按钮。模态框用于创建或编辑筛选器。筛选器管理逻辑letallFilters[];letcurrentEditingFilterIdnull;asyncfunctionrenderFilters(){try{// 加载筛选器数据allFiltersawaitdb.getFilters();constlistContainerdocument.getElementById(filters-list);listContainer.innerHTML;if(allFilters.length0){listContainer.innerHTMLdiv classno-datap暂无筛选器/p/div;return;}allFilters.forEach(filter{constfilterEldocument.createElement(div);filterEl.classNamefilter-item;filterEl.dataset.filterIdfilter.id;constconditionsbuildConditionString(filter);filterEl.innerHTMLdiv classfilter-info div classfilter-name${filter.name}/div div classfilter-conditions${conditions}/div div classfilter-usage使用次数:${filter.usageCount||0}/div /div div classfilter-actions button classbtn-icon onclickapplyFilter(${filter.id}) title应用✓/button button classbtn-icon onclickeditFilter(${filter.id}) title编辑✏️/button button classbtn-icon onclickdeleteFilter(${filter.id}) title删除️/button /div;listContainer.appendChild(filterEl);});// 加载分类和产地constcategoriesawaitdb.getTeaCategories();constoriginsawaitdb.getOrigins();populateSelectOptions(filter-tea-type,categories);populateSelectOptions(filter-origin,origins);document.getElementById(filter-form).addEventListener(submit,handleSaveFilter);}catch(error){console.error(Failed to render filters:,error);showToast(加载筛选器失败,error);}}functionbuildConditionString(filter){constconditions[];if(filter.teaType)conditions.push(茶叶:${filter.teaType});if(filter.origin)conditions.push(产地:${filter.origin});if(filter.ratingMin)conditions.push(评分:${filter.ratingMin}★);returnconditions.length0?conditions.join( | ):无条件;}asyncfunctionapplyFilter(filterId){try{constfilterawaitdb.getFilter(filterId);if(!filter){showToast(筛选器不存在,error);return;}// 更新使用次数awaitdb.updateFilterUsageCount(filterId);// 应用筛选器条件constrecordsawaitdb.getAllRecords();constfilteredrecords.filter(record{if(filter.teaTyperecord.teaType!filter.teaType)returnfalse;if(filter.originrecord.origin!filter.origin)returnfalse;if(filter.ratingMinrecord.ratingfilter.ratingMin)returnfalse;returntrue;});// 显示筛选结果showFilterResults(filtered);showToast(应用筛选器:${filter.name},success);if(window.cordova){cordova.exec(null,null,TeaLogger,logEvent,[filter_applied,{filterId:filterId,resultCount:filtered.length}]);}}catch(error){console.error(Failed to apply filter:,error);showToast(应用筛选器失败,error);}}functionopenCreateFilterModal(){currentEditingFilterIdnull;document.getElementById(filter-modal-title).textContent新建筛选器;document.getElementById(filter-form).reset();document.getElementById(filter-modal).style.displayflex;}asyncfunctioneditFilter(filterId){try{constfilterawaitdb.getFilter(filterId);if(!filter){showToast(筛选器不存在,error);return;}currentEditingFilterIdfilterId;document.getElementById(filter-modal-title).textContent编辑筛选器;// 填充表单document.getElementById(filter-name).valuefilter.name;document.getElementById(filter-tea-type).valuefilter.teaType||;document.getElementById(filter-origin).valuefilter.origin||;document.getElementById(filter-rating-min).valuefilter.ratingMin||;document.getElementById(filter-modal).style.displayflex;}catch(error){console.error(Failed to edit filter:,error);showToast(加载筛选器失败,error);}}asyncfunctionhandleSaveFilter(event){event.preventDefault();constformDatanewFormData(document.getElementById(filter-form));constfilterData{name:formData.get(name),teaType:formData.get(teaType)||null,origin:formData.get(origin)||null,ratingMin:parseInt(formData.get(ratingMin))||null,createdAt:newDate().toISOString()};try{if(currentEditingFilterId){awaitdb.updateFilter(currentEditingFilterId,filterData);showToast(筛选器已更新,success);}else{awaitdb.addFilter(filterData);showToast(筛选器已创建,success);}closeFilterModal();renderFilters();}catch(error){console.error(Failed to save filter:,error);showToast(保存失败请重试,error);}}asyncfunctiondeleteFilter(filterId){if(!confirm(确定要删除这个筛选器吗)){return;}try{awaitdb.deleteFilter(filterId);showToast(筛选器已删除,success);renderFilters();}catch(error){console.error(Failed to delete filter:,error);showToast(删除失败请重试,error);}}functioncloseFilterModal(){document.getElementById(filter-modal).style.displaynone;currentEditingFilterIdnull;}functionshowFilterResults(records){// 导航到记录列表页面显示筛选结果navigateTo(record-list);// 在记录列表页面显示筛选后的结果}这段代码实现了完整的筛选器管理功能。renderFilters()加载并渲染筛选器列表。applyFilter()应用筛选器条件。handleSaveFilter()保存新增或修改的筛选器。deleteFilter()删除筛选器。 OpenHarmony 原生代码筛选器数据库操作// entry/src/main/ets/plugins/FilterManager.etsimport{relationalStore}fromkit.ArkData;exportclassFilterManager{privatestore:relationalStore.RdbStore;asynccreateFilterTable():Promisevoid{constcreateTableSqlCREATE TABLE IF NOT EXISTS filters ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL UNIQUE, tea_type TEXT, origin TEXT, rating_min INTEGER, usage_count INTEGER DEFAULT 0, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP );awaitthis.store.executeSql(createTableSql);}asyncaddFilter(filter:Filter):Promisenumber{constvalues:relationalStore.ValuesBucket{name:filter.name,tea_type:filter.teaType,origin:filter.origin,rating_min:filter.ratingMin,usage_count:0,created_at:newDate().toISOString()};returnawaitthis.store.insert(filters,values);}asyncupdateFilterUsageCount(filterId:number):Promisevoid{constpredicatesnewrelationalStore.RdbPredicates(filters);predicates.equalTo(id,filterId);constresultSetawaitthis.store.query(predicates);if(resultSet.goToFirstRow()){constcurrentCountresultSet.getColumnValue(resultSet.getColumnIndex(usage_count))asnumber;constvalues:relationalStore.ValuesBucket{usage_count:currentCount1};awaitthis.store.update(values,predicates);}resultSet.close();}}interfaceFilter{id?:number;name:string;teaType?:string;origin?:string;ratingMin?:number;usageCount?:number;}这个类管理筛选器的数据库操作。createFilterTable()创建筛选器表。addFilter()添加新筛选器。updateFilterUsageCount()更新筛选器的使用次数。 总结筛选器管理模块展示了如何在 Cordova 框架中实现筛选器管理功能。通过 Web 层的用户界面和交互结合原生层的数据库操作为用户提供了高效的数据筛选体验。