纯JS实现列表侧滑展示更多操作实现删除操作

在之前实现js侧滑现实更多操作选项的基础上添加侧滑删除功能

主要实现的功能：

1. 对外暴露点击操作按钮的标示属性（indexPath）
2. 增加删除dom对象操作，如果这里是数据支持的列表那么这里在操作完dom对象后应该删除对应的数据源。

html里初始化 DragMoreOption 对象

var dragMoreOption = new DragMoreOption('wrap', 'cell',
				[{
					'title': '删除',
					'color': 'red'
				}, {
					'title': '禁用',
					'color': 'green'
				},{
					'title': '启用',
					'color': 'blue'
				}]);
dragMoreOption.optionItemCallBack = function(indexPath){
    if(indexPath.column == 0){
	this.deleteOptionItem(indexPath);
    }
 }
复制代码

这里需要给 DragMoreOption 对象添加操作选项点击回调optionItemCallBack属性。

//更多操作按钮回调
optionItemCallBack:null,
复制代码

在这里属性先声明为null，在html里给 dragMoreOption 对象添加optionItemCallBack真正的方法实现,可以看到方法实现会传入 indexPath属性，该值为用户点击选择item对应的indexPath，可以暴露外界用户操作的是哪行数据下的哪列功能选项。通过初始化dragMoreOption的操作集合参数可以在这里判断indexPath.column == 0条件时为删除操作。

添加删除操作

这里逻辑比较简单，主要有两个步骤：

1. 将需要删除的cell删除，并修改待删除cell以后全部cell的index值，其实这里可以理解为刷新索引。

2. 由于待删除的可操作的item的indexPath无需改变，或者说以后cell的index值会自动减一操作，那么可操作选项的item只需要删除下面的集合即可。

删除、更新cell及删除多余可操作items

//删除cell操作
	deleteOptionItem:function(indexPath){
		var index = indexPath.row;
		var column = indexPath.column;
		var items = document.getElementsByClassName(this.cellClassName);
		var needDeleteItem = null;
		//删除最后的可操作items
		this.changeAfterAllCellAndItems();
		for(var i = 0;i < items.length;i++){
			var item = items[i];
			var currentIndex = parseInt($(item).attr("index"));
			if(currentIndex == index){
				needDeleteItem = item;
				//这里重置当前全局保存的状态
				this.currentSelectItem = null;//重置全局cell状态
				this.isBounceActive = false;//当前无cell进行弹簧效果
				$(this.currentSelectItem).attr("expend", false);//当前操作cell未展开
				this.isHaveExpend = false;//当前无展开记录
			}
			if(currentIndex > index){
				$(item).attr('index',currentIndex - 1);
			}
		}
		
		//废话不多说，直接删除
		if(needDeleteItem){
			$(needDeleteItem).remove();
		}
		
	},
	//修改删除后面全部的item
	changeAfterAllCellAndItems:function(){
		var cellItems = document.getElementsByClassName(this.cellClassName);
		//删除多余可操作item
		var optionItems = document.getElementsByClassName('itemStyle');
		var deleteNum = 0;
		for(var i = optionItems.length - 1;i >= 0;i--){
			var optionItem = optionItems[i];
			var indexPath = $.parseJSON($(optionItem).attr("indexPath"));
			if(parseInt(indexPath.row) == cellItems.length - 1){
				$(optionItem).remove();
				deleteNum += 1;
				if(deleteNum == this.items.length){
					break;
				}
			}
		}
		this.optionItemBeforeOrBelow(false);
	}
复制代码

好了，到这删除按钮的操作就写完了，这里仅仅是思路，大神请给个赞，鼓励一下，非常感谢。代码纯手撸，不严谨的地方请多多指教。互相学习，共同进步。