结果如下:

数据样式如下:

[
{"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"}
]

代码如下:

<div class="easyui-datalist" title="Group DataList" id='list' style="width:400px;height:500px" data-options="
url: 'datalist_data1.json',
method: 'get',
groupField: 'group',
checkbox: true,
selectOnCheck: false,
onBeforeSelect: function(){return false;},
groupFormatter: groupFormatter
">
</div>
<script type="text/javascript">

        function groupFormatter(fvalue, rows){

            var first = $("#list").datalist('getRowIndex',rows[0]);
return "<input name='checkbox' type='checkbox' value='checkbox' onclick='checkall(this,"+ first +", " + rows.length + " )'/>" + fvalue + ' - <span style="color:red">' + rows.length + ' rows</span>';
} function checkall(node, first, length){ if(node.checked){
for(var i = 0; i < length; i++)
$("#list").datalist('checkRow',first+i);
}else{
for(var i = 0; i < length; i++)
$("#list").datalist('uncheckRow',first+i);
}
}
</script>

easyui datalist按组多选的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  2. easyui datagrid里的复选框置灰方法

    easyui datagrid里的复选框置灰方法: $('.datagrid input').prop('disabled',true);//复选框置灰

  3. 【hdu3033】分组背包(每组最少选一个)

    [题意] 有S款运动鞋,一个n件,总钱数为m,求不超过总钱数且每款鞋子至少买一双的情况下,使价值最大.如果有一款买不到,就输出“Impossible". 1<=N<=100  1 ...

  4. EASYUI DATAGRID 多列复选框CheckBox

    主要实现: 用的 easyui 1.3.2 实现多个复选框列,各列互不影响.能够实现全选.主要部门用红色标记了的. easyui datagrid 初始化: <script> functi ...

  5. easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选

    最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...

  6. js实现checkbox组 全选和取消全选

    做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...

  7. easyui combobox的增加全选解决方案

      1.解决方案背景: 项目中偶然需要用到easyui的combobox的组件,但是本组件自己没有包含全选的api事件.搜索了一些解决方案,但是不是很符合,后来发现是因为所使用的版本不一致所导致的.项 ...

  8. EasyUI中combotree允许多选的时候onSelect事件会重复触发onCheck事件

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgEAAADkCAIAAACOkmAuAAAgAElEQVR4nO2dW2wc15nnO0EQBJsdzA

  9. EasyUI combobox下拉多选框的实现

    combobox实现下拉列表多选, 效果如下

随机推荐

  1. jQuery如何判断元素是否是隐藏的?

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  2. JavaScript类型判断instanceof与typeof对比

    经常有人会在JavaScript里写如下的方法: function checkType() { var s1 = 123; var s2 = "OK"; if (s1 instan ...

  3. C/C++ 静态链接库(.a) 与 动态链接库(.so)

    平时我们写程序都必须 include 很多头文件,因为可以避免重复造轮子,软件大厦可不是单靠一个人就能完成的.但是你是否知道引用的那些头文件中的函数是怎么被执行的呢?这就要牵扯到链接库了! 库有两种, ...

  4. 安装切换openjdk

    安装各种版本openjdk sudo apt-get install openjdk-6-jdk sudo apt-get install openjdk-7-jdk sudo apt-get ins ...

  5. CI在ngnix的配置

    CI的访问路径是酱紫的: http://localhost/index.php/cname/mname 其中cname为controller的名称,mname为method的名称 但是nginx会把i ...

  6. redis 快速入门(win7)

    0:介绍 百度百科or官网 1:下载  选择32位或者64 地址:https://github.com/dmajkic/redis/downloads 1.1下载后如图 1.2文件介绍 redis-s ...

  7. Java 集合类 TreeSet、TreeMap

    TreeMap和TreeSet的异同: 相同点: TreeMap和TreeSet都是有序的集合,也就是说他们存储的值都是拍好序的. TreeMap和TreeSet都是非同步集合,因此他们不能在多线程之 ...

  8. iOS创建自定义的xib视图,不带控制器调用

    1 我们平常使用视图都是在控制器中加载各种视图,但是有时候一个单独的视图,弄一个控制器未免有些显得太沉重了,所以我们现在来创建一个带xib加载视图的自定义视图 2 创建一个视图类集成uiview 3 ...

  9. java学习第三天 数组

    java中数组一样存在多维,二维数组,三维数组..... 二维数组的定义  格式: 数据类型 [][] 数组名 = new 数据类型 [][]; 动态初始化 数据类型[][] 数组名 =  new 数 ...

  10. iOS之ToolBar定制

    ToorBar的定制 在诸如社区类的app里面,很多都涉及到用户发布消息,如现今最流行的新浪微博,每条信息底部都会有个工具条,正如下图所示,有转发.评论和点赞三个按钮的工具条. 结构 1.作为一个独立 ...