5.Ext JS actioncolumn动态加载图标/提示

本文介绍了如何在ExtJS中配置表格的操作列,包括图标加载和提示加载的函数实现,展示了具体的代码示例。
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.youkuaiyun.com/inforstack/article/details/54237726

官网介绍

图标加载

getClass : Function  

    A function which returns the CSS class to apply to the icon image.  

    Parameters  
        v : Object  
        The value of the column's configured field (if any).  

        metadata : Object  
        An object in which you may set the following attributes:  

            css : String  
            A CSS class name to add to the cell's TD element.  

            attr : String  
            An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').  

        r : Ext.data.Model  
        The Record providing the data.  

        rowIndex : Number  
        The row index.  

        colIndex : Number  
        The column index.  

        store : Ext.data.Store  
        The Store which is providing the data Model.  

提示加载

getTip : Function

A function which returns the tooltip string for any row.
Parameters

    v : Object
    The value of the column's configured field (if any).

    metadata : Object
    An object in which you may set the following attributes:

        css : String
        A CSS class name to add to the cell's TD element.

        attr : String
        An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').

    r : Ext.data.Model
    The Record providing the data.

    rowIndex : Number
    The row index.

    colIndex : Number
    The column index.

    store : Ext.data.Store
    The Store which is providing the data Model.


项目实战

text : "操作",
xtype:'actioncolumn',
sortable : false,
width : 190,
items : [{
	handler : "projectFavorite",
	name : 'projectFavorite',
	getClass : function (v, metadata, r, rowIndex, colIndex, store) {
		if (me.userType == '20') {
			if (r.data.partaked){ 
				return "x-item-disabled x-fa fa-heart";
			} else {
				return r.data.favorite == true ? "x-fa fa-heart" : "x-fa fa-heart-o";
			}
		}
	},
	getTip : function (v, metadata, r, rowIndex, colIndex, store) {
		if (me.userType == '20') {
			return r.data.favorite == true ? "取消关注" : "关注";
		}
	}
}]


<template> <!-- 异常统计 --> <div class="abnormal-statistics"> <tableFormworkPage> <template v-slot:btnBox> <import-download-document :exportParams="exportParams" :importParams="importParams" :exportData="exportData"> <a-button slot="export" icon="upload" type="primary" class="mgr10">{{ $t('导出') }}</a-button> </import-download-document> </template> <template v-slot:serchBox> <div class="searchBox"> <div class="searchBody"> <div class="searchInputBox"> <div class="searchInput"> <div class="type-tabs base-flex-align"> <div class="tabs-item" :class="item.value === tabActive ? 'tabs-item-active' : ''" v-for="item in tabs" :key="item.value" @click="onTabEvent(item.value)" > {{ item.name }} </div> </div> <div class="searchInput"> <a-month-picker :allowClear="false" format="YYYY-M" v-model="searchData.dateTime" v-if="tabActive == 0" :placeholder="$t('请选择月份')" /> <a-date-picker :allowClear="false" :open="open" @openChange="openYearDatePicker" v-else v-model="searchData.dateTime" mode="year" :placeholder="$t('请选择年份')" format="YYYY" @panelChange="onSearchDateEvent" /> </div> </div> </div> <div class="searchButton"> <a-button type="primary" @click="onSearch"> {{ $t('common.scf.btn.search') }} </a-button> <!-- <a-button @click="onReset"> {{ $t('common.scf.btn.reset') }} </a-button> --> </div> </div> </div> </template> <template v-slot:tableBox> <div class="table-card"> <a-table :scroll="{ x: '100%', y: tableHeight }" :bordered="false" :columns.sync="columns" :dataSource="tableData" :pagination="false" rowKey="detector_code" > </a-table> </div> </template> <template v-slot:paginationBox> <!-- 分页 --> <div> <my-pagination style="padding: 0" :showSizeChanger="true" :pageIndex.sync="pagination.currentPage" @changePage="changePage" :pageSize="pagination.pageSize" :total="pagination.totalRows" @onShowSizeChange="onShowSizeChange" v-if="tableData.length" ></my-pagination> </div> </template> </tableFormworkPage> </div> </template> <script> import factory from '../factory' import myPagination from '@/components/scfComponents/paginationFormwork/myPagination' import tableFormworkPage from '@/components/scfComponents/tableFormwork/tableFormworkPage' import importDownloadDocument from '../../../components/importDownloadDocument.vue' export default { components: { tableFormworkPage, myPagination, importDownloadDocument, }, data() { return { tableHeight: 0, searchData: { analysisType: 'MONTH', dateTime: moment(), }, tabActive: 0, open: false, baseColumns: [ { key: 'departmen_name', title: this.$t('所属部门'), dataIndex: 'department_name', ellipsis: true, resizable: true, minWidth: 100, }, { key: 'detector_name', title: this.$t('设备名称'), dataIndex: 'detector_name', ellipsis: true, resizable: true, minWidth: 100, }, { key: 'detector_code', title: this.$t('设备编号'), dataIndex: 'detector_code', ellipsis: true, resizable: true, minWidth: 100, }, ], dynamicColumns: [], actionColumn: [ { key: 'rowTotal', title: this.$t('总计'), dataIndex: 'rowTotal', ellipsis: true, resizable: true, minWidth: 100, }, ], columns: [], tableData: [], pagination: { pageSize: 10, currentPage: 1, totalRows: 0, }, importParams: { isShowImport: false, }, } }, props: { companyInfo: { type: Object, default: {}, }, }, computed: { tabs() { return [ { name: this.$t('月'), value: 0 }, { name: this.$t('年'), value: 1 }, ] }, exportParams() { const exportUrl = this.tabActive == 0 ? 'abnormalAnalysis/monthInfo' : 'abnormalAnalysis/yearInfo' return { isExtract: true, isShowExport: true, exportUrl, } }, exportData() { const dateFormat = this.tabActive == 0 ? 'YYYY-M' : 'YYYY' return { analysisType: this.searchData.analysisType, value: this.searchData.dateTime.format(dateFormat), deptIdListSelect: [1, 2], // 选中部门Id列表 } }, }, created() { this.getTableData() }, mounted() { this.tableHeight = 0 this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48 window.onresize = () => { this.tableHeight = 0 this.tableHeight = document.getElementsByClassName('tableBox')[0].offsetHeight - 48 } }, methods: { onTabEvent(key) { if (key != this.tabActive) { this.tabActive = key this.searchData.analysisType = key == 0 ? 'MONTH' : 'YEAR' } this.getTableData() }, onSearchDateEvent(val) { this.searchData.dateTime = val this.open = false }, openYearDatePicker(status) { this.open = status }, // 搜索 onSearch() { this.pagination.currentPage = 1 this.getTableData() }, // 获取表格数据 async getTableData() { try { const dateFormat = this.tabActive == 0 ? 'YYYY-M' : 'YYYY' const dateValue = this.searchData.dateTime.format(dateFormat) const params = { analysisType: this.searchData.analysisType, value: dateValue, deptIdListSelect: [1, 2], page: this.pagination.currentPage, pageSize: this.pagination.pageSize, } console.log(params, 'paramsparamsparamsparams') const apiMap = { 0: factory.getMonthInfo, 1: factory.getYearInfo } const apiMethod = apiMap[this.tabActive] const res = await apiMethod(params) if (res && res.success) { let headerData = res.data.headers || [] this.dynamicColumns = headerData.map(item => ({ title: item.headerName, dataIndex: item.headerKey, ellipsis: true, resizable: true, minWidth: 100, width: 100, })) this.columns = [...this.baseColumns, ...this.dynamicColumns, ...this.actionColumn] this.tableData = res.data.data.pageData || [] this.pagination.totalRows = res.data.data.totalCount || 0 } else { this.columns = [...this.baseColumns, ...this.dynamicColumns, ...this.actionColumn] } } catch (error) { this.columns = [...this.baseColumns, ...this.dynamicColumns, ...this.actionColumn] this.$message.error(error) } }, // 分页 changePage(currentPage) { this.pagination.currentPage = currentPage this.getTableData() }, // 每页条数发生变化 onShowSizeChange(pageSize) { this.pagination.currentPage = 1 this.pagination.pageSize = pageSize this.getTableData() }, }, } </script> <style lang="less" scoped> .abnormal-statistics { width: 100%; height: 100%; box-sizing: border-box; position: relative; .type-tabs { margin-right: 4px; .tabs-item { padding: 0 18px; line-height: 30px; border: 1px solid #e9ebee; cursor: pointer; font-size: 14px; color: #fff; margin-right: -1px; &:first-child { border-radius: 3px 0 0 3px; } &:last-child { border-radius: 0 3px 3px 0; } &-active { color: #1c79f4; border: 1px solid #1c79f4; background: rgba(28, 121, 244, 0.1); z-index: 2; } } } } </style> 代码评审
最新发布
07-29
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值