一，效果图。

二，源代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group DataList - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo.css">
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Group DataList</h2>
<p>This example shows how to display items in groups.</p>
<div style="margin:20px 0"></div>
<div id="#dglist" class="easyui-datalist" title="Group DataList" style="width:400px;height:250px" data-options="
method: 'get',
groupField: 'group'
">
</div>

<script type="text/javascript">

$().ready(function(){

$("#dglist").datalist({data:[
{"text":"Epson WorkForce 845","group":"Printer"},
{"text":"Canon PIXMA MG5320","group":"Printer"},
{"text":"HP Deskjet 1000 Printer","group":"Printer"},
{"text":"Cisco RV110W-A-NA-K9","group":"Firewall"},
{"text":"ZyXEL ZyWALL USG50","group":"Firewall"},
{"text":"NETGEAR FVS318","group":"Firewall"},
{"text":"Logitech Keyboard K120","group":"Keyboard"},
{"text":"Microsoft Natural Ergonomic Keyboard 4000","group":"Keyboard"},
{"text":"Logitech Wireless Touch Keyboard K400","group":"Keyboard"},
{"text":"Logitech Gaming Keyboard G110","group":"Keyboard"},
{"text":"Nikon COOLPIX L26 16.1 MP","group":"Camera"},
{"text":"Canon PowerShot A1300","group":"Camera"},
{"text":"Canon PowerShot A2300","group":"Camera"}

]
});

});

</script>
</body>
</html>

Group DataList的更多相关文章

  1. easyui datalist按组多选

    结果如下: 数据样式如下: [ {"text":"Epson WorkForce 845","group":"Printer&qu ...

  2. Android之ExpandableListView的属性（Group不展开）

    1. 设置ExpandableListView 默认是展开的:  先实例化exListView 然后 exListView.setAdapter(exlvAdapter); //遍历所有group,将 ...

  3. Mysql按日期分组（group by）查询统计的时候，没有数据补0的解决办法

    转载自:http://blog.csdn.net/jie11447416/article/details/50887888 1.案例中的数据结构和数据如下 2.在没有解决的时候,是这样的   SELE ...

  4. LINQ Group By操作

    在上篇文章 .NET应用程序与数据库交互的若干问题 这篇文章中,讨论了一个计算热门商圈的问题,现在在这里扩展一下,假设我们需要从两张表中统计出热门商圈,这两张表内容如下: 上表是所有政区,商圈中的餐饮 ...

  5. 利用HTML5 的Datalist 元素实现输入提示

    HTML5有无限可能,总是在释出一些新鲜实用的功能,让原生的web环境更加炫酷. 今天看到datalist 这个元素,可以用来预先定义一个输入框的潜在选项,也就是我们在平时项目中经常用jQuery插件 ...

  6. Kafka消费组(consumer group)

    一直以来都想写一点关于kafka consumer的东西,特别是关于新版consumer的中文资料很少.最近Kafka社区邮件组已经在讨论是否应该正式使用新版本consumer替换老版本,笔者也觉得时 ...

  7. LINQ to SQL语句(6)之Group By/Having

    适用场景:分组数据,为我们查找数据缩小范围. 说明:分配并返回对传入参数进行分组操作后的可枚举对象.分组:延迟 1.简单形式: var q = from p in db.Products group ...

  8. 学习笔记 MYSQL报错注入(count()、rand()、group by)

    首先看下常见的攻击载荷,如下: select count(*),(floor(rand(0)*2))x from table group by x; 然后对于攻击载荷进行解释, floor(rand( ...

  9. [备查]使用 SPQuery 查询 "Person or Group" 字段

    原文地址:http://www.stum.de/2008/02/06/querying-the-person-or-group-field-using-spquery/ Querying the “P ...

随机推荐

  1. SQL Server配置管理WMI问题

       今天在打开数据库的时候,连接不上.一看错误就知道肯定是SQL Server的服务没开启,所以自然而然的去SQL Server配置管理中去打开,但是打开配置管理器的时候出现了下面的错误:      ...

  2. jbpmAPI-7

    7.1. Introduction 业务流程的一个重要方面是人工任务管理.虽然一些执行的工作过程中可以自动执行一些任务需要执行的人类演员.jBPM支持特殊的人工任务节点内部流程建模与人类用户交互.这个 ...

  3. php学习笔记（3）

    1.计数器 <?php /* simple access counter for php3 (c)1998 David W. Bettis dbettis@eyeintegrated.com m ...

  4. PHP学习笔记7-JSON数据操作

    JSON,全称是JavaScript Object Notation.它是基于JavaScript编程语言ECMA-262 3rd Edition-December 1999标准的一种轻量级的数据交换 ...

  5. [LeetCode]题解（python）：072-Edit Distance

    题目来源: https://leetcode.com/problems/edit-distance/ 题意分析: word1最少通过多少步可以变成word2.word1只能进行一下的操作.a)插入一个 ...

  6. win7下Java环境变量配置及说明

    在官网上下载与操作系统对应的JDK(http://www.oracle.com/index.html) 比如我的安装路径是E:\jdk1.7.0_51\JDK 右击计算机---->属性----& ...

  7. Java Socket 入门1

    由程序逻辑可以看到 这是一个 客户端和服务端一对一聊天的程序  首先由服务端说第一句话然后对话才开始 且只能客户端一行话  服务端再一行话 这样往复进行  客户端若想不等服务端回应继续说话是不行的 服 ...

  8. 阻止系统自动睡眠的小软件，附C#制作过程

    原文 http://www.cnblogs.com/h46incon/p/SleepPreventer.html 因为有时下载东西的时候,不想让电脑自动深入睡眠,所以就开启了离开模式.这样不但不节能环 ...

  9. Oracle 存储过程DEMO

    );   cursor isbns is select ISBN,id from librarys;   bn isbns%rowtype;   begin  for bn in isbns  loo ...

  10. JAVA GUI学习 - JOptionPane对话框组件学习

    /** * 对话框 - 学习笔记 * @author Wfei * */ public class JoptionPaneKnow extends JFrame { public JoptionPan ...