A JavaScript Library That Offers Interactive Lists

ListExtender.js is a simple JavaScript library for manipulating lists that can be used to add, remove, edit, sort, check or have items in List view.

Features:

Double-click the menu items to edit them.
Add new menu items with the input field.
Sort menu items by drag and drop.
Optional delete button for each menu item.
8 subjects.

Create Amazing Web-Based Interactive Tables and Spreadsheets | jExcel

How to make use of it:

1. Load the ListExtender JavaScript library within the HTML.

<script src="js/ListExtender.js"></script>

2. Create a brand new occasion of the List Extender.

const myList = new ListExtender();

3. Insert the checklist into your content material.

myList.addAfter('#myList h2');

4. Set the placeholder of the input field.

myList.setPlaceholder('Type something here!');

5. Set the preliminary checklist gadgets utilizing the addFromArray technique.

myList.addFromArray(['', '', '', '']);

6. Apply a customized validator to the checklist.

myList.validateList.addValidation(value => {
  return (value.match(/\d{4}-\d{2}-\d{2}/) && value.match(/\d{4}-\d{2}-\d{2}/)[0] === value) ||
  (value.match(/\d{2}\/\d{2}\/\d{4}/) && value.match(/\d{2}\/\d{2}\/\d{4}/)[0] === value) ||
  (value.match(/\d{8}/) && value.match(/\d{8}/)[0] === value)
}, 'Please follow specified format!!')

7. Set the checklist theme. Available themes:

myList.setTheme(themeName);

8. Available choices.

const myList = new ListExtender({

      // is unordered list
      isUnordered: true,

      // allows sortable
      allowReorder: true,

      // shows delete button
      showDeleteButton: false,
      
});

9. More API strategies.

// set the input type:
// 'text'
// 'email'
// 'password'
// 'date'
// 'month'
// 'number'
// 'time'
// 'url'
// 'week'
myList.setInputType(type)

// set the minimum length of the input field
myList.setMinLength(minLength);

// set the maximum length of the input field
myList.setMaxLength(maxLength);

// apply a unique ID to the lsit
myList.setId(id);

// apply additional CSS classes to the list
myList.addClasses(classList);

// remove CSS classes from the list
myList.removeClasses(classList);

// add a new item to the list
myList.addListItem();

// append the list before the element
myList.addBefore(query);

// get data
myList.getData();
myList.getAllData();

Easy List Manipulation JavaScript Library, ListExtender.js Plugin/Github