iView学习笔记(三):表格搜索,过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作
1.后端准备工作
环境说明
python版本:3.6.6
Django版本:1.11.8
数据库:MariaDB 5.5.60
新建Django项目,在项目中新建app,配置好数据库
api_test/app01/models.py
文件内容
from django.db import modelsfrom .utils.parse_time import parse_datetime_to_stringHOST_STATUS = ((1, "processing"),(2, "error"),
)class HostInfo(models.Model):hostname = models.CharField("主机名", max_length=32)ip = models.CharField("IP地址", max_length=16)status = models.IntegerField("主机状态", choices=HOST_STATUS, default=1)date = models.DateTimeField("主机添加时间", auto_now_add=True)def to_dict(self):return {"hostname": self.hostname,"ip": self.ip,"status": self.status,"when_insert": parse_datetime_to_string(self.date),}
app01/utils/parse_time.py
文件内容
def parse_datetime_to_string(datetime_str, flag=True):"""把datetime时间转化成时间字符串:param datetime_str: datetime生成的时间,例子:datetime.datetime.now()或者: datetime.datetime.now() - datetime.timedelta(hours=1) # 一个小时之前或者: datetime.datetime.now() - datetime.timedelta(days=1) # 一天之前:return:"""# 将日期转化为字符串 datetime => string# 在数据库中定义字段信息时为:models.DateTimeField(auto_now_add=True)# 查询数据库之后,使用此方法把查询到的时间转换成可用的时间字符串# when_insert__range=(an_hour_time, now_time)# an_hour_time和 now_time 都是 datetime时间字符串,查询两个datetime时间字符串之间的数据if flag:return datetime_str.strftime('%Y-%m-%d %H:%M:%S')else:return datetime_str.strftime('%Y-%m-%d')
api_test/urls.py
文件内容
from django.conf.urls import url
from django.contrib import admin
from app01 import viewsurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^host/$', views.host_list),
]
api_test/app01/views.py
文件内容
import jsonfrom django.http import JsonResponse
from django.views.decorators.csrf import csrf_exemptfrom .models import HostInfo@csrf_exempt
def host_list(request):# for i in range(1, 31):# hostname = random.choice(["beijing-aws-0","shanghai-aliyun-0"]) + str(i)# ip = "192.168.100.%d" % i# status = random.randint(1, 2)# host_obj = HostInfo(hostname=hostname, ip=ip, status=status)# host_obj.save()if request.method == "GET":query = request.GET.get("query_string")status = request.GET.get("status")res_list = []host_list = HostInfo.objects.all()if query:host_list = host_list.filter(hostname__icontains=query)if status:host_list = host_list.filter(status=status)for i in host_list:res_list.append(i.to_dict())return JsonResponse({"data": res_list, "result": True}, safe=False)elif request.method == "POST":data = json.loads(request.body)try:HostInfo.objects.create(**data)res = {"status": "success"}except Exception:res = {"status": "fail"}return JsonResponse(res, safe=False)
这里前端向后端发送POST请求时,后端没有执行csrftoken验证,前端获取csrftoken,后端进行csrftoken验证不在本文示例之内
2.前端准备工作
首先新建一个项目,然后引入iView插件,配置好router
npm安装iView
npm install iview --save
cnpm install iview --save
src/main.js
文件内容
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import iView from 'iview';
import 'iview/dist/styles/iview.css';Vue.use(iView);Vue.config.productionTip = false
new Vue({router,render: h => h(App)
}).$mount('#app')
src/router.js
文件内容
import Vue from 'vue'
import Router from 'vue-router'Vue.use(Router)export default new Router({routes: [{path: '/table1',component: () => import('./views/table1.vue')},{path:'/',redirect:'/table1'}]
})
src/views/table1.vue
文件内容
<template><div style="padding:32px 64px"><h1>在外部进行表格的搜索,过滤,隐藏某列的操作</h1><br><br><Form inline :label-width="80"><FormItem label="主机名称:"><Input v-model="form.searchoHostname" placeholder="请输入" style="width:200px;"/></FormItem><FormItem label="使用状态:"><Select v-model="form.searchHostStatus" placeholder="请选择" style="width:200px"><Option :value="1">运行中</Option><Option :value="2">异常</Option></Select></FormItem><Button type="primary" @click="getData" style="margin-right:8px;">查询</Button><Button @click="handleReset">重置</Button></Form><CheckboxGroup v-model="showColumns"><Checkbox :label="0">主机名称</Checkbox><Checkbox :label="1">IP 地址</Checkbox><Checkbox :label="2">使用状态</Checkbox><Checkbox :label="3">最后修改时间</Checkbox></CheckboxGroup><Button type="primary" icon="md-add" @click="createDialog=true" style="margin-top:20px;">新建</Button><br><br><Table :data="tableData" :columns="filterColumns" :loading="loading" size="small"></Table><Modal v-model="createDialog" title="新建主机"><Form><FormItem><Input v-model="createHostForm.hostname" placeholder="主机名称"/></FormItem><FormItem><Input v-model="createHostForm.ip" placeholder="IP 地址"/></FormItem><FormItem><Select v-model="createHostForm.status" placeholder="使用状态"><Option :value="1">运行中</Option><Option :value="2">异常</Option></Select></FormItem></Form><Button slot="footer" type="primary" @click="handleCreate">创建</Button></Modal></div>
</template><script>import axios from 'axios';export default {data() {return {tableData: [],loading: false,columns: [{title: "主机名称",key: 'hostname',},{title: "IP地址",key: 'ip',},{title: "等级",key: 'status',render: (h, {row}) => {if (row.status === 1) {return h('Badge', {props: {status: 'processing',text: '运行中'}})} else if (row.status === 2) {return h('Badge', {props: {status: 'error',text: '异常'}})}}},{title: "最后修改时间",key: 'when_insert',}],form: {searchoHostname: '',searchHostStatus: '',},createDialog: false,createHostForm: {hostname: '',ip: '',status: '',},isCreate: false,showColumns: [0, 1, 2, 3],}},computed: {filterColumns() {const columns = [...this.columns];const filterColumns = [];this.showColumns.sort().forEach(item => {filterColumns.push(columns[item])});return filterColumns}},methods: {getData() {if (this.loading) return;this.loading = true;axios.get(`http://127.0.0.1:8000/host/?query_string=${this.form.searchoHostname}&status=${this.form.searchHostStatus}`).then(res => {console.log(res.data)if(res.data.result) {setTimeout(() => {this.tableData = res.data.data;this.loading = false;}, 1000)} else {this.$Message.error('请求失败');}})},handleReset() {this.form.searchoHostname = "";this.form.searchHostStatus = "";this.getData();},handleCreate() {const hostname = this.createHostForm.hostname;const ip = this.createHostForm.ip;const status = this.createHostForm.status;if (hostname === '') {this.$Message.error("请输入主机名称");return;}if (ip === '') {this.$Message.error("请输入IP地址");return;}if (status === '') {this.$Message.error("请选择使用状态");return;}this.isCreate = true;axios.post('http://127.0.0.1:8000/host/', this.createHostForm).then(res => {if(res.data.result) {this.createDialog=falsethis.$Message.success('添加主机成功');} else {this.$Message.error('添加主机失败');}})}},mounted() {this.getData();}}
</script>
浏览器打开URL:http://localhost:8080/#/table1
,页面渲染如下
取消选中IP地址列,则下面的table中不显示IP地址列
在主机名称
框中输入内容进行搜索
在搜索结果中,取消最后修改时间列的显示
对主机状态
进行搜索
对主机名称
和主机状态
进行联合搜索
转载于:https://www.cnblogs.com/renpingsheng/p/11266436.html
iView学习笔记(三):表格搜索,过滤及隐藏列操作相关推荐
- ag-grid 学习笔记三:ag-grid设置(定义列、选择行、复选框、设置行高列宽、置顶合计行、底部合计行、行组、客户端排序)
目录 一 定义列 二 选择行 三 设置复选框 四 设置行高列宽 五 置顶合计行 六 底部合计行 七 行组 八 客户端排序 一 定义列 表格的列有如下常用属性. 名称 说明 headerName 显示的 ...
- python3常用模块_Python学习笔记三(常用模块)
Python 学习笔记三 (常用模块) 1.os模块 os模块包装了不同操作系统的通用接口,使用户在不同操作系统下,可以使用相同的函数接口,返回相同结构的结果. os.name:返回当前操作系统名称( ...
- MySQL学习笔记(三)查询
写在前面:本篇为作者自学总结,学习内容为课堂所学和网络学习笔记汇总,对于内容引用部分在文中和文末注明. 文章仅供参考,如需深入了解,请查阅MySQL参考手册.附上下载链接: 链接:https://pa ...
- 3、Latex学习笔记之表格篇
目录 表格 1.基本结构 1.1框架 1.2行高 1.3标题 1.4标签 1.5居中 1.6表格 2.引用表格 3.常见表格类型 3.1三线表 3.2 斜线表头 3.3合并单元格 4.在线表格生成工具 ...
- K8S 学习笔记三 核心技术 Helm nfs prometheus grafana 高可用集群部署 容器部署流程
K8S 学习笔记三 核心技术 2.13 Helm 2.13.1 Helm 引入 2.13.2 使用 Helm 可以解决哪些问题 2.13.3 Helm 概述 2.13.4 Helm 的 3 个重要概念 ...
- Mysql学习笔记(二)——表格及数据的插入
Mysql学习笔记(二)--表格及数据的插入 文章目录 Mysql学习笔记(二)--表格及数据的插入 1.Mysql常用指令 2.创建表格 A.数据类型 B.完整性约束条件 3.查看表格 4.修改表格 ...
- html5表格所有属性,HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 一.表格标签 image 1.作用: 以表格形式将数据显示出来, 当数据量非常大的时候, 表格这种展现形式被认为是最为清晰的一种展现形式 2.格式 ...
- java学习笔记(三):前端miniUI控件库入门
java学习笔记(三):前端miniUI控件库入门 最近在一家公司实习学习,一上来就需要学习了解相关的前端内容--miniUI.而这个内容自己本身并没有了解学习过,上手也是遇到了不少的问题,于是想把自 ...
- J2EE学习笔记三:EJB基础概念和知识 收藏
J2EE学习笔记三:EJB基础概念和知识 收藏 EJB正是J2EE的旗舰技术,因此俺直接跳到这一章来了,前面的几章都是讲Servlet和JSP以及JDBC的,俺都懂一些.那么EJB和通常我们所说的Ja ...
最新文章
- partially initialized module ‘numpy‘ has no attribute ‘array‘ (most likely due to a circular import)
- JPA基础(一):全面阐释和精彩总结JPA
- Java 原生日志 java.util.logging
- 如何对phpcms v9的首页列表进行分页?
- C# WinfForm 控件之dev报表 XtraReport (六) 图表Charts 无内容
- C#动态生成html页
- python soup findall 第几个元素_python – 如何在BeautifulSoup中获取所有父标签的列表?...
- 信息学奥赛一本通(C++)在线评测系统——基础(一)C++语言——1101:不定方程求解
- 踩坑之路anaconda创建虚拟环境
- 统一设置网站html文件输出编码为utf-8,以解决乱码问题
- ISACA:网络安全人员短缺仍是老大难问题
- 为Python安装Redis库
- pat 1006. 换个格式输出整数 (15)
- Dubbo/ Spring Cloud 分布式事务管理 LCN方式
- 前端福利 - h5源码一键下载
- C++对数计算log
- 培根密码(Bacon)——python解密
- BJ54坐标或者XA80坐标到WGS84坐标的转换(小工具附代码)
- CVPR 2021大奖出炉!何恺明获最佳论文提名,华人四篇“最佳”!第一届Thomas S. Huang 纪念奖颁发...
- idae怎么修改背景图片
热门文章
- WebStrom里设置angular提示,可以在html中提示ts文件的内容
- springCloud五大组件--Eureka
- 【2019牛客暑期多校训练营(第八场)- G】Gemstones(栈,模拟)
- 【蓝桥杯官网训练 - 历届试题】对局匹配(dp,思维,取模)
- 【51nod - 1108】距离之和最小 V2(曼哈顿距离,中位数性质)
- 详解3D点云分割网络 Cylindrical and Asymmetrical 3D Convolution Networksfor LiDAR Segmentation
- python判断语句入门教程_Python中的条件判断语句基础学习教程
- Android开发(4) | 系统权限、MediaPlayer类 和 VideoView类 的应用——播放多媒体文件
- leetcode设计链表,非常工整的实现你值得拥有
- PaperNotes(9)-Learning deep energy model: contrastive divergence vs. Amortized MLE