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 --savesrc/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地址列
在主機名稱框中輸入內容進行搜索
在搜索結果中，取消最后修改時間列的顯示
對主機狀態進行搜索
對主機名稱和主機狀態進行聯合搜索
)
