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 models

from .utils.parse_time import parse_datetime_to_string

HOST_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 views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^host/$', views.host_list),
]

api_test/app01/views.py文件內容

import json

from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt

from .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=false
                        this.$Message.success('添加主機成功');
                    } else {
                        this.$Message.error('添加主機失敗');
                    }
                })
            }
        },
        mounted() {
            this.getData();
        }
    }
</script>

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

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

在主機名稱框中輸入內容進行搜索

在搜索結果中，取消最后修改時間列的顯示

對主機狀態進行搜索

對主機名稱和主機狀態進行聯合搜索