angular+ng-zorro后台搜索页面

继续上一次表格的内容，这次要在页面的头部加上一个搜索框，然后让表格的数据可以根据搜索内容更新
首先要介绍下ng-zorro的栅格化布局,以下摘自官网

在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，将整个设计建议区域按照 24 等分的原则进行划分。划分之后的信息区块我们称之为『盒子』。建议横向排列的盒子数量最多四个，最少一个。『盒子』在整个屏幕上占比见上图。设计部分基于盒子的单位定制盒子内部的排版规则，以保证视觉层面的舒适感。

布局的栅格化系统，是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：通过 row 在水平方向建立一组 column（简写 col）,内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素。栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用 <div nz-col [nzSpan]=“8” /> 来创建。如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列。我们的栅格化系统基于 Flex 布局，允许子元素在父节点内的水平对齐方式 - 居左、居中、居右、等宽排列、分散排列。子元素与子元素之间，支持顶部对齐、垂直居中对齐、底部对齐的方式。同时，支持使用 order 来定义元素的排列顺序。布局是基于 24 栅格来定义每一个『盒子』的宽度，但不拘泥于栅格。

有了以上的理论知识就可以画出这样的表格了

代码如下,这是根据官网给的案例进行修改的，这边表单的布局是应用栅格化布局的,我们设置nzSpan的值为6就表示有4个组件，因为4*6=24,栅格布局是基于24栅格的，所以要布局3个条件框的话就把nzSpan的值设为8，代码里的nzGutter的意思用官网的话来解释就是:

栅格常常需要和间隔进行配合，你可以使用 nz-row 的 nzGutter 属性，我们推荐使用 (16+8n)px 作为栅格间隔。(n 是自然数)

<form nz-form class="ant-advanced-search-form"><div nz-row [nzGutter]="16"><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件01</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件01</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件01</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件01</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div></div><div nz-row><div nz-col [nzSpan]="24" class="search-area"><button nz-button [nzType]="'primary'">Search</button><button nz-button (click)="resetForm()">Clear</button></div></div>
</form>
<div style="height: 20px;"></div>
<form nz-form class="ant-advanced-search-form"><div nz-row [nzGutter]="16"><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件01</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件02</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><nz-form-label>条件03</nz-form-label><nz-form-control><input nz-input placeholder="placeholder" /></nz-form-control></nz-form-item></div><div nz-col nzSpan="6"><nz-form-item><button nz-button [nzType]="'primary'" (click)="search()">Search</button></nz-form-item></div></div>
</form>

当然千万不要忘记引入组件，要不然是会报错的，也就是在welcome.module.ts中引入,NzButton、NzIconModule、NzSpaceModule、CUSTOM_ELEMENTS_SCHEMA、NO_ERRORS_SCHEMA

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';import { WelcomeRoutingModule } from './welcome-routing.module';import { WelcomeComponent } from './welcome.component';
import { NzTableModule } from 'ng-zorro-antd/table';
import { CommonModule } from '@angular/common';
import { NzFormModule } from 'ng-zorro-antd/form';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzIconModule } from 'ng-zorro-antd/icon';
import {NzSpaceModule} from 'ng-zorro-antd/space';@NgModule({imports: [WelcomeRoutingModule, NzTableModule, CommonModule, NzFormModule,FormsModule,ReactiveFormsModule,NzButtonModule,NzIconModule,NzSpaceModule],declarations: [WelcomeComponent],exports: [WelcomeComponent],schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class WelcomeModule { }

接下来把上面的html代表加入welcome.component.html中就可以了，这样我们就达到了下面的效果

angular+ng-zorro后台搜索页面相关推荐

angular ng zorro框架日期框无法自适应宽度的解决方法
如果我们使用ng zorro框架的日期框时,就会发现,日期框的宽度总是固定的,无法像输入框一样自适应父节点<nz-form-control [nzSpan]="12"> ...
ngzorro html源码,angular使用NG ZORRO来构建博客展示项目(简单实现展示页面)
使用 NG ZORRO 在上一篇文章中,我们已经安装了NG ZORRO,并在跟模块中引入了,在子模块中使用还需要再次引入. 编辑layout模块中的header组件在layout.module.ts ...
angular项目集成ng zorro 和ng alain
angular项目集成 ng zorro和ng alain(mock 和acl权限)学习笔记这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
dede搜索php在哪,dede搜索页面怎么调用及相关搜索调用
dede搜索页面怎么调用,那几天有事情,所以导致博客几天都一直没有更新,之前我们讲过dede内容页面和dede列表模板的调用,今天我们一起来学习下搜索页面的调用,很多做企业站朋友们都不知道dede的搜 ...
20150401--Dede+搜索页面，评论
20150401--Dede+搜索页面,评论一.在搜索页面完成栏目的取出思路:取出的数据是顶级栏目,dede_arctype表(栏目表),条件是:父id等于0 reid=0 要注意:我们要取出的数 ...
淘淘商城第51讲——从商城首页跳转到搜索页面
通过上文的学习,我们已经学会了如何把商品数据导入到索引库中,本文我将会教大家如何从淘淘商城首页跳转到搜索页面. 我们要访问淘淘商城首页就得先启动Redis服务,大家根据自己使用的情况来启动,使用的是单 ...
09-搜索前端开发-搜索页面
3 搜索前端开发 3.1 搜索页面 3.1.1 需求分析上图是课程搜索前端的界面,用户通过前端向服务端发起搜索请求,搜索功能包括: 1.界面默认查询所有课程,并分页显示 2.通过一级分类和二分类搜索 ...
【uni-app微信小程序】搜索页面开发，可以保存用户搜索历史，删除历史（简单解释）
目录前言效果展示主体内容前言此篇文章纯代码较多,细节解释,今后会出更加详细的解释效果展示保存的内容,可以长按删除,视频时长原因就不一一展示,具体效果如下视频主体内容这里one-adv ...
登录、注册、后台管理页面（动态）
一.作业需求: 1.后台管理主界面(左边菜单框.(全选.反选)框.返回顶部按钮) 2.老男孩登录.注册页面二.博客地址:https://www.cnblogs.com/catepython/p/93 ...

angular+ng-zorro后台搜索页面

angular+ng-zorro后台搜索页面相关推荐

最新文章

热门文章