handsontable+vue+ 自定义多选

js
export let customDropdownRenderer = (instance, td, row, col, prop, value, cellProperties) => {// let selectedId// console.log('答应optionsList', instance, td, row, col, prop, value, cellProperties)let optionsList = cellProperties.chosenOptions.dataif (typeof optionsList === 'undefined' || typeof optionsList.length === 'undefined' || !optionsList.length) {Handsontable.cellTypes.text.renderer(instance, td, row, col, prop, value, cellProperties)return td}//let values = (value + '').split(',')value = []for (var index = 0; index < optionsList.length; index++) {if (values.indexOf(optionsList[index].id + '') > -1) {// selectedId = optionsList[index].idvalue.push(optionsList[index].label)}}value = value.join(', ')Handsontable.cellTypes.text.renderer(instance, td, row, col, prop, value, cellProperties)// td.innerText = valuesreturn td
}<hot-table :settings="hotSettings" :data="hotData" ref="table">
</hot-table>class Myselect extends TextEditor {// const CustomEditor = Handsontable.editors.BaseEditor.prototype.extend()// ...rest of the editor code// console.log('触发')// eslint-disable-next-line no-useless-constructorconstructor (props) {super(props)}// let MySelectEditor = Handsontable.editors.TextEditor.prototype.extend()prepare (row, col, prop, td, originalValue, cellProperties) {super.prepare(row, col, prop, td, originalValue, cellProperties)this.options = {}console.log('答应prepare', originalValue)if (this.cellProperties.chosenOptions) {this.options = $.extend(this.options, cellProperties.chosenOptions)}this.originalValue = originalValuecellProperties.chosenOptions = $.extend({}, cellProperties.chosenOptions)}createElements () {let $ = window.$super.createElements()// this.$body = $(document.body)this.TEXTAREA = document.createElement('select')// Handsontable copy paste plugin calls this.TEXTAREA.select()this.TEXTAREA.select = function () { }// this.TEXTAREA.setAttribute('type', 'text');this.$textarea = $(this.TEXTAREA)Handsontable.dom.addClass(this.TEXTAREA, 'handsontableInput')this.textareaStyle = this.TEXTAREA.stylethis.textareaStyle.width = 0this.textareaStyle.height = 0this.TEXTAREA_PARENT = document.createElement('DIV')Handsontable.dom.addClass(this.TEXTAREA_PARENT, 'handsontableInputHolder')this.textareaParentStyle = this.TEXTAREA_PARENT.stylethis.textareaParentStyle.top = 0this.textareaParentStyle.left = 0this.textareaParentStyle.display = 'none'this.textareaParentStyle.width = '200px'this.TEXTAREA_PARENT.appendChild(this.TEXTAREA)this.instance.rootElement.appendChild(this.TEXTAREA_PARENT)let that = thisthis.instance._registerTimeout(setTimeout(function () {that.refreshDimensions()}, 0))}onChosenChanged () {let options = this.cellProperties.chosenOptionsif (!options.multiple) {this.close()this.finishEditing()}}onChosenClosed () {let options = this.cellProperties.chosenOptionsif (!options.multiple) {this.close()this.finishEditing()} else {}}onBeforeKeyDown (event) {let instance = thislet that = instance.getActiveEditor()let keyCodes = Handsontable.helper.KEY_CODESlet ctrlDown = (event.ctrlKey || event.metaKey) && !event.altKey // catch CTRL but not right ALT (which in some systems triggers ALT+CTRL)// Process only events that have been fired in the editorif (event.target.tagName !== 'INPUT') {return}if (event.keyCode === 17 || event.keyCode === 224 || event.keyCode === 91 || event.keyCode === 93) {// when CTRL or its equivalent is pressed and cell is edited, don't prepare selectable text in textareaevent.stopImmediatePropagation()return}let target = event.targetswitch (event.keyCode) {case keyCodes.ARROW_RIGHT:if (Handsontable.dom.getCaretPosition(target) !== target.value.length) {event.stopImmediatePropagation()} else {that.$textarea.trigger('chosen:close')}breakcase keyCodes.ARROW_LEFT:if (Handsontable.dom.getCaretPosition(target) !== 0) {event.stopImmediatePropagation()} else {that.$textarea.trigger('chosen:close')}breakcase keyCodes.ENTER:if (that.cellProperties.chosenOptions.multiple) {event.stopImmediatePropagation()event.preventDefault()event.stopPropagation()}breakcase keyCodes.A:case keyCodes.X:case keyCodes.C:case keyCodes.V:if (ctrlDown) {event.stopImmediatePropagation() // CTRL+A, CTRL+C, CTRL+V, CTRL+X should only work locally when cell is edited (not in table context)}breakcase keyCodes.BACKSPACE:let txt = $(that.TEXTAREA_PARENT).find('input').val()$(that.TEXTAREA_PARENT).find('input').val(txt.substr(0, txt.length - 1)).trigger('keyup.chosen')event.stopImmediatePropagation()breakcase keyCodes.DELETE:case keyCodes.HOME:case keyCodes.END:event.stopImmediatePropagation() // backspace, delete, home, end should only work locally when cell is edited (not in table context)break}}open (keyboardEvent) {this.refreshDimensions()this.textareaParentStyle.display = 'block'this.instance.addHook('beforeKeyDown', this.onBeforeKeyDown)this.$textarea.css({height: $(this.TD).height() + 4,'min-width': $(this.TD).outerWidth() - 4})// display the listthis.$textarea.hide()// make sure that list positions matches cell position// this.$textarea.offset($(this.TD).offset());let options = $.extend({}, this.options, {width: '100%',search_contains: true})if (options.multiple) {this.$textarea.attr('multiple', true)} else {this.$textarea.attr('multiple', false)}this.$textarea.empty()this.$textarea.append("<option value=''></option>")let el = nulllet originalValue = (this.originalValue + '').split(',')if (options.data && options.data.length) {for (let i = 0; i < options.data.length; i++) {el = $('<option />')el.attr('value', options.data[i].id)el.html(options.data[i].label)if (originalValue.indexOf(options.data[i].id + '') > -1) {el.attr('selected', true)}this.$textarea.append(el)}}if ($(this.TEXTAREA_PARENT).find('.chosen-container').length) {this.$textarea.chosen('destroy')}// console.log('thishtishthsi', this)this.$textarea.chosen(options)let self = thissetTimeout(function () {self.$textarea.on('change', this.onChosenChanged.bind(self))self.$textarea.on('chosen:hiding_dropdown', this.onChosenClosed.bind(self))self.$textarea.trigger('chosen:open')$(self.TEXTAREA_PARENT).find('input').on('keydown', function (e) {if (e.keyCode === Handsontable.helper.KEY_CODES.ENTER /* || e.keyCode === Handsontable.helper.KEY_CODES.BACKSPACE */) {if ($(this).val()) {e.preventDefault()e.stopPropagation()} else {e.preventDefault()e.stopPropagation()self.close()self.finishEditing()}}if (e.keyCode === Handsontable.helper.KEY_CODES.BACKSPACE) {let txt = $(self.TEXTAREA_PARENT).find('input').val()$(self.TEXTAREA_PARENT).find('input').val(txt.substr(0, txt.length - 1)).trigger('keyup.chosen')e.preventDefault()e.stopPropagation()}if (e.keyCode === Handsontable.helper.KEY_CODES.ARROW_DOWN || e.keyCode === Handsontable.helper.KEY_CODES.ARROW_UP) {e.preventDefault()e.stopPropagation()}})setTimeout(function () {self.$textarea.trigger('chosen:activate').focus()if (keyboardEvent && keyboardEvent.keyCode && Number(keyboardEvent.keyCode) !== 113) {let key = keyboardEvent.keyCodelet keyText = (String.fromCharCode((key >= 96 && key <= 105) ? key - 48 : key)).toLowerCase()$(self.TEXTAREA_PARENT).find('input').val(keyText).trigger('keyup.chosen')self.$textarea.trigger('chosen:activate')}}, 1)}, 1)}init () {Handsontable.editors.TextEditor.prototype.init.apply(this, arguments)}close () {this.instance.listen()this.instance.removeHook('beforeKeyDown', this.onBeforeKeyDown)this.$textarea.off()this.$textarea.hide()Handsontable.editors.TextEditor.prototype.close.apply(this, arguments)}getValue () {if (!this.$textarea.val()) {return ''}if (typeof this.$textarea.val() === 'object') {return this.$textarea.val().join(',')}return this.$textarea.val()}// setValue(value) {//  console.log('答应setValue', value)//   this.select.value = value;// }focus () {this.instance.listen()// DO NOT CALL THE BASE TEXTEDITOR FOCUS METHOD HERE, IT CAN MAKE THIS EDITOR BEHAVE POORLY AND HAS NO PURPOSE WITHIN THE CONTEXT OF THIS EDITOR// Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);}beginEditing (initialValue) {let onBeginEditing = this.instance.getSettings().onBeginEditingif (onBeginEditing && onBeginEditing() === false) {return}Handsontable.editors.TextEditor.prototype.beginEditing.apply(this, arguments)}finishEditing (isCancelled, ctrlDown) {this.instance.listen()return Handsontable.editors.TextEditor.prototype.finishEditing.apply(this, arguments)}
}
{tittle: '媒介',editor: Myselect,data:'fdMediaIds',renderer: customDropdownRenderer,chosenOptions: {multiple: true,data: [{id: '1',label: 'NNN'}, {id: '2',label: 'YYY'}, {id: '3',label: 'QQQ'}, {id: '4',label: 'TTT'}]},width: 150
}

代码不全但是关键配置都在这里需要的话可以看官方文档补全

通过修改里面的一些配置

Cell editor - Guide - Handsontable Documentation

关键的api 有
this.$refs.table.hotInstance.loadData(this.hotData) // 更新数据

let index = this.$refs.table.hotInstance.getDataAtRow(i) // 获取 行数据

this.hotSettings.columns[11].source = res.data.data
this.$refs.table.hotInstance.updateSettings(this.hotSettings) // 更新setting

上面大部分覆盖了大部分场景定制需求的话需要理解render和edit的写法会稍微复杂点

handsontable+vue+ 自定义多选相关推荐

Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...
vue 自定义多选框组件
自定义多选框组件 <template><div class="checkBox"><input v-model="isInherit&quo ...
Handsontable VUE+element-ui +handsontable 实现Excel复制文本到项目表格列表（基于Elemenet+handsontable）
@VUE封装handsontable(仿写Element样式)-重点查看使用方法 #Handsontable VUE+element-ui 实现Excel复制文本到项目表格列表(基于Elemenet) ...
Vue自定义组件之时间跨度选择器
时间跨度选择器该组件是个时间跨度选择器. 基于 vue自定义组件之选择器和 Vue自定义组件之日期时间范围选择器点击选框,下拉列表中有四个选项,点击自定义时间,后边会出现日期时间范围选择代码 ...
el-checkbox 自定义复选框【多选框】
1. 自定义多选框 el-checkbox; 预览: 注意: 假如有全局字体引入会影响显示效果: 去除el-checkbox__inner附加字体css font-family: not speci ...
超实用：Vue 自定义指令合集
大家好,我是漫步前面我已经分享过一篇"分享8个非常实用的Vue自定义指令"文章,里面教了大家如何使用自定义指令,以及几个使用的指令,下面这篇文章也是类似内容,希望你会喜欢.记得查 ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
vue自定义指令封装节流_Vue自定义指令封装节流函数的方法示例
节流函数是web前端开发中经常用到的一个开发技巧,在input实时搜索,滚动事件等,为了避免过多消耗性能,我们都会使用节流函数.在<JavaScript高级程序设计>一书中有这样的一个例子 ...
WPF自定义控件与样式(8)-ComboBox与自定义多选控件MultComboBox
一．前言申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 下拉选 ...

handsontable+vue+ 自定义多选

handsontable+vue+ 自定义多选相关推荐

最新文章

热门文章