iView學(xué)習(xí)筆記(三)：表格搜索，過(guò)濾及隱藏某列操作

1.后端準(zhǔn)備工作

環(huán)境說(shuō)明

python版本：3.6.6 Django版本：1.11.8 數(shù)據(jù)庫(kù)：MariaDB 5.5.60

新建Django項(xiàng)目，在項(xiàng)目中新建app，配置好數(shù)據(jù)庫(kù)

api_test/app01/models.py文件內(nèi)容

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("主機(jī)名", max_length=32)ip = models.CharField("IP地址", max_length=16)status = models.IntegerField("主機(jī)狀態(tài)", choices=HOST_STATUS, default=1)date = models.DateTimeField("主機(jī)添加時(shí)間", 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文件內(nèi)容

def parse_datetime_to_string(datetime_str, flag=True):"""把datetime時(shí)間轉(zhuǎn)化成時(shí)間字符串:param datetime_str: datetime生成的時(shí)間，例子：datetime.datetime.now()或者： datetime.datetime.now() - datetime.timedelta(hours=1) # 一個(gè)小時(shí)之前或者： datetime.datetime.now() - datetime.timedelta(days=1) # 一天之前:return:"""# 將日期轉(zhuǎn)化為字符串 datetime => string# 在數(shù)據(jù)庫(kù)中定義字段信息時(shí)為：models.DateTimeField(auto_now_add=True)# 查詢數(shù)據(jù)庫(kù)之后，使用此方法把查詢到的時(shí)間轉(zhuǎn)換成可用的時(shí)間字符串# when_insert__range=(an_hour_time, now_time)# an_hour_time和 now_time 都是 datetime時(shí)間字符串，查詢兩個(gè)datetime時(shí)間字符串之間的數(shù)據(jù)if flag:return datetime_str.strftime('%Y-%m-%d %H:%M:%S')else:return datetime_str.strftime('%Y-%m-%d')

api_test/urls.py文件內(nèi)容

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文件內(nèi)容

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)

這里前端向后端發(fā)送POST請(qǐng)求時(shí)，后端沒有執(zhí)行csrftoken驗(yàn)證，前端獲取csrftoken,后端進(jìn)行csrftoken驗(yàn)證不在本文示例之內(nèi)

2.前端準(zhǔn)備工作

首先新建一個(gè)項(xiàng)目，然后引入iView插件，配置好router

npm安裝iView

npm install iview --save cnpm install iview --save

src/main.js文件內(nèi)容

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文件內(nèi)容

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文件內(nèi)容

<template><div style="padding:32px 64px"><h1>在外部進(jìn)行表格的搜索，過(guò)濾，隱藏某列的操作</h1><br><br><Form inline :label-width="80"><FormItem label="主機(jī)名稱："><Input v-model="form.searchoHostname" placeholder="請(qǐng)輸入" style="width:200px;"/></FormItem><FormItem label="使用狀態(tài)："><Select v-model="form.searchHostStatus" placeholder="請(qǐng)選擇" style="width:200px"><Option :value="1">運(yùn)行中</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">主機(jī)名稱</Checkbox><Checkbox :label="1">IP 地址</Checkbox><Checkbox :label="2">使用狀態(tài)</Checkbox><Checkbox :label="3">最后修改時(shí)間</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="新建主機(jī)"><Form><FormItem><Input v-model="createHostForm.hostname" placeholder="主機(jī)名稱"/></FormItem><FormItem><Input v-model="createHostForm.ip" placeholder="IP 地址"/></FormItem><FormItem><Select v-model="createHostForm.status" placeholder="使用狀態(tài)"><Option :value="1">運(yùn)行中</Option><Option :value="2">異常</Option></Select></FormItem></Form><Button slot="footer" type="primary" @click="handleCreate">創(chuàng)建</Button></Modal></div> </template><script>import axios from 'axios';export default {data() {return {tableData: [],loading: false,columns: [{title: "主機(jī)名稱",key: 'hostname',},{title: "IP地址",key: 'ip',},{title: "等級(jí)",key: 'status',render: (h, {row}) => {if (row.status === 1) {return h('Badge', {props: {status: 'processing',text: '運(yùn)行中'}})} else if (row.status === 2) {return h('Badge', {props: {status: 'error',text: '異常'}})}}},{title: "最后修改時(shí)間",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('請(qǐng)求失敗');}})},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("請(qǐng)輸入主機(jī)名稱");return;}if (ip === '') {this.$Message.error("請(qǐng)輸入IP地址");return;}if (status === '') {this.$Message.error("請(qǐng)選擇使用狀態(tài)");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('添加主機(jī)成功');} else {this.$Message.error('添加主機(jī)失敗');}})}},mounted() {this.getData();}} </script>

瀏覽器打開URL：http://localhost:8080/#/table1，頁(yè)面渲染如下

取消選中IP地址列，則下面的table中不顯示IP地址列

在主機(jī)名稱框中輸入內(nèi)容進(jìn)行搜索

在搜索結(jié)果中，取消最后修改時(shí)間列的顯示

對(duì)主機(jī)狀態(tài)進(jìn)行搜索

對(duì)主機(jī)名稱和主機(jī)狀態(tài)進(jìn)行聯(lián)合搜索

轉(zhuǎn)載于:https://www.cnblogs.com/renpingsheng/p/11266436.html

總結(jié)

以上是生活随笔為你收集整理的iView学习笔记(三)：表格搜索，过滤及隐藏列操作的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。