List.js 入门教程：从零开始掌握列表操作-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01156/article/details/148394089

List.js 入门教程：从零开始掌握列表操作

list.js The 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. 项目地址: https://gitcode.com/gh_mirrors/li/list.js

什么是List.js

List.js 是一个轻量级的JavaScript库，专门用于处理、搜索、排序和过滤HTML列表。它不依赖任何其他JavaScript框架，可以直接在现代浏览器中使用。这个库特别适合需要在前端展示可交互数据列表的场景。

基础使用示例

示例1：使用现有HTML列表

这是最简单的使用方式，适合已经存在HTML结构的场景。

<div id="hacker-list">
  <ul class="list">
    <li>
       <h3 class="name">Jonny</h3>
       <p class="city">Stockholm</p>
    </li>
    <li>
      <h3 class="name">Jonas</h3>
      <p class="city">Berlin</p>
    </li>
  </ul>
</div>

对应的JavaScript初始化代码：

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

var hackerList = new List('hacker-list', options);

技术要点：

valueNames 数组定义了List.js应该关注的类名
初始化时需要指定容器元素的ID

示例2：动态创建列表（版本1）

当列表初始为空时，可以通过模板字符串动态创建。

var options = {
  valueNames: [ 'name', 'city' ],
  item: '<li><h3 class="name"></h3><p class="city"></p></li>'
};

var values = [
  { name: 'Jonny', city:'Stockholm' },
  { name: 'Jonas', city:'Berlin' }
];

var hackerList = new List('hacker-list', options, values);

技术要点：

item 选项定义了每个列表项的HTML模板
初始化时可以传入初始数据数组

进阶使用技巧

示例3：使用隐藏模板元素

这是一种更灵活的模板定义方式，特别适合复杂列表项结构。

<div style="display:none;">
  <li id="hacker-item">
   <h3 class="name"></h3>
   <p class="city"></p>
  </li>
</div>

JavaScript部分：

var options = {
    item: 'hacker-item'  // 直接引用模板元素的ID
};

优势：

模板维护更方便
可以包含更复杂的HTML结构
便于设计师和开发者协作

示例4：先索引现有列表再添加新项

这种模式适合动态加载数据的场景。

// 先初始化空列表
var hackerList = new List('hacker-list', options);

// 然后动态添加数据
hackerList.add({ name: 'Jonas', city:'Berlin' });

应用场景：

AJAX加载数据
用户交互添加新项
实时数据更新

搜索与排序功能

示例5：添加搜索和排序控件

List.js内置了搜索和排序功能，只需简单配置即可使用。

<input class="search" placeholder="搜索..." />
<span class="sort" data-sort="name">按姓名排序</span>
<span class="sort" data-sort="city">按城市排序</span>

特点：

搜索框只需添加search类
排序按钮需要sort类和data-sort属性
无需额外JavaScript代码

高级数据绑定

示例6：处理自定义属性和数据属性

从v1.2.0开始，List.js支持更灵活的数据绑定方式。

var options = {
  valueNames: [
    'name',  // 普通类名绑定
    { data: ['id'] },  // 绑定data-id属性
    { name: 'timestamp', attr: 'data-timestamp' },  // 自定义属性名
    { name: 'link', attr: 'href' }  // 绑定到href属性
  ]
};

应用场景：