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，页面渲染如下

1133627-20190729205341177-572189586.png

取消选中IP地址列，则下面的table中不显示IP地址列

1133627-20190729205349653-1619515044.png

在主机名称框中输入内容进行搜索

1133627-20190729205357265-1984613114.png

在搜索结果中，取消最后修改时间列的显示

1133627-20190729205423010-1320165936.png

对主机状态进行搜索

1133627-20190729205431089-583257635.png

对主机名称和主机状态进行联合搜索

1133627-20190729205441944-1507993921.png

转载于:https://www.cnblogs.com/renpingsheng/p/11266436.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/448082.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Jenkins自动编译库并上传服务器

Jenkins自动编译库并上传服务器

Jenkins自动编译库并上传服务器 github地址 首先添加 git 地址&#xff1a; 再添加定时构建&#xff0c;每天夜里构建一次&#xff1a; 执行 shell 脚本进行构建 cd networklayerecho "build json x86" cmake -S . -B cmake-build-release -DCMAKE_BUILD_TYPERele…
阅读更多...
解决：The “data“ option should be a function that returns a per-instance value in component definitions

解决：The “data“ option should be a function that returns a per-instance value in component definitions

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 只是想定义一个变量&#xff0c;方便页面上调用 。 报错&#xff1a; The "data" option should be a function that re…
阅读更多...
gdb 调试 TuMediaService

gdb 调试 TuMediaService

gdb 调试 TuMediaService github地址 起因 首先需要有 armgdb 环境运行 ./armgdb ./TuMediaService 进入 gdb 模式b hi3531_trcod_interface.cc:98 打断点r 运行程序print this->vdec_config_path_ 打印关键值 在这里我们关注的值已经被修改&#xff0c;由于程序中没有刻…
阅读更多...
PyQt安装和环境配置

PyQt安装和环境配置

PyQt安装和环境配置 github地址 首先安装Pycharm 新建一个空的 python 工程&#xff0c;找到 setting 安装第三方模块 PyQT5 , 点加号&#xff0c;先安 PyQT5 , 再安装 pyqt5-tools &#xff0c;后面包含 qtdesinger 以上模块都安完&#xff0c;设置扩展工具的参数找到 sett…
阅读更多...
HZOJ 大佬(kat)

HZOJ 大佬(kat)

及其水水水的假期望&#xff08;然而我已经被期望吓怕了……&#xff09;。 数据范围及其沙雕导致丢掉5分…… 因为其实每天的期望是一样的&#xff0c;考虑分开。 f[i][j]表示做k道题&#xff0c;难度最大为j的概率。 则f[i][j](f[i-1][j])*(j-1)*temq[j]*tem;q为前缀和&#…
阅读更多...
F12 界面：请求响应内容 Preview 和 Response 不一致、接口返回数据和 jsp 解析到的内容不一致

F12 界面：请求响应内容 Preview 和 Response 不一致、接口返回数据和 jsp 解析到的内容不一致

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 情况描述&#xff1a; 我有一个接口只是简单的查询列表数据并返回给前端作一个表格展示。 接口返回的 userId 数据为&#xff1a;…
阅读更多...
为什么新手开车起步总是熄火

为什么新手开车起步总是熄火

最近&#xff0c;深圳市民陈小姐年前考完驾照就买了一辆新车&#xff0c;在过完年后上班的第一天&#xff0c;几乎每次等红绿灯的路口起步时汽车都会熄火&#xff0c;导致身后的司机非常不满狂按车喇叭催她“别挡路”&#xff0c;陈小姐自己也急得冒汗。就像陈小姐这样的新手很…
阅读更多...
MSCRM日志配置

MSCRM日志配置

之前有很多人问我在MSCRM上日志怎么做&#xff0c;具体的如&#xff08;登录日志&#xff0c;操作日志&#xff09;。个人认为操作日志确实比较难做&#xff08;不过我可以给一个思路可以用触发器或者plugin来实现&#xff0c;不过比较麻烦&#xff0c;对系统压力也比较大&…
阅读更多...
数据结构——数组

数据结构——数组

数组 github地址 数组基础 数组最大的有点&#xff1a;快速查询。索引快数组最好应用于 “索引有语义” 的情况但并非所有有语义的索引都适用于数组&#xff08;身份证号&#xff09;数组也可以处理 ”索引没有语义“ 的情况 封装数组类 数组类该具备的功能&#xff1a;增…
阅读更多...
十分钟入门 RocketMQ

十分钟入门 RocketMQ

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 本文首先引出消息中间件通常需要解决哪些问题&#xff0c;在解决这些问题当中会遇到什么困难&#xff0c;Apache RocketMQ作为阿里开源的…
阅读更多...
使用delegate类型设计自定义事件

使用delegate类型设计自定义事件

在C#编程中&#xff0c;除了Method和Property&#xff0c;任何Class都可以有自己的事件&#xff08;Event&#xff09;。定义和使用自定义事件的步骤如下&#xff1a; &#xff08;1&#xff09;在Class之外定义一个delegate类型&#xff0c;用于确定事件程序的接口 &#xff0…
阅读更多...
UTC Time

UTC Time

整个地球分为二十四时区&#xff0c;每个时区都有自己的本地时间。在国际无线电通信场合&#xff0c;为了统一起见&#xff0c;使用一个统一的时间&#xff0c;称为通用协调时(UTC, Universal Time Coordinated)。UTC与格林尼治平均时(GMT, Greenwich Mean Time)一样&#xff0…
阅读更多...
解决：Unknown custom element: ＜myData＞ - did you register the component correctly? For recursive compon

解决：Unknown custom element: ＜myData＞ - did you register the component correctly? For recursive compon

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 引用一个组件报错&#xff1a; Unknown custom element: <myData> - did you register the component correctly?For recursi…
阅读更多...
无处不在的container_of

无处不在的container_of

无处不在的container_of linux 内核中定义了一个非常精炼的双向循环链表及它的相关操作。如下所示&#xff1a; struct list_head {struct list_head* next, * prev; };ubuntu 12.04 中这个结构定义在 /usr/src/linux-headers-3.2.0-24-generic/include/linux/types.h 中&…
阅读更多...
程序员学习能力提升三要素

程序员学习能力提升三要素

摘要&#xff1a;IT技术的发展日新月异&#xff0c;新技术层出不穷&#xff0c;具有良好的学习能力&#xff0c;能及时获取新知识、随时补充和丰富自己&#xff0c;已成为程序员职业发展的核心竞争力。本文中&#xff0c;作者结合多年的学习经验总结出了提高程序员学习能力的三…
阅读更多...
AMD Mantle再添新作，引发下代GPU架构猜想

AMD Mantle再添新作，引发下代GPU架构猜想

摘要&#xff1a;今年秋天即将发布的《希德梅尔文明&#xff1a;太空》将全面支持AMD Mantle API&#xff0c;如此强大的功能背后离不开强大的CPU、GPU支持。上周AMD爆出了下一代海盗岛R9 300系列&#xff0c;据网友猜测海盗岛家族可能用上速度更快的HBM堆栈式内存。 小伙伴们…
阅读更多...
VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据

VUE : 双重 for 循环写法、table 解析任意 list 、万能表格组件、解析一维数组、动态生成 table 所有数据

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.需求&#xff1a; 我想要一个 table 组件能在实际调用时动态生成所有的 tr 、td 。 后端返回的只是一个 list &#xff0c; 前端页…
阅读更多...
超详细 图解 ： IntelliJ IDEA 逆向生成 JAVA 实体类

超详细 图解 ： IntelliJ IDEA 逆向生成 JAVA 实体类

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1.配置数据库,&#xff0c;这里连接的是mysql。 2.填写 连接数据库的信息&#xff0c;填写完成后可以点击Test Connection,测试一下是否…
阅读更多...
leetcode练习——数组篇（1）（std::ios::sync_with_stdio(false);std::cin.tie(nullptr);）

leetcode练习——数组篇（1）（std::ios::sync_with_stdio(false);std::cin.tie(nullptr);）

题号1. 两数之和&#xff1a; 给定一个整数数组 nums 和一个目标值 target&#xff0c;请你在该数组中找出和为目标值的那 两个 整数&#xff0c;并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是&#xff0c;你不能重复利用这个数组中同样的元素。 示例: …
阅读更多...
intellij idea 中去除 @Autowired 注入对象带来的红色下划线报错提示

intellij idea 中去除 @Autowired 注入对象带来的红色下划线报错提示

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 PS&#xff1a; 有 2 种方法&#xff0c;第 2 种方法更简单&#xff0c;在此谢谢好心友人的评论。 方法1&#xff1a; idea中通过Autow…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023