In the previous implementation of JS sideslip reality more operation options on the basis of the addition of the sideslip removal function
Main functions:
- Expose the attribute (indexPath) of the click-action button
- 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:
-
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.
-
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.