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>
複製代碼
相關文章
- 1. Handsontable的前端分頁與數據庫分頁
- 2. 數據分頁
- 3. sqlite數據庫數據的分頁
- 4. sqlserver的數據庫分頁
- 5. 65、salesforce的數據分頁
- 6. sql 數據分頁
- 7. sql數據分頁
- 8. 數據庫分頁
- 9. Handsontable 的數據保存(增刪改查+導出excel)
- 10. 使用react-handsontable
- 更多相關文章...
- • SQLite 分離數據庫 - SQLite教程
- • HTML 頁面顯示 XML 數據 - XML 教程
- • Flink 數據傳輸及反壓詳解
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. Handsontable的前端分頁與數據庫分頁
- 2. 數據分頁
- 3. sqlite數據庫數據的分頁
- 4. sqlserver的數據庫分頁
- 5. 65、salesforce的數據分頁
- 6. sql 數據分頁
- 7. sql數據分頁
- 8. 數據庫分頁
- 9. Handsontable 的數據保存(增刪改查+導出excel)
- 10. 使用react-handsontable