一，效果图。

二，源代码。

<!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. Jps介绍以及解决jps无法查看某个已经启动的java进程问题【盗用】

    1.jps的作用 jps类似linux的ps命令,不同的是ps是用来显示进程,而jps只显示java进程,准确的说是当前用户已启动的部分java进程信息,信息包括进程号和简短的进程command. 2 ...

  2. IntelliJ IDEA中创建并运行scala应用程序

    1.安装scala插件 2.创建scala项目 下载scala SDK,如果你已经下载了,选择你所下载的版本,点击OK

  3. divmod数字处理函数

    divmod(a,b)函数 中文说明: divmod(a,b)方法返回的是a//b(除法取整)以及a对b的余数 返回结果类型为tuple 参数: a,b可以为数字(包括复数) 版本: 在python2 ...

  4. C++ 面向对象学习2 构造方法

    Date.h #ifndef DATE_H #define DATE_H class Date{ public: Date(,,);//自定义了构造方法 会覆盖掉默认的无参构造方法 void setD ...

  5. 远程管理服务SSHD

    安装SSH yum install openssh

  6. Windows Azure 即将更名

     今天我们宣布自2014 年4 月3 日起,WindowsAzure 将更名为Microsoft Azure.这一更名反映了Microsoft 的战略,并显示了Microsoft 专注于将Azur ...

  7. php定界符 <<< 的作用及使用注意事项

    按照原样输出,包括换行符.特殊字符等 任何特殊字符都不需要转义,比如双引号.单引号,它会按照原样输出 像在双引号字符串中一样使用php的变量输出 定界符<<<,当需要输出大段文本时, ...

  8. Dream

    即使下着雨,天空依旧明亮,因为远方有我的梦想.   ——forever97

  9. 74HC595的中文资料

    74HC595--具有三态输出锁存功能的8位串行输入.串行/并行输出移位寄存器 本文翻译自NXP的74HC595的datasheet 74HC595和74HCT595是带有存储寄存器和三态输出的8位串 ...

  10. 介绍一个python的新的web framework——karloop框架

    karloop是一款轻型的web framework,和tornado.webpy类似.mvc分层设计,眼下已经公布早期版本号了,使用方便, 下载地址例如以下:https://github.com/k ...