In the previous implementation of JS sideslip reality more operation options on the basis of the addition of the sideslip removal function

Main functions:

  1. Expose the attribute (indexPath) of the click-action button
  2. Add the operation to delete the DOM object. If this is the list of supported data, then delete the corresponding data source after the operation of the DOM object.

HTML to initialize the DragMoreOption object

Var dragMoreOption = new dragMoreOption ('wrap', 'cell', [{'title': 'delete ', 'color': 'red'}, {'title':' delete ', 'color': 'red'}, {'title': 'delete ', 'color': 'red'}, {'title':' delete ', 'color': 'red'}, 'color': 'color': 'green'},{'title': 'enabled ', 'color': 'blue'}]); dragMoreOption.optionItemCallBack = function(indexPath){ if(indexPath.column == 0){ this.deleteOptionItem(indexPath); }}Copy the code

Here you need to add action options to the DragMoreOption object by clicking the optionItemCallBack property.

// More action button callback
optionItemCallBack:null.Copy the code

In this case, the attribute is declared null, and in HTML we add optionItemCallBack to the dragMoreOption object, and the actual method implementation, you can see that the method implementation will pass in the indexPath attribute, which is the value of the item that the user clicks to select, Can expose the outside user is operating on which row of data under which column of function options. By initializing the dragMoreOption’s operation set parameters, we can determine that the condition indexPath. Column == 0 is a delete operation.

Add and Delete operations

The logic here is simple, with two main steps:

  1. Delete the cell to be deleted and change the index value of all the cells to be deleted. In fact, this can be interpreted as refreshing the index.

  2. Since the indexPath of the operable item to be deleted does not need to change, or the index value of the cell will be automatically subtracted by one operation in the future, the item of the operable option only needs to delete the following collection.

Delete and update cells and delete redundant operable items

// Delete the cell operation
	deleteOptionItem:function(indexPath){
		var index = indexPath.row;
		var column = indexPath.column;
		var items = document.getElementsByClassName(this.cellClassName);
		var needDeleteItem = null;
		// Delete the last operable 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;
				// Here resets the current global saved state
				this.currentSelectItem = null;// Reset the global cell status
				this.isBounceActive = false;// There is no cell for spring effect
				$(this.currentSelectItem).attr("expend".false);// The current operation cell is not expanded
				this.isHaveExpend = false;// No expansion is currently recorded
			}
			if(currentIndex > index){
				$(item).attr('index',currentIndex - 1); }}// Delete it directly
		if(needDeleteItem){ $(needDeleteItem).remove(); }},// Delete all items that follow
	changeAfterAllCellAndItems:function(){
		var cellItems = document.getElementsByClassName(this.cellClassName);
		// Delete redundant operable items
		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);
	}
Copy the code

Ok, to this delete button operation is finished, here is only the idea, great God please give a praise, encourage, thank you very much. Code pure hand, not rigorous place please give advice. Learn from each other and make progress together.