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

EasyUI 是一个 HTML5 框架，用于使用基于 jQuery、React、Angular 和 Vue 技术的用户界面组件。它有助于为交互式 Web 和移动应用程序构建功能，为开发人员节省大量时间。

在本文中，我们将学习为移动界面设计数据列表。数据列表是带有预定义输入选项的下拉列表。

EasyUI for jQuery 下载：

https://www.jeasyui.com/download/index.php

在实现您的移动应用程序代码时，请注意正确的文件路径。

示例 1：以下代码演示了使用 jQuery EasyUI的简单数据列表。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
  
    
    
    
  
    
    

  

    
        
  
            
            
                
                    Basic DataList
                
            
        
        
        
            BMW
            Mercedes
            Bentley
            
                Audi
            
  
            
                    Volkswagen
                
            
            Tesla
            Brio
        
    

  

输出：

示例 2：以下代码演示了使用 jQuery EasyUI 的分组数据列表。单击数据列表的每个项目时，它会显示带有“返回”链接的相应项目内容。

html

  

    
    
  
    
    
  
    
  
    
  
    
    
    
  
    
    
    
  
    
    
    

  

    
        
            
                
                    DataList group
                
            
        
        
        
    
  
    
        
            
            
                
                    Car Details
                
                
                
                    
                        Back
                    
                
            
        
    
    
        // The listitems can be grouped
        var data = [
            { "group": "Group1", "item": "Audi" },
            { "group": "Group1", "item": "Mercedes" },
            { "group": "Group2", "item": "Bentley" },
            { "group": "Group2", "item": "BMW" },
            { "group": "Group3", "item": "Sedan" },
            { "group": "Group3", "item": "SUV" }
        ];
  
        // jQuery function for datalist
        $(function () {
            $('#datalistID').datalist({
                data: data,
                textField: 'item',
                groupField: 'group',
                textFormatter: function (value) {
                    return
'<a href="javascript:void(0)" class="datalist-link">'
                        + value + '</a>';
                },
  
                /* On click of one row,it takes to the
                   #divID-title with respective item */
                onClickRow: function (index, row) {
                    $('#divID-title').html(row.item);
                    $.mobile.go('#divID');
                }
            })
        })
    

  

输出：

示例 3：以下示例演示了 datalist 的复选框。

html

  

    
    
  
    
    
  
    
      
    
      
    
    
    
      
    
    
    
      
    
    
    

  

    
        
            
                
                    DataList selection
                
            
        
        
        
    
  
    
       // The listitems can be grouped
        var data = [
            { "group": "Group1", "item": "Audi" },
            { "group": "Group1", "item": "Mercedes" },
            { "group": "Group2", "item": "Bentley" },
            { "group": "Group2", "item": "BMW" },
            { "group": "Group3", "item": "Sedan" },
            { "group": "Group3", "item": "SUV" }
        ];
  
        // jQuery function for datalist
            $(function () {
                $('#datalistID').datalist({
                    data: data,
                    textField: 'item',
                    groupField: 'group'
                })
            })
    

  

输出：