Element-UI可编辑表格的实现
一、 可编辑单元格的实现
实现效果：点击可编辑
实现原理：在单元格中放置span 和 input ，绑定data中同一的数据，捕捉点击单元格事件和失去焦点事件，添加/删除 元素的相应class，控制span 和 input 框的显示。
实现代码：
Style：
.tb-edit .input-box {
display: none
}
.tb-edit .current-cell .input-box {
display: block;
margin-left: -15px;
}
Html：
JavaScript：
//单元格点击后，显示input，并让input 获取焦点
handleCellClick:function(row, column, cell, event){
emptransfer.addClass(cell,'current-cell');
if(emptransfer.getChildElement(cell,3) !== 0){
var _inputParentNode =emptransfer.getChildElement(cell,3);
if(_inputParentNode.hasChildNodes()&& _inputParentNode.childNodes.length > 2) {
var _inputNode = _inputParentNode.childNodes[2];
if(_inputNode.tagName === 'INPUT'){
_inputNode.focus();
}
}
}
},
//input框失去焦点事件
handleInputBlur:function(event){ //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
var _event = event;
setTimeout(function(){
var _inputNode = _event.target;
if(emptransfer.getParentElement(_inputNode,4)!==0){
var _cellNode = emptransfer.getParentElement(_inputNode,4);
emptransfer.removeClass(_cellNode,'current-cell');
emptransfer.removeClass(_cellNode,'current-cell2');
}
},200);
},
二、 Input框编辑时动态查询（下拉列表）
实现效果：编辑input时，下方出现下拉动态查询，点击下拉中的数据，填入表中
实现原理：原理同上，监听input编辑事件获取DOM节点，改变class控制子元素的显示。
这里的显示情况有三种：
1）不点击表格时，只显示span
2）点击表格后，未编辑，只显示input
3）在input框编辑时显示input + 下拉表格区域
流程如下：
实现代码：
Style：
.tb-edit .input-box {//显示span
display: none
}
.tb-edit .current-cell .input-box {//显示input
display: block;
margin-left: -15px;
}
.tb-edit .hidden-list{//不显示 下拉区域
display: none;
}
.tb-edit .current-cell2 .hidden-list{//显示下拉区域
display: block;
}
Html：
{{scope.row.employeeCode}}
JavaScript:
//单元格点击后，显示input，并让input 获取焦点
handleCellClick:function(row, column, cell, event){
emptransfer.addClass(cell,'current-cell');
if(emptransfer.getChildElement(cell,3) !== 0){
var _inputParentNode =emptransfer.getChildElement(cell,3);
if(_inputParentNode.hasChildNodes()&& _inputParentNode.childNodes.length > 2) {
var _inputNode = _inputParentNode.childNodes[2];
if(_inputNode.tagName === 'INPUT'){
_inputNode.focus();
}
}
}
},
//input框失去焦点事件
handleInputBlur:function(event){ //当 input 失去焦点 时,input 切换为 span，并且让下方 表格消失（注意，与点击表格事件的执行顺序）
var _event = event;
setTimeout(function(){
var _inputNode = _event.target;
if(emptransfer.getParentElement(_inputNode,4)!==0){
var _cellNode = emptransfer.getParentElement(_inputNode,4);
emptransfer.removeClass(_cellNode,'current-cell');
emptransfer.removeClass(_cellNode,'current-cell2');
}
},200);
},
//input框编辑时触发的方法，动态弹出员工查询下拉列表
handleEdit:function(value) {
var _inputNode = inputFocusEle;
if(emptransfer.getParentElement(_inputNode,1)!==0){
var _parentNode = emptransfer.getParentElement(_inputNode,1);
var index = _parentNode.getAttribute('row-index');
emptransfer.tableData[index].name='';
emptransfer.tableData[index].joinDate='';
emptransfer.tableData[index].nowDept='';
emptransfer.tableData[index].nowFullDept='';
emptransfer.tableData[index].nowDeptCode='';
emptransfer.tableData[index].nowPosi='';
emptransfer.tableData[index].nowPosiCode='';
}
if(emptransfer.getParentElement(_inputNode,4)!==0){
var _cellNode = emptransfer.getParentElement(_inputNode,4);
emptransfer.addClass(_cellNode,'current-cell2')
emptransfer.queryPreEmpInfo(_inputNode.value);
}
},
三、 点击图标显示下拉、点击图标显示Dialog的实现
实现效果：
实现原理：同上。
实现代码：
Style：
.tb-edit .transfer-type-list{
display: none;
}
.tb-edit .current-cell1 .transfer-type-list{
display: block;
z-index: 10;
}
Html：
{{scope.row.transferType}}
<@spring.message "flowemptransfer.transfertype"/>
{{item.codeValue}}
{{item.codeName}}
JavaScript：
//点击弹出 调整类型下拉列表
selectTransferType:function(event){ //点击事件， 下方出现下拉列表： 调动类型
var _i = event.target;
_i.focus();
if( emptransfer.getParentElement(_i,4)!==0){
var _boxEle = emptransfer.getParentElement(_i,4);
emptransfer.addClass(_boxEle,'current-cell1');
}
},
//调整类型下拉列表的行点击事件
handleTransferTypeClick:function(event,index){
var _index;
var _click = event.target;
var _item = _click.parentNode;
var _nextNode = _item.childNodes[4];
if(_nextNode.tagName === 'INPUT'){
_index = _nextNode.value;
}else{
var _inputNode =_click.childNodes[4];
_index = _inputNode.value;
}
emptransfer.tableData[index].transferType = emptransfer.transferPosiType[_index].codeName;
emptransfer.tableData[index].transferTypeCode = emptransfer.transferPosiType[_index].codeValue;
if(emptransfer.getParentElement(_item,3)!==0){
var _boxEle = emptransfer.getParentElement(_item,3);
emptransfer.removeClass(_boxEle,'current-cell1');
}
},
demo代码：
<#include "../../include/header.html">
员工调动申请
*
<@spring.message "flowemptransfer.note"/>：
1、<@spring.message "flowemptransfer.notetext1"/>
2、<@spring.message "flowemptransfer.notetext2"/>
<@spring.message "flowemptransfer.submitbtnstr"/>
<@spring.message "flowemptransfer.addbtnstr"/>
<@spring.message "flowemptransfer.removebtnstr"/>
<@spring.message "flowemptransfer.importbtnstr"/>
<@spring.message "flowemptransfer.exportbtnstr"/>
{{scope.row.employeeCode}}
{{scope.row.transferPosi}}
{{scope.row.transferType}}
<@spring.message "flowemptransfer.transfertype"/>
{{item.codeValue}}
{{item.codeName}}
{{scope.row.effectiveDate|fomatDate}}
<@spring.message "flowemptransfer.querybtnstr"/>
<@spring.message "flowemptransfer.querybtnstr"/>
1.<@spring.message "flowemptransfer.importtipone"/>
2.<@spring.message "flowemptransfer.importtiptwo"/>
3.<@spring.message "flowemptransfer.importtipthree"/>
<@spring.message "flowemptransfer.importtipfour"/>
<@spring.message "flowemptransfer.importtipfive"/>
1.<@spring.message "flowemptransfer.importtipsix"/>
2.<@spring.message "flowemptransfer.importtipseven"/>
3.<@spring.message "flowemptransfer.importtipeight"/>
觉得有帮助的小伙伴右上角点个赞~
