博客

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

  • Post category:jquery

使用 jQuery EasyUI Mobile 可以很容易地设计出美观且适合手机端的数据列表。下面详细讲解如何使用 jQuery EasyUI Mobile 设计数据列表的完整攻略，包含以下 5 个步骤：

  1. 引入相关文件

在 HTML 页面中引入 jQuery 和 jQuery EasyUI Mobile 相关的脚本和样式文件。如下所示：

<!-- 引入 jQuery 和 jQuery EasyUI Mobile 脚本文件 -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.mobile.min.js"></script>

<!-- 引入 jQuery EasyUI Mobile 样式文件 -->
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/mobile.css">
  1. 准备数据

需要准备一个 JSON 数据对象，用于填充数据列表。如下所示：

var data = [
    {id: 1, name: '张三', age: 25},
    {id: 2, name: '李四', age: 28},
    {id: 3, name: '王五', age: 30},
    {id: 4, name: '赵六', age: 32},
    {id: 5, name: '钱七', age: 35},
];
  1. 设计数据列表

在 HTML 页面中创建一个 <ul> 元素，并为它设置 data-options 属性。在 data-options 属性中设置数据列表的显示列、样式等属性。如下所示：

<ul data-options=" 
    view: { 
        showRowNumber: true, 
        columns: [ 
            { field: 'id', title: '编号', width: '25%' }, 
            { field: 'name', title: '姓名', width: '25%' }, 
            { field: 'age', title: '年龄', width: '25%' } 
        ] }, 
        data: data 
    " 
></ul>

代码中，showRowNumber 属性为 true，则显示行号；columns 属性为每列的属性，包括列名（title）、列宽（width）和数据属性（field）。

  1. 初始化数据列表

在页面加载时，需要对数据列表进行初始化。如下所示：

$(function() {
    $('ul').listview(); // 初始化列表
});
  1. 完成

至此，就可以在网页上看到一个美观的数据列表了。下面列出一些常用的属性：

  • data-filter="true"：开启搜索功能
  • data-filter-placeholder="请输入搜索内容"：搜索框中显示的提示文字
  • data-inset="true"：列表的边框是否是内嵌式
  • data-divider-theme="a"：设置字母分类的主题色
  • data-split-icon="delete"：分隔符图标
  • data-split-theme="b"：分隔符的主题色

示例说明：

下面提供两个示例说明。

  1. 带搜索框的数据列表

下面的数据列表中开启了搜索功能，搜索框的提示文字为“输入姓名进行搜索”。代码如下所示：

<ul data-options="
    view: {
        showRowNumber: true,
        columns: [
            { field: 'id', title: '编号', width: '25%' },
            { field: 'name', title: '姓名', width: '25%' },
            { field: 'age', title: '年龄', width: '25%' }
        ]
    },
    data: data,
    filter: true,
    filterPlaceholder: '输入姓名进行搜索'
"></ul>
  1. 左滑删除的数据列表

下面的数据列表可以左滑删除。代码如下所示：

<ul data-options="
    view: {
        showRowNumber: true,
        columns: [
            { field: 'id', title: '编号', width: '25%' },
            { field: 'name', title: '姓名', width: '25%' },
            { field: 'age', title: '年龄', width: '25%' }
        ]
    },
    data: data,
    splitIcon: 'delete',
    splitTheme: 'b'
"></ul>
Tags: