一，效果图。

二，源代码。

<!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. [转]深度探索C语言函数可变长参数

    转自:http://www.cnblogs.com/chinazhangjie/archive/2012/08/18/2645475.html 一.基础部分 1.1 什么是可变长参数 可变长参数:顾名 ...

  2. （Problem 72）Counting fractions

    Consider the fraction, n/d, where n and d are positive integers. If nd and HCF(n,d)=1, it is called ...

  3. mapper分页排序指定字段查询模板

    StudentQuery: package Student; import java.util.ArrayList; import java.util.List; public class Stude ...

  4. JS 引用

    var arr1=[1,2,3,4]; var arr2=arr1; arr2.push(5); console.log(arr1);//和arr2一样 console.log(arr1==arr2) ...

  5. jvm学习小结

    1. JDK.JRE.JVM之间的关系.JDK包含JRE和其它开发工具库如编译器.调试期,jConsele性能检测工具等2. JVM的构成:类装载器子系统.执行引擎.运行时数据区,如下图: 3. JV ...

  6. js超简单日历

    用原生js写了一个超级简单的日历.当做是练习js中的Date类型. 思路: 获取某个日期,根据年份计算出每个月的天数. 利用Date中的getDay()知道该月份的第一天为星期几. 循环创建表格,显示 ...

  7. Oracle查询数据中占用空间最大的表

    --第一步,查询istaudit数据库文件ID,文件路径 select file#,name from v$datafile where lower(name) like '%istaudit.dbf ...

  8. BlokUI的使用

    1.点击弹出层以外的区域关闭弹出层 $(document).ready(function() {     $('#demo9').click(function() {         $.blockU ...

  9. NAS简介

    转自IBM资料库:https://community.emc.com/docs/DOC-15977 在20世纪80年代初,英国纽卡斯尔大学布赖恩.兰德尔教授 ( Brian Randell)和同事通过 ...

  10. [转] HTC:html组件

    ~~~不时会看到 用htc实现 hover, border-raius等效果,可以用来弥补IE6-8的不足.那么htc到底是什么呢? 1.摘要 本文在实例的基础上讨论了HTC(HTML Compone ...