> >

List.js 让html列表项目支持搜索、筛选排序的JS库

前端开发 1334

List.js 让html列表项目支持搜索、筛选排序的JS库

List.js是一个支持多种浏览器，不依赖于任何框架的JavaScript包用于改进现有HTML列表元素的功能。利用这个包，列表能够迅速变一个可搜索，可排序和可过滤的列表。

如果你要对一组列表项目在客户端支持搜索、筛选、排序等功能这个时候就需要它了。

官网地址：http://listjs.com/

Github：https://github.com/javve/list.js

截至笔者发布本文已收获7,702个star

Perfect library for adding search, sort, filters and flexibility to tables, lists and various HTML elements. Built to be invisible and work on existing HTML. Really simple and easy to use!

Core idea

  • 简洁
  • 轻松扩展至html
  • 无依赖
  • 快
  • 小
  • 轻松处理千万级项目

Features

  • 所有html列表元素都支持，如 <div>,<ul>,<table>, 等等.
  • 搜索
  • 排序
  • 筛选
  • 易上手的模板引擎让元素的增删改查变得更简单
  • 插件化
  • 兼容主流浏览器：Chrome, Safari, Firefox, IE6+

下载&安装方法

Bower安装

bower install list.js

NPM安装

npm install list.js

CDN引用

<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

文件下载

基础使用方法

在列表中引入list.js

HTML

<div id="users">

<!-- class="search" automagically makes an input a search field. -->
  <input class="search" placeholder="Search" />
<!-- class="sort" automagically makes an element a sort buttons. The date-sort value decides what to sort by. -->
  <button class="sort" data-sort="name">
    Sort
  </button>

<!-- Child elements of container with class="list" becomes list items -->
  <ul class="list">
    <li>
<!-- The innerHTML of children with class="name" becomes this items "name" value -->
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Jonas Arnklint</h3>
      <p class="born">1985</p>
    </li>
    <li>
      <h3 class="name">Martina Elm</h3>
      <p class="born">1986</p>
    </li>
    <li>
      <h3 class="name">Gustaf Lindqvist</h3>
      <p class="born">1983</p>
    </li>
  </ul>

</div>

JS

var options = {
  valueNames: [ 'name', 'born' ]
};

var userList = new List('users', options);

从现有列表中添加对象

html

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list">
<!-- This, the first element in the list, will be used as template for new items. -->
    <li>
      <h3 class="name">Jonny Stromberg</h3>
      <p class="born">1986</p>
    </li>
  </ul>

</div>

JS

var options = {
  valueNames: [ 'name', 'born' ]
};

// These items will be added to the list on initialization.
var values = [
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('example-list', options, values);

// It's possible to add items after list been initiated
userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

创建第一个列表对象

HTML

<div id="users">

  <input class="search" placeholder="Search" />
  <button class="sort" data-sort="name">
    Sort
  </button>

  <ul class="list"></ul>

</div>

JS

var options = {
  valueNames: [ 'name', 'born' ],
  // Since there are no elements in the list, this will be used as template.
  item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};

var values = [
  {
    name: 'Jonny Strömberg',
    born: 1986
  },
  {
    name: 'Jonas Arnklint',
    born: 1985
  },
  {
    name: 'Martina Elm',
    born: 1986
  }
];

var userList = new List('example-list', options, values);

userList.add({
  name: 'Gustaf Lindqvist',
  born: 1983
});

Post Comment