handsontable的數據分頁

看到評論區有朋友問我怎麼作分頁,我這裏貼一下我以前作的組件,以及它的調用方法。css

<!--
    id: 選填,沒有得話給隨機id
    settting: handsontable得配置,其中必填data選項
-->

<template>
    <div style="height: 100%;width: 100%;">
        <div :id="id"></div>
    </div>
</template>
<script>
    import Handsontable from "handsontable-pro"
    import 'handsontable-pro/dist/handsontable.full.css'
    import zhCN from 'handsontable-pro/languages/zh-CN';
    import tools from '@/utils/scan/tools'
    import "@/assets/js/chosen.jquery.min";
    import "@/assets/js/handsontable-chosen-editor";
    import '@/assets/css/chosen.css'
    export default {
        name: 'handsontableComponents',
        props: {
            id: {
                type: String,
                default: function createRandomId() {
                    return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
                }
            },
            // settings: {//必填
            //   type: Object
            // }
        },
        data() {
            return {
                hot: null,
                filtersArr: [],
                data: [],
                deepArr: [], //刪除存儲數組
            }
        },
        created() {},
        mounted() {
            // console.log(handsontable)
            // this.init()
        },
        methods: {
            getElement() {
                return {
                    width: document.getElementById(this.id).clientWidth,
                    height: document.getElementById(this.id).parentNode.clientHeight
                }
            },
            // afterDocumentKeyDown(e) {
            //     this.$emit("keyDown", e)
            // },
            trimmedRows() {
                var plugin = this.hot.getPlugin("trimRows").trimmedRows;
                let dataLength = this.hot.getSourceData().length;
                let dataArr = new Array();
                for (let i = 0; i < dataLength; i++) {
                    dataArr.push(i);
                }
                if (plugin.length <= 0) {
                    dataArr = undefined;
                } else {
                    dataArr = this.array_diff(dataArr, plugin);
                }
                this.filtersArr = dataArr;
                return dataArr || [];
            },
            //去除數組中相同的元素
            array_diff(a, b) {
                for (var i = 0; i < b.length; i++) {
                    for (var j = 0; j < a.length; j++) {
                        if (a[j] == b[i]) {
                            a.splice(j, 1);
                            j = j - 1;
                        }
                    }
                }
                return a;
            },
            //右鍵刪除
            removeFm(index, amout) {
                let delData = tools.differenceArr(this.data, this.deepArr)
                this.$emit("delete", delData)
            },
            //數據發生修改後(失焦)
            tdChange(changeData, source) {
                this.$emit("change", changeData, source)
            },
            /**
             * 獲取被排序後的數組
             *
             * @param changeData 發生改變的數據
             * @param source     數組
             *
             * @return array     通過排序後或者通過搜索後的數組
             */
            getParam(changeData, source, hot, trimmedArr) {
                let param = "";
                //被篩選事後的數組
                // let trimmedArr = this.trimmedRows();
                //是否啓用了排序
                let isSort = hot.getPlugin("columnSorting").isSorted();
                if (trimmedArr.length && isSort) {
                    //排序後的數組
                    let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
                    param = changeData.map(item => {
                        return hot.getSourceDataAtRow(trimmedArr[sortArr[item[0]]]);
                    });
                } else if (isSort) {
                    //排序後的數組
                    let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
                    param = changeData.map(item => {
                        return hot.getSourceDataAtRow(sortArr[item[0]]);
                    });
                } else if (trimmedArr.length) {
                    param = changeData.map(item => {
                        return hot.getSourceDataAtRow(trimmedArr[item[0]]);
                    });
                } else {
                    param = changeData.map(item => {
                        return hot.getSourceDataAtRow(item[0]);
                    });
                }
                return param;
            },
            /**
             * 
             * @param {handsontable修改參數} changeData 
             * @param {*} source 
             * @param {handsontabele實例} hot 
             * @param {排序數組} trimmedArr
             * 
             * @return 修改數值的前一個對象 
             */
            getUnshiftParam(changeData, source, hot, trimmedArr) {
                //是否啓用了排序
                let isSort = hot.getPlugin("columnSorting").isSorted();
                if (trimmedArr.length && isSort) {
                    //排序後的數組
                    let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
                    return hot.getSourceDataAtRow(trimmedArr[sortArr[changeData[0][0] - 1]])
                } else if (isSort) {
                    //排序後的數組
                    let sortArr = hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
                    return hot.getSourceDataAtRow(sortArr[changeData[0][0] - 1])
                } else if (trimmedArr.length) {
                    //進行了篩選
                    return hot.getSourceDataAtRow(trimmedArr[changeData[0][0] - 1])
                } else {
                    //沒有進行排序和篩選
                    return hot.getSourceDataAtRow(changeData[0][0] - 1);
                }
            },
            init(settings) {
                var hotElement = document.getElementById(this.id)
                this.data = settings.data
                this.deepArr = this.deepCopy(settings.data)
                var hotSettings = Object.assign({
                    // width: this.getElement().width,
                    rowHeaders: true,
                    colHeaders: true,
                    filters: true,
                    height: this.getElement().height,
                    columnSorting: true, //添加排序
                    sortIndicator: true, //添加排序
                    renderAllRows: true,
                    autoColumnSize: true,
                    language: "zh-CN",
                    manualColumnResize: true,
                    manualColumnMove: true,
                    dropdownMenu: [
                        "filter_by_condition",
                        "filter_action_bar"
                    ],
                    afterOnCellMouseDown: this.tableDown, //鼠標單擊
                    afterChange: this.tdChange, //修改後
                    afterRemoveRow: this.removeFm, //右鍵刪除
                    afterFilter: this.trimmedRows, //排序
                    // afterDocumentKeyDown: this.afterDocumentKeyDown, //鼠標單擊
                }, settings);
                hotSettings.maxRows = settings.maxRows
                if (!!this.hot && this.hot.hasOwnProperty('destroy')) {
                    this.hot.destroy();
                    this.hot = null
                }
                this.hot = new Handsontable(hotElement, hotSettings);
                // this.hot.view.wt.update('onCellDblClick', (row,cell) => { 
                //     //Get editor and begin edit mode on current cell (maintain current double click functionality) 
                //     var activeEditor = this.hot.getActiveEditor(); 
                //     console.log(this.hot,activeEditor)
                //     activeEditor.beginEditing(); 
                //     this.onDblClick(activeEditor,row,cell)
                //     //Do whatever you want... 
                // }); 
                let pro = document.getElementById("hot-display-license-info");
                if (!!pro) {
                    pro.parentNode.removeChild(pro);
                }
                return this.hot
            },
            //雙擊
            // onDblClick(activeEditor,row,cell){
            //     console.log(111,activeEditor,row,cell)
            // },
            tableDown(el, rowArr) {
                if (rowArr.row < 0) {
                    return false
                }
                let filter = this.filtersArr;
                //被篩選事後的數組
                let trimmedArr = this.trimmedRows();
                //是否啓用了排序
                let isSort = this.hot
                    .getPlugin("columnSorting")
                    .isSorted();
                let myHotMainArr = this.hot.getSourceData()
                // debugger
                if (trimmedArr.length && isSort) {
                    let sortArr = this.hot.getPlugin("columnSorting")
                        .rowsMapper.__arrayMap;
                    let infos = myHotMainArr[trimmedArr[sortArr[rowArr.row]]];
                    this.getInfors(infos, rowArr);
                } else if (isSort) {
                    //排序後的數組
                    let sortArr = this.hot.getPlugin("columnSorting").rowsMapper.__arrayMap;
                    let infos = myHotMainArr[sortArr[rowArr.row]];
                    this.getInfors(infos, rowArr);
                } else if (trimmedArr.length) {
                    let infos = myHotMainArr[trimmedArr[rowArr.row]];
                    this.getInfors(infos, rowArr);
                } else {
                    let infos = myHotMainArr[rowArr.row];
                    this.getInfors(infos, rowArr);
                }
            },
            getInfors(obj, row) {
                this.$emit("mouseDown", obj, row)
            },
            //工具函數淺複製深拷貝,防止共用存儲空間
            deepCopy(obj) {
                var out = [],
                    i = 0,
                    len = obj.length;
                for (; i < len; i++) {
                    if (obj[i] instanceof Array) {
                        out[i] = this.deepCopy(obj[i]);
                    } else out[i] = obj[i];
                }
                return out;
            }
        }
    }
</script>
<style lang="scss">
    .htDropdownMenu:not(.htGhostTable) {
        z-index: 4060;
    }
</style>


複製代碼

tools.js中有一個調用差值的方法:

//取兩個數組的差值
tools.differenceArr = (a, b) => {
    return a.concat(b).filter(v => !a.includes(v) || !b.includes(v))
}
複製代碼

以及父級組件的調用方法:

<template>
    <div>
        <h4>開發中...</h4>
        <div style="height: 300px;width: 100%;">
            <handsontableComponent ref="handson"/>
        </div>
        <pagination :page="pages" @change="changePage" />
        <!-- <button v-if="hasPermission('system:role:query')">測試權限 </button> -->
    </div>
</template>
<script>
import handsontableComponent from "@/components/common/handsontable"
import pagination from "@/components/common/myPagination"
export default {
    name: 'Dasboard',
    props: [],
    data() {
        return {
            pages: {
                size: 50,
                sizes: [10, 30, 50, 100, 150, 200],
                total: 100,
                currentPage: 0
            }
        }
    },
    components: {
        handsontableComponent,
        pagination,
    },
    computed: {},
    methods: {
        changePage() {
            this.init()
        },
        init() {
            let data = 0
            if (this.pages.currentPage == 1) {
                data = [['', 'Tesla', 'Nissan', 'Toyota', 'Honda'],
                ['2017', 10, 11, 12, 13],
                ['2018', 20, 11, 14, 13],
                ['2019', 30, 15, 12, 13],
                ['2020', '', '', '', ''],
                ['2021', '', '', '', '']]
            } else {
                data = [
                    ['21', '22', '23', '24', '25']
                ]
            }
            let headers = ["Brand", "Model", "Code name", "Country of origin", "Rank"]
            let setting  = {
                data: data,
                colHeaders: headers,
                // columns: showTypes(header),
                rowHeights: 30,
                maxRows: data.length,
                contextMenu: {
                    items: {
                        remove_row: {
                            name: "刪除點位"
                        }
                    }
                }
            }
            this.$refs.handson.init(setting)
        }
    },
    created() {
        // console.log('--------------------- index created')
    },
    mounted() {
        this.init()
    }
}
</script>
<style lang='scss' scoped>
</style>
複製代碼
相關文章
相關標籤/搜索