찾다
웹 프론트엔드레이이 튜토리얼Layui 프레임워크의 테이블 필드 필터링 기능 소개

Layui 프레임워크의 테이블 필드 필터링 기능 소개

우선 필드용이므로 필터링 기능이 필요한 열을 결정하기 위해 열에 새 구성 항목을 추가합니다. 일반적으로 데이터를 여러 분포로 요약할 수 있는 열만 이 작업을 수행할 수 있습니다. 예제의 성별 열, 직업 열, ID 열과 같은 필터링 요구 사항은 물론 일부는 필수 사항이 아닙니다.

새 구성 항목 필터: true/false/null

Layui 프레임워크의 테이블 필드 필터링 기능 소개그런 다음 테이블이 렌더링된 후 필터링된 아이콘과 이벤트를 테이블 헤더의 해당 필드에 추가하세요

Layui 프레임워크의 테이블 필드 필터링 기능 소개이것이 코드가 다음과 같은 주된 이유입니다. 너무 길다 모두 표시할 방법이 없습니다. 간략한 소개는 table.eachCols를 사용하여 테이블 헤더를 탐색하고 추가해야 할 항목에 아이콘을 추가하는 것입니다. 이때 확인란을 클릭하여 확인합니다. 나중에 콘텐츠가 생성되지 않습니다.

사실 이는 모두 후속 클릭 이벤트에 의해 처리됩니다. 클릭 이벤트에서는 현재 열의 값 세트를 얻기 위해 순회됩니다.

주의! 여기에는 데이터가 아닌 최종적으로 표시되는 콘텐츠 모음이 있습니다. 필드에는 변환할 수 있는 템플릿이 있으므로 그 뒤에 있는 값이 다를 수 있더라도 최종 표시되는 값은 동일할 수 있으며, A 카테고리로 요약됩니다.

이 필터를 클릭했을 때 무엇을 하셨나요?

위에서 언급한 세트를 얻는 것 외에도 이 세트를 테이블의 데이터로 사용하고 로직을 기반으로 초기에 선택되었는지 여부를 얻은 다음 레이어에서 팝업 상자를 띄워 테이블을 렌더링합니다. 그것에.

여기서 중요한 것은 다중 열 필터링을 지원할지 여부입니다. 즉, 먼저 열을 선택한 다음 다른 열을 클릭하여 이전 필터를 기반으로 이 열을 필터링할 수 있습니다. 현재 이 요구 사항은 다음과 같기 때문에 직접 거부됩니다. 너무 복잡하고 설명하기 어렵습니다.

모두 서로 영향을 미치기 때문에 여기 열이 숨겨지고 나면 저기 열이 부분적으로 분류될 수 있으며 해당 데이터의 일부는 표시되고 일부는 숨겨집니다.

이제 무엇을 해야 할까요?

더 엄격한 유일한 방법은 절반 선택 상태라는 새로운 상태를 추가하는 것입니다. 그러나 실제 적용 시나리오는 발생하지 않아야 하지만 구현하기가 상당히 힘들어서 단순히 지원되지 않는 것 같습니다. 엑셀에서도 똑같다는데 한계가 있어서 기억이 잘 안나네요.

마지막 단계는 이 테이블의 확인 이벤트를 모니터링하는 것입니다. 그 뒤에 있는 실제 논리는 해당 tr을 표시하거나 숨기는 것입니다. 그런 다음 이 필터링 옵션을 클릭하여 열면 테이블 내부의 tr 표시 및 숨기기에 따라 기본적으로 선택되었는지 선택 취소되었는지도 결정됩니다.

Layui 프레임워크의 테이블 필드 필터링 기능 소개Laui에서 제공하는 아이콘에서는 찾을 수 없기 때문에 이를 지원하기 위해 새로운 스타일 파일이 추가됩니다. 추가에 주의하세요:

Layui 프레임워크의 테이블 필드 필터링 기능 소개문제가 있습니다: 조심한다면, 그것을 봐야 합니다. 아래 통계 열은 필드 필터링 후에 업데이트되지 않습니다. 이는 실제로 잘못된 것입니다. 일부 열은 필터링 후에 표시되지 않으므로 해당 통계는 우리가 보는 열의 통계여야 합니다.

제 생각은 데이터를 계산한 후 해당 DOM 노드로 업데이트할 수 있는 테이블 통계 방법을 캡슐화하는 것입니다. 원본 테이블에서 제공하는 통계의 가장 큰 역할은 아래에 고정된 컨테이너 노드를 생성하는 것입니다.

내부 콘텐츠는 실제로 중요하지 않습니다. 많은 친구들이 Layui가 통계 행 데이터를 제공하고 백그라운드 반환을 지원할 수 있는지 묻습니다. 실제로 이러한 내용은 위에서 언급한 캡슐화 방법으로 처리할 수도 있습니다. 매우 자유롭고, 합산뿐만 아니라 다양한 계산 등도 가능하지만, 이는 이번 포스팅의 초점은 아니고 차후에 구현하도록 하겠습니다.

테스트 페이지: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled
gitee 프로젝트: https://gitee.com/sun_zoro/layuiTablePlug

권장: layui 프레임워크 빠른 시작

위 내용은 Layui 프레임워크의 테이블 필드 필터링 기능 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
2023最新layui视频教程推荐(建议收藏)2023最新layui视频教程推荐(建议收藏)Jul 19, 2021 pm 05:22 PM

以下为大家整理了前端UI框架 — layui的视频教程,不需要从迅雷、百度云之类的第三方网盘平台下载,全部在线免费观看。教程由浅入深,有前端基础的人就能学习,从安装到案例讲解,全面详细,帮助你更快更好的掌握layui框架!

如何利用Layui实现图片轮播图功能如何利用Layui实现图片轮播图功能Oct 24, 2023 am 08:27 AM

如何利用Layui实现图片轮播图功能现如今,图片轮播图已经成为了网页设计中常见的元素之一。它可以使网页更加生动活泼,吸引用户的眼球,提升用户体验。在本文中,我们将介绍如何利用Layui框架来实现一个简单的图片轮播图功能。首先,我们需要在HTML页面中引入Layui的核心文件和样式文件:<linkrel="stylesheet"h

如何利用Layui开发一个具有分页功能的数据展示页面如何利用Layui开发一个具有分页功能的数据展示页面Oct 24, 2023 pm 01:10 PM

如何利用Layui开发一个具有分页功能的数据展示页面Layui是一个轻量级的前端UI框架,提供了简洁美观的界面组件和丰富的交互体验。在开发中,我们经常会遇到需要展示大量数据并进行分页的情况。以下是一个利用Layui开发的具有分页功能的数据展示页面的示例。首先,我们需要引入Layui的相关文件和依赖。在html页面的<head>标签中加入以下代

如何利用Layui实现图片拖拽和缩放效果如何利用Layui实现图片拖拽和缩放效果Oct 24, 2023 am 09:16 AM

如何利用Layui实现图片拖拽和缩放效果在现代网页设计中,图片的交互效果成为增加网页活力和用户体验的重要手段。其中,图片拖拽和缩放效果是常见且受欢迎的交互方式之一。本文将介绍如何使用Layui框架实现图片拖拽和缩放效果,并提供具体的代码示例。一、引入Layui框架和相关依赖:首先,我们需要在HTML文件中引入Layui框架和相关依赖。可以通过以下代码示例引入

如何利用Layui实现图片反色和亮度调节功能如何利用Layui实现图片反色和亮度调节功能Oct 25, 2023 am 09:10 AM

如何利用Layui实现图片反色和亮度调节功能引言:在前端开发中,经常会遇到需要对图片进行特效处理的情况。本文将介绍如何利用Layui框架实现图片反色和亮度调节功能,并提供具体代码实例供参考。一、Layui简介:Layui是一款优秀的前端UI框架,具有简洁、美观、易用等特点。它提供了丰富的前端组件,让开发者能够轻松搭建出精美的网站。二、准备工作:在开始之前,我

如何使用Layui开发一个支持图片放大缩小的相册功能如何使用Layui开发一个支持图片放大缩小的相册功能Oct 24, 2023 am 09:02 AM

如何使用Layui开发一个支持图片放大缩小的相册功能相册功能在现代的网页应用中非常常见,通过展示用户上传的图片,让用户能够方便地浏览和管理图片。为了提供更好的用户体验,一种常见的需求是支持图片的放大和缩小功能。本文章将介绍如何使用Layui框架开发一个支持图片放大缩小的相册功能,同时提供具体的代码示例。首先,确保您已经引入Layui框架的CSS和JS文件。您

如何使用Layui开发一个支持文件上传和下载的资源管理系统如何使用Layui开发一个支持文件上传和下载的资源管理系统Oct 24, 2023 am 09:19 AM

如何使用Layui开发一个支持文件上传和下载的资源管理系统引言:随着互联网的发展,数据资源的管理已经成为一项重要的任务。无论是企业内部的文档管理,还是个人的文件存储,都需要一个高效且易于使用的资源管理系统。Layui是一款轻量级的前端框架,具有简洁明了的设计以及丰富的组件库,非常适合用来进行资源管理系统的开发。本文将介绍如何使用Layui开发一个支持文

如何使用Layui框架开发一个支持实时通讯的在线客服系统如何使用Layui框架开发一个支持实时通讯的在线客服系统Oct 25, 2023 am 08:47 AM

如何使用Layui框架开发一个支持实时通讯的在线客服系统概述:在线客服系统是现代企业提供与客户交流的重要渠道之一,而实时通讯是在线客服系统的关键技术之一。本文将介绍如何使用Layui框架开发一个支持实时通讯的在线客服系统,并提供具体的代码示例。一、准备工作安装Node.js:在开发环境中安装Node.js,并配置好相关环境。安装Layui:在项目中引入Lay

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경