|
@@ -25,7 +25,10 @@
|
|
|
// }
|
|
|
},
|
|
|
data() {
|
|
|
- return {}
|
|
|
+ return {
|
|
|
+ hot: null,
|
|
|
+ filtersArr: []
|
|
|
+ }
|
|
|
},
|
|
|
created() {},
|
|
|
mounted() {
|
|
@@ -39,6 +42,110 @@
|
|
|
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;
|
|
|
+ },
|
|
|
+ //右键删除
|
|
|
+ romoveFm(index, amout) {
|
|
|
+ console.log(index, amout)
|
|
|
+ this.$emit("delete", index, amout)
|
|
|
+ },
|
|
|
+ //数据发生修改后(失焦)
|
|
|
+ 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) {
|
|
|
console.log("init")
|
|
|
var hotElement = document.getElementById(this.id)
|
|
@@ -58,14 +165,54 @@
|
|
|
dropdownMenu: [
|
|
|
"filter_by_condition",
|
|
|
"filter_action_bar"
|
|
|
- ]
|
|
|
+ ],
|
|
|
+ afterOnCellMouseDown: this.tableDown, //鼠标单击
|
|
|
+ afterChange: this.tdChange, //修改后
|
|
|
+ afterRemoveRow: this.romoveFm, //右键删除
|
|
|
+ afterFilter: this.trimmedRows, //排序
|
|
|
+ afterDocumentKeyDown: this.afterDocumentKeyDown, //鼠标单击
|
|
|
}, settings);
|
|
|
console.log(hotSettings, settings)
|
|
|
- var hot = new Handsontable(hotElement, hotSettings);
|
|
|
+ this.hot = new Handsontable(hotElement, hotSettings);
|
|
|
let pro = document.getElementById("hot-display-license-info");
|
|
|
if (!!pro) {
|
|
|
pro.parentNode.removeChild(pro);
|
|
|
}
|
|
|
+ return this.hot
|
|
|
+ },
|
|
|
+ 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)
|
|
|
}
|
|
|
}
|
|
|
}
|