Help us understand the problem. What is going on with this article?

ulやtableにお手軽に足したり引いたり絞り込みしたりできるlist.js

More than 3 years have passed since last update.

v1.2がリリースされたようです。
あまり記事がなかったので備忘代わりにまとめておきます。

公式サイト

http://www.listjs.com/

どういうライブラリ?

ulで作ったリストを、jsで手軽にliを追加したり、条件指定して削除したり、
絞り込みしたりソートしたりする機能を提供します。
jsのみでcssは一切ないので、UIは好きにできます。

インストール

http://www.listjs.com/overview/download

上記に書いてある通り。
npmでもbowerでもCDNでもzipで落として解凍しても大丈夫です。

使い方サンプル

ざっくりhtmlファイルとjsファイルを作るとこんな感じになります。

ディレクトリ構成

/ ---- index.html
|
|-- index.js
|
|-- bower_components/ ---- list.js/ ---- dist/ ---- list.min.js

index.html
<html>
  <head>
  </head>
  <body>
    <!-- ここのリストが動的に変わる -->
    <div id="shop-list">
      <ul class="list">
      </ul>
    </div>

    <!-- 追加用 -->
    <input type="text" id="input-text" placeholder="name" />
    <button type="button" name="add">add</button>

    <!-- 削除ボタン -->
    <button type="button" name="delete">delete</button>

    <!-- ソートボタン -->
    <button type="button" class="sort"  data-sort="name">sort</button>

    <!-- 検索用 -->
    <input type="text" class="search" placeholder="search" />
    <button type="button" id="search">search</button>

    <script src="./bower_components/list.js/dist/list.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
index.js
'use strict';

var options = {
    // リストカラム名
    valueNames: ['name', 'id'],
    // アイテムが追加されるときのタグ
    item: '<li><h3 class="name"></h3><p class="shop"></p></li>'
};

// リストを生成
this.shopList = new List('shop-list', options);
// 一旦グローバルにidを置いておいてprimary keyにしとく
this.id = 0;

// 追加ボタンイベント登録
document.querySelector('[name=add]').addEventListener('click', () => {
  this.shopList.add({
    name: document.getElementById('input-text').value,
    id: this.id++,
  });
});

// 削除ボタンイベント登録
document.querySelector('[name=delete]').addEventListener('click', () => {
  this.shopList.remove("id", --this.id);
});

// ソートボタンイベント登録
document.querySelector('.sort').addEventListener('click', () => {
  this.shopList.sort('id', {order: "desc"});
});

// 検索ボタンイベント登録
document.getElementById('search').addEventListener('click', () => {
  this.shopList.search(document.querySelector('.search').value, ['name']);
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした