Documentation

List API

These properties and methods are available for the List-object.

Properties

  • listContainer Element
    The element node that contains the entire list area.

  • list Element
    The element containing all items.

  • items Array
    An Array of all Item-objects in the list.

  • visibleItems Array
    The currently visible items in the list

  • matchingItems Array
    The items matching the currently active filter and search.

  • searched Boolean
    Returns true if the list is searched.

  • filtered Boolean
    Returns true if there is an active filter.

  • list Element
    The element containing all items.

  • plugins Object
    The currently avaliable plugins.

Methods

  • add(values, callback)
    Adds one or more items to the list.

    listObj.add({ name: "Jonny", city: "Stockholm" });
    
    listObj.add([
        { name: "Gustaf", city: "Sundsvall" }
        , { name: "Jonas", city: "Berlin" }
    ]);

    If callback is set then items are added to the list in a asynchronous way, and the callback is called when all items are added. This is especially useful when adding very many items (200+ or something), or if you just like the asynchronous coding style.

    listObj.add(arrayWithManyManyItems, function(items) {
        console.log('All ' + items.length + ' were added!');
    });
  • remove(valueName, value)
    Removes items from the list where the value named valueName has value value. Returns the number of items that where removed.

    itemsInList = [
        { id: 1, name: "Jonny" }
        , { id: 2, name "Gustaf" }
    ];
    listObj.remove("id", 1); // return 1
  • get(valueName, value)
    Returns values from the list where the value named valueName has value value.

    itemsInList = [
        { id: 1, name: "Jonny" }
        , { id: 2, name "Gustaf" }
    ];
    listObj.get("id", 2); // return { id: 2, name "Gustaf" }
  • sort(valueName, options)
    Sorts the list based on values the in the column named valueName. The options parameter can contain two properties options.sortFunction and options.order. options.sortFunction is used if you want to make your own sort function. The default sort function is found here https://github.com/javve/natural-sort options.order = "asc" means that you want to sort the list in ascending order. Set false for descending.

    listObj.sort('name', { order: "asc" }); // Sorts the list in abc-order based on names
    listObj.sort('name', { order: "desc" }); // Sorts the list in zxy-order based on names
  • search(searchString, columns)
    Searches the list

    itemsInList = [
        { id: 1, name: "Jonny" }
        , { id: 2, name "Gustaf" }
        , { id: 3, name "Jonas" }
    ];
    
    listObj.search('Jonny'); // Only item with name Jonny is shown (also returns this item)
    
    listObj.search(); // Show all items in list
    
    listObj.search('Jonny', ['name']); // Only search in the 'name' column
  • clear()
    Removes all items from the list

  • filter(filterFunction)

    itemsInList = [
        { id: 1, name: "Jonny" }
        , { id: 2, name "Gustaf" }
        , { id: 3, name "Jonas" }
    ];
    
    listObj.filter(function(item) {
       if (item.values().id > 1) {
           return true;
       } else {
           return false;
       }
    }); // Only items with id > 1 are shown in list
    
    listObj.filter(); // Remove all filters
  • size()
    Returns the size of the list.

  • show(i, page)
    Shows page number of items from i. Use for paging etc.

    itemsInList = [
        { id: 1, name: "Jonny" }
        , { id: 2, name "Gustaf" }
        , { id: 3, name "Jonas" }
        , { id: 4, name "Egon" }
        , { id: 5, name "Frank" }
        , { id: 6, name "Ester" }
    ];
    
    listObj.show(4, 3); // Display item 4,5,6 
  • update()
    Updates the current state of the list. Meaning that if you for instance hides some items with the itemObj.hide() method then you have to call listObj.update() if you want the paging to update.

  • on(event, callback)
    Execute callback when list have been updated (triggered by update(), which is used by a lot of methods). Use updated as the event.

    Avaliable events

    • updated
    • searchStart
    • searchComplete
    • filterStart
    • filterComplete
    • sortStart
    • sortComplete
Next topic: Item API ›