一，效果图。

二，源代码。

<!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. [LeetCode]题解（python）：002-Add Two Numbers

    题目来源: https://leetcode.com/problems/add-two-numbers/ 题意分析: 这道题目是要将两个单链条相加.输出得到的新链条. 题目思路: 不难发现,其实题目就 ...

  2. GCD 之 同步 异步 并发

    1. dispatch_async(dispatch_get_global_queue(, ), ^{ // 处理耗时操作的代码块... //通知主线程刷新 dispatch_async(dispat ...

  3. cocos2dx 随机函数

    cocos2dx 随机数  2.2.3版本 1.初始化时设定随机数种子,只需一次. time_t now = time(NULL); srand((unsigned int)now); 2.需要的时候 ...

  4. Aone新拉分支

    1.进入Aone新建项目 2.测试人员填huyangjun和husong 3.进入后拉分支 4.弄个日常普通环境 5.吧环境跑起,绑定Host就可以

  5. QT窗口拖拽功能简单应用（处理dragEnterEvent和dropEvent事件，不同的事件有不同的信息，比如mimeData）

    void dragEnterEvent(QDragEnterEvent *event); void dropEvent(QDropEvent *event); ui->lineEdit-> ...

  6. hdu 4119 Isabella's Message

    Isabella's Message Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...

  7. mget 同时获取

    mget 同时获取: http://192.168.32.81:9200/ _mget POST { "docs" :[ { "_index":"li ...

  8. TableLayoutPanel 的使用

    VS自带控件TableLayoutPanel的功能应用网上都有资料.下面是使用中的一些问题. 1.动态加载控件时使用SetRowSpan.SetColumnSpan方法会使得界面响应缓慢 解决方案: ...

  9. WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF

    WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF WeasyPrint c ...

  10. Warning: Unable to send packet: Error with PF_PACKET send() [11]: Message too long (errno = 90)

    今天在使用tcpreplay重放流量时,发现有的数据包没有发送成功: Warning: Unable to send packet: Error with PF_PACKET send() [215] ...