handsontable多选下拉框编辑器扩展
一、效果截图
二、文件引用
多选下拉框扩展自handsontable的BaseEditor。
多选下拉框组件由两个文件构成，
- 一个下拉框样式表MultiSelect.css
- 一个组件实现脚本MultiSelect.js
使用时引用这两个文件即可，当然，要先在你的页面中引用handsontable的核心js文件，再引用我这两个文件。
其中js以模块类型引用（type="module"）
<link href="../../Scripts/MultiSelect.css" rel="stylesheet" />
<script type="module" src="../../Scripts/MultiSelect.js"></script>
三、使用范例
var columns = [
{ data: 'field1', title: 'title1', width: 120, className: 'htCenter htMiddle', editor: 'MultiSelect', selectOptions: ['1#', '2#', '3#', '4#', '5#', '6#', '7#', '8#'] }
];
四、源代码
1.MultiSelect.js
/// <reference path="handsontable.full.min.js" /> //封闭在IIFE中
(Handsontable => {
class MultiSelectEditor extends Handsontable.editors.BaseEditor { // ...rest of the editor code
/**
* Initializes editor instance, DOM Element and mount hooks.
* 初始化编辑器实例，dom元素和挂载钩子函数
*/
init() {
// Create detached node, add CSS class and make sure its not visible
//增加触发节点，增加class类并确保节点隐藏隐藏
var MultiSelectDomContainer = document.createElement("div");
MultiSelectDomContainer.style.paddingTop = "30px";
this.select = MultiSelectDomContainer;
Handsontable.dom.addClass(this.select, 'htMultiSelectEditor');
this.select.style.display = 'none'; // Attach node to DOM, by appending it to the container holding the table
this.hot.rootElement.appendChild(this.select);
} //编辑器的值加载到单元格
getValue() {
var selects = "";
var childs = this.select.children;
for (var i = 0; i < childs.length; i++) {
if (childs[i].children[0].checked == true) {
selects += "["+childs[i].children[1].innerHTML+"]";
}
}
return selects;
return this.select;
return "";
} //单元格的值加载到编辑器
setValue(value) {
var selectCount = 0;
var selects = value.split("][");
var childs = this.select.children;
for (var i = 0; i < selects.length; i++) {
selects[i]=selects[i].replace("[", "").replace("]", ""); for (var j = 0; j < childs.length; j++) {
if (childs[j].value == selects[i]) {
selectCount += 1;
childs[j].children[0].checked = true;
}
}
}
//this.select.style.paddingTop = selectCount*30+"px";
} //打开编辑器
open() {
this._opened = true;
this.refreshDimensions();
this.select.style.display = '';
} //编辑器样式计算
refreshDimensions() {
this.TD = this.getEditedCell(); // TD is outside of the viewport.
if (!this.TD) {
this.close(); return;
}
//调整弹出框位置，使其位于单元格下面
this.select.style.paddingTop = this.TD.clientHeight + "px"; const { wtOverlays } = this.hot.view.wt;
const currentOffset = Handsontable.dom.offset(this.TD);
const containerOffset = Handsontable.dom.offset(this.hot.rootElement);
const scrollableContainer = wtOverlays.scrollableElement;
const editorSection = this.checkEditorSection();
let width = Handsontable.dom.outerWidth(this.TD) + 1;
let height = Handsontable.dom.outerHeight(this.TD) + 1;
let editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0);
let editLeft = currentOffset.left - containerOffset.left - 1 - (scrollableContainer.scrollLeft || 0);
let cssTransformOffset; switch (editorSection) {
case 'top':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
break;
case 'left':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
break;
case 'top-left-corner':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom-left-corner':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
break;
default:
break;
} if (this.hot.getSelectedLast()[0] === 0) {
editTop += 1;
}
if (this.hot.getSelectedLast()[1] === 0) {
editLeft += 1;
} const selectStyle = this.select.style; if (cssTransformOffset && cssTransformOffset !== -1) {
selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
} else {
Handsontable.dom.resetCssTransform(this.select);
} const cellComputedStyle = Handsontable.dom.getComputedStyle(this.TD, this.hot.rootWindow); if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
height -= 1;
}
if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
width -= 1;
} selectStyle.height = `${height}px`;
selectStyle.minWidth = `${width}px`;
selectStyle.top = `${editTop}px`;
selectStyle.left = `${editLeft}px`;
selectStyle.margin = '0px';
} //获取当前单元格
getEditedCell() {
const { wtOverlays } = this.hot.view.wt;
const editorSection = this.checkEditorSection();
let editedCell; switch (editorSection) {
case 'top':
editedCell = wtOverlays.topOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 101;
break;
case 'corner':
editedCell = wtOverlays.topLeftCornerOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 103;
break;
case 'left':
editedCell = wtOverlays.leftOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 102;
break;
default:
editedCell = this.hot.getCell(this.row, this.col);
this.select.style.zIndex = '';
break;
} return editedCell < 0 ? void 0 : editedCell;
} focus() {
this.select.focus();
} close() {
this._opened = false;
this.select.style.display = 'none';
} //读取选项配置到编辑器
prepare(row, col, prop, td, originalValue, cellProperties) {
// Remember to invoke parent's method
super.prepare(row, col, prop, td, originalValue, cellProperties);
const selectOptions = this.cellProperties.selectOptions;
let options; if (typeof selectOptions === 'function') {
options = this.prepareOptions(selectOptions(this.row, this.col, this.prop));
} else {
options = this.prepareOptions(selectOptions);
} Handsontable.dom.empty(this.select); Handsontable.helper.objectEach(options, (value, key) => {
const optionElement = this.hot.rootDocument.createElement('div'); const checkbox = this.hot.rootDocument.createElement('input');
checkbox.type = "checkbox";
optionElement.appendChild(checkbox); var textSpan = this.hot.rootDocument.createElement('span');
textSpan.innerHTML = value;
optionElement.appendChild(textSpan); optionElement.value = key; Handsontable.dom.addClass(optionElement, 'MultiSelectOption'); //Handsontable.dom.fastInnerHTML(optionElement, value);
this.select.appendChild(optionElement);
});
}
prepareOptions(optionsToPrepare) {
let preparedOptions = {}; if (Array.isArray(optionsToPrepare)) {
for (let i = 0, len = optionsToPrepare.length; i < len; i++) {
preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
} } else if (typeof optionsToPrepare === 'object') {
preparedOptions = optionsToPrepare;
} return preparedOptions;
}
} // Put editor in dedicated namespace
//将编辑器添加到专用命名空间
Handsontable.editors.MultiSelectEditor = MultiSelectEditor;
// Register alias
//编辑器注册别名
Handsontable.editors.registerEditor('MultiSelect', MultiSelectEditor); })(Handsontable);
MultiSelect.js
2.MultiSelect.css
.htMultiSelectEditor {
/*
* This hack enables to change <select> dimensions in WebKit browsers
*/
-webkit-appearance: menulist-button !important;
position: absolute;
width: auto;
}
.MultiSelectOption:hover{
background-color:antiquewhite;
border:1px solid gray;
}
MultiSelect.css
五、更新
日期：2022-01-10
问题
- 修改样式
- 解决在表格底部，弹出的下拉框被遮挡的问题
1.MutiSelect.js
/// <reference path="handsontable.full.min.js" /> //封闭在IIFE中
(Handsontable => {
class MultiSelectEditor extends Handsontable.editors.BaseEditor { // ...rest of the editor code
/**
* Initializes editor instance, DOM Element and mount hooks.
* 初始化编辑器实例，dom元素和挂载钩子函数
*/
init() {
// Create detached node, add CSS class and make sure its not visible
//增加触发节点，增加class类并确保节点隐藏隐藏
var MultiSelectDomContainer = document.createElement("div");
MultiSelectDomContainer.style.paddingTop = "30px";
this.select = MultiSelectDomContainer;
Handsontable.dom.addClass(this.select, 'htMultiSelectEditor');
this.select.style.display = 'none'; // Attach node to DOM, by appending it to the container holding the table
//this.hot.rootElement.appendChild(this.select);//当前单元格的下拉框子节点（会被遮挡）
this.hot.rootDocument.body.appendChild(this.select);//文档的下拉框子节点（不会被遮挡）
this.select.addEventListener("mousedown", (
function (e) {
return e.stopPropagation();
}));//阻止单光获得值在下拉框元素上面，editermanager的点击事件执行（关闭下拉框），让单元格能获得值
//document.body.appendChild(this.select);
} //编辑器的值加载到单元格
getValue() {
var selects = "";
var childs = this.select.children;
for (var i = 0; i < childs.length; i++) {
if (childs[i].children[0].checked == true) {
selects += "["+childs[i].children[1].innerHTML+"]";
}
}
return selects;
return this.select;
return "";
} //单元格的值加载到编辑器
setValue(value) {
var selectCount = 0;
var selects = value.split("][");
var childs = this.select.children;
for (var i = 0; i < selects.length; i++) {
selects[i]=selects[i].replace("[", "").replace("]", ""); for (var j = 0; j < childs.length; j++) {
if (childs[j].value == selects[i]) {
selectCount += 1;
childs[j].children[0].checked = true;
}
}
}
//this.select.style.paddingTop = selectCount*30+"px";
} //打开编辑器
open() {
this._opened = true;
this.refreshDimensions();
this.select.style.display = '';
} //编辑器样式计算
refreshDimensions() {
this.TD = this.getEditedCell(); // TD is outside of the viewport.
if (!this.TD) {
this.close(); return;
}
//调整弹出框位置，使其位于单元格下面
this.select.style.paddingTop = this.TD.clientHeight + "px"; const { wtOverlays } = this.hot.view.wt;
const currentOffset = Handsontable.dom.offset(this.TD);
const containerOffset = Handsontable.dom.offset(this.hot.rootElement);
const scrollableContainer = wtOverlays.scrollableElement;
const editorSection = this.checkEditorSection();
let width = Handsontable.dom.outerWidth(this.TD) + 1;
let height = Handsontable.dom.outerHeight(this.TD) + 1;
let editTop = currentOffset.top - containerOffset.top - 1 - (scrollableContainer.scrollTop || 0);
let editLeft = currentOffset.left - containerOffset.left - 0 - (scrollableContainer.scrollLeft || 0);
let cssTransformOffset; switch (editorSection) {
case 'top':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.topOverlay.clone.wtTable.holder.parentNode);
break;
case 'left':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.leftOverlay.clone.wtTable.holder.parentNode);
break;
case 'top-left-corner':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.topLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom-left-corner':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.bottomLeftCornerOverlay.clone.wtTable.holder.parentNode);
break;
case 'bottom':
cssTransformOffset = Handsontable.dom.getCssTransform(wtOverlays.bottomOverlay.clone.wtTable.holder.parentNode);
break;
default:
break;
} if (this.hot.getSelectedLast()[0] === 0) {
editTop += 1;
}
if (this.hot.getSelectedLast()[1] === 0) {
editLeft += 1;
} const selectStyle = this.select.style; if (cssTransformOffset && cssTransformOffset !== -1) {
selectStyle[cssTransformOffset[0]] = cssTransformOffset[1];
} else {
Handsontable.dom.resetCssTransform(this.select);
} const cellComputedStyle = Handsontable.dom.getComputedStyle(this.TD, this.hot.rootWindow); if (parseInt(cellComputedStyle.borderTopWidth, 10) > 0) {
height -= 1;
}
if (parseInt(cellComputedStyle.borderLeftWidth, 10) > 0) {
width -= 1;
} //selectStyle.height = `${height}px`;
selectStyle.height = "auto";
selectStyle.minWidth = `${width}px`;
selectStyle.top = `${editTop}px`;
selectStyle.left = `${editLeft}px`;
selectStyle.margin = '0px';
} //获取当前单元格
getEditedCell() {
const { wtOverlays } = this.hot.view.wt;
const editorSection = this.checkEditorSection();
let editedCell; switch (editorSection) {
case 'top':
editedCell = wtOverlays.topOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 101;
break;
case 'corner':
editedCell = wtOverlays.topLeftCornerOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 103;
break;
case 'left':
editedCell = wtOverlays.leftOverlay.clone.wtTable.getCell({
row: this.row,
col: this.col
});
this.select.style.zIndex = 102;
break;
default:
editedCell = this.hot.getCell(this.row, this.col);
this.select.style.zIndex = '';
break;
} return editedCell < 0 ? void 0 : editedCell;
} focus() {
this.select.focus();
} close() {
this._opened = false;
this.select.style.display = 'none';
} //读取选项配置到编辑器
prepare(row, col, prop, td, originalValue, cellProperties) {
// Remember to invoke parent's method
super.prepare(row, col, prop, td, originalValue, cellProperties);
const selectOptions = this.cellProperties.selectOptions;
let options; if (typeof selectOptions === 'function') {
options = this.prepareOptions(selectOptions(this.row, this.col, this.prop));
} else {
options = this.prepareOptions(selectOptions);
} Handsontable.dom.empty(this.select); Handsontable.helper.objectEach(options, (value, key) => {
const optionElement = this.hot.rootDocument.createElement('div'); const checkbox = this.hot.rootDocument.createElement('input');
checkbox.type = "checkbox";
optionElement.appendChild(checkbox); var textSpan = this.hot.rootDocument.createElement('span');
textSpan.innerHTML = value;
optionElement.appendChild(textSpan); optionElement.value = key; Handsontable.dom.addClass(optionElement, 'MultiSelectOption'); //Handsontable.dom.fastInnerHTML(optionElement, value);
this.select.appendChild(optionElement);
});
}
prepareOptions(optionsToPrepare) {
let preparedOptions = {}; if (Array.isArray(optionsToPrepare)) {
for (let i = 0, len = optionsToPrepare.length; i < len; i++) {
preparedOptions[optionsToPrepare[i]] = optionsToPrepare[i];
} } else if (typeof optionsToPrepare === 'object') {
preparedOptions = optionsToPrepare;
} return preparedOptions;
} } // Put editor in dedicated namespace
//将编辑器添加到专用命名空间
Handsontable.editors.MultiSelectEditor = MultiSelectEditor;
// Register alias
//编辑器注册别名
Handsontable.editors.registerEditor('MultiSelect', MultiSelectEditor); })(Handsontable);
MutiSelect.js
2.MutiSelect.css
.htMultiSelectEditor {
/*
* This hack enables to change <select> dimensions in WebKit browsers
*/
-webkit-appearance: menulist-button !important;
position: absolute;
width: auto;
height:100px;
z-index:9999;
background-color:white;
border:1px solid gray;
}
.MultiSelectOption:hover{
background-color:antiquewhite;
}
MultiSelect.css
handsontable多选下拉框编辑器扩展的更多相关文章
- query多选下拉框插件 jquery-multiselect(修改)
其实网上关于该控件的使用教程已经很多了,其中 query多选下拉框插件 jquery-multiselect Jquery多选下拉列表插件jquery multiselect功能介绍及使用 这2个的介 ...
- Easyui-Combobox多选下拉框
因为工作需要,引入combobox多选下拉框,并且获取选择的值并以","分开. 效果如下: 代码如下: <html> <head> <title> ...
- Extjs4.2 多选下拉框
//多选下拉框 Ext.define('MDM.view.custom.MultiComboBox', { extend: 'Ext.form.ComboBox', alias: 'widget.mu ...
- js：jquery multiSelect 多选下拉框实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- DropDownList单选与多选下拉框
一.单选DropDownList传值 1.添加界面的DropDownList显示值问题 (1)在方法内添加ViewData的方法: var ad = new UnitsRepository(); Vi ...
- pentaho cde 自定义复选下拉框 checkbox select
pentaho 自带的component 虽多,但是当用户需要在一个表格中查看多个组别的数据时,pentaho自带的单选框就不能实现了,所以复选下拉框势在必行,实现效果如下: 实现原理是借用了jqu ...
- Bootstrap3级联多选下拉框
<!DOCTYPE html> <html> <head> <title>Bootstrap3级联多选下拉框</title> <met ...
- js怎么能取得多选下拉框选中的多个值？
方法:获取多选下拉框对象数组→循环判断option选项的selected属性(true为选中,false为未选中)→使用value属性取出选中项的值.实例演示如下: 1.HTML结构 1 2 3 4 ...
- js多选下拉框
1.js原生实现 1.1:引用JS文件 /*! jQuery v1.12.4 | (c) jQuery Foundation | jquery.org/license */ !function(a,b ...
- 多选下拉框带搜索（aps.net）
自己写了一个带搜索功能的多选下拉框,为了要获取值,就没有封装插件,实现思路 1.一个文本框 做搜索 2.一个文本框显示选中文本,一个隐藏控件存值 3.一个div里面绑定CheckBoxList控件(这 ...
随机推荐
- C语言 06 无符号数
所有的数据底层都是采用二进制来进行保存的. 第一位用于保存符号位. 如果不考虑这个符号位,那么所有的数都是按照正数来表示. 比如考虑了符号位的 char 类型: 考虑符号表示范围:-128 ~ 127 ...
- C#使用PaddleOCR进行图片文字识别✨
PaddlePaddle介绍 PaddlePaddle(飞桨)是百度开发的深度学习平台,旨在为开发者提供全面.灵活的工具集,用于构建.训练和部署各种深度学习模型.它具有开放源代码.高度灵活性.可扩展性 ...
- Hessian反序列化分析
RPC协议 RPC全称为Remote Procedure Call Protocol(远程调用协议),RPC和之前学的RMI十分类似,都是远程调用服务,它们不同之处就是RPC是通过标准的二进制格式来定 ...
- 插入排序的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:将数列分为已排序和未排序,将未排序中的元素插入到已排序中的合适位置 特性 复杂度分析 时间复杂度: 最好情况 ...
- 树模型--ID3算法
基于信息增益(Information Gain)的ID3算法 ID3算法的核心是在数据集上应用信息增益准则来进行特征选择,以此递归的构建决策树,以信息熵和信息增益为衡量标准,从而实现对数据的归纳分类. ...
- Spring Cloud Sleuth：分布式请求链路跟踪
Spring Cloud Sleuth:分布式请求链路跟踪 SpringCloud学习教程 SpringCloud Spring Cloud Sleuth 是分布式系统中跟踪服务间调用的工具,它可以直 ...
- java知识点查漏补缺-- 2020513
重载和重写 方法重载(overload): 必须是同一个类 方法名(也可以叫函数)一样 参数类型不一样或参数数量不一样 方法的重写(override)两同两小一大原则: 方法名相同,参数类型相同 子类 ...
- git fork 项目的更新
fork:github网站的操作,将开源项目复制一份到自己的仓库中 那fork的项目在原仓库更新后,如何同步呢? 1.查看远程仓库 $ git remote -v origin https://cod ...
- 对象数组(java)
如果程序需要某个类的若干个对象,例如Student类的10个对象,显然如下声明10个Student对象是不可取的: Student stul, stu2, stu3, stu4, stu5, stu6 ...
- vue3 快速入门系列 —— 其他API
其他API 前面我们已经学习了 vue3 的一些基础知识,本篇将继续讲解一些常用的其他api,以及较完整的分析vue2 和 vue3 的改变. 浅层响应式数据 shallowRef shallow 中 ...