如何使用 jQuery EasyUI Mobile 为手机设计数据列表？

jQuery EasyUI Mobile是一个基于jQuery和HTML5的移动端UI库，提供了丰富的组件和样式，适合用于移动端网页和原生应用开发。本文将介绍如何使用jQuery EasyUI Mobile为手机设计数据列表。

准备工作

1. 下载并引入jQuery和jQuery EasyUI Mobile库文件：

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.7/jquery.mobile.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery-easyui/1.9.7/jquery.mobile.min.js"></script>

2. 准备数据，本文使用以下数据为例：

var data = [
  {id: 1, name: '张三', gender: '男', age: 20},
  {id: 2, name: '李四', gender: '女', age: 22},
  {id: 3, name: '王五', gender: '男', age: 24},
  {id: 4, name: '赵六', gender: '女', age: 26},
  {id: 5, name: '孙七', gender: '男', age: 28},
];

创建列表

使用jQuery EasyUI Mobile创建数据列表的方式有多种，本文介绍两种常用方式。

方式一：使用<ul>元素创建列表

使用<ul>元素创建数据列表非常简单，使用jQuery EasyUI Mobile的listview组件可以轻松实现：

<ul id="listview" class="m-listview"></ul>

<script>
  $(function() {
    $('#listview').listview({
      data: data,
      // 定义模板
      template: function(row) {
        return '<li><h3>' + row.name + '</h3><p>性别：' + row.gender + '</p><p>年龄：' + row.age + '</p></li>';
      },
      // 绑定点击事件
      onClick: function(row) {
        alert('你点击了' + row.name);
      }
    });
  });
</script>

说明：

• #listview是<ul>元素的id。
• data是列表的数据源。
• template定义每一个列表项的HTML结构。
• onClick定义列表项被点击时触发的事件。

方式二：使用<table>元素创建列表

使用<table>元素创建数据列表需要定义每一列的字段名称，使用jQuery EasyUI Mobile的datagrid组件可以实现：

<table id="datagrid" class="m-datagrid"></table>

<script>
  $(function() {
    $('#datagrid').datagrid({
      data: data,
      // 定义列名称和数据源字段名称的对应关系
      columns: [
        {field: 'name', title: '姓名'},
        {field: 'gender', title: '性别'},
        {field: 'age', title: '年龄'},
      ],
      // 绑定点击事件
      onClickRow: function(index, row) {
        alert('你点击了' + row.name);
      }
    });
  });
</script>

说明：

• #datagrid是<table>元素的id。
• data是列表的数据源。
• columns定义每一列的字段名称和列表头名称。
• onClickRow定义列表行被点击时触发的事件。

自定义样式

使用jQuery EasyUI Mobile创建的列表默认有一定的样式，可以根据自己的需求进行自定义。以下是一些常用的自定义样式：

背景色

.m-listview .m-list li {
  background-color: #f5f5f5;
}

.m-datagrid td {
  background-color: #f5f5f5;
}

标题样式

.m-listview .m-list h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

悬停样式

.m-listview .m-list li:hover {
  background-color: #ddd;
}

.m-datagrid .m-grid-row:hover {
  background-color: #ddd;
}

结语

使用jQuery EasyUI Mobile为手机设计数据列表非常简单，只需要准备好数据和库文件，然后根据自己的需求创建和自定义列表即可。通过本文的介绍，希望读者可以掌握基本的列表设计方法和样式自定义技巧。