easyui datalist按组多选
结果如下:

数据样式如下:
[
{"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按组多选的更多相关文章
- 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框
jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...
- easyui datagrid里的复选框置灰方法
easyui datagrid里的复选框置灰方法: $('.datagrid input').prop('disabled',true);//复选框置灰
- 【hdu3033】分组背包(每组最少选一个)
[题意] 有S款运动鞋,一个n件,总钱数为m,求不超过总钱数且每款鞋子至少买一双的情况下,使价值最大.如果有一款买不到,就输出“Impossible". 1<=N<=100 1 ...
- EASYUI DATAGRID 多列复选框CheckBox
主要实现: 用的 easyui 1.3.2 实现多个复选框列,各列互不影响.能够实现全选.主要部门用红色标记了的. easyui datagrid 初始化: <script> functi ...
- easyui Tree模拟级联勾选cascadeCheck,节点选择,父节点自动选中,节点取消,父节点自动取消选择,节点选择,所有子节点全部选择,节点取消,所有子节点全部取消勾选
最近项目中用到easyui tree,发现tree控件的cascadeCheck有些坑,不像miniui 的tree控件,级联勾选符合业务需求,所以就自己重新改写了onCheck事件,符合业务需求.网 ...
- js实现checkbox组 全选和取消全选
做后台管理程序时,用到一个checkbox组的全选和取消全选的功能, 主要是逻辑上的坑,理清后大概是: 1.全选点击后,小弟1~4都要选上,点击取消,小弟们也要取消 2.只要有一个小弟取消时,全选要取 ...
- easyui combobox的增加全选解决方案
1.解决方案背景: 项目中偶然需要用到easyui的combobox的组件,但是本组件自己没有包含全选的api事件.搜索了一些解决方案,但是不是很符合,后来发现是因为所使用的版本不一致所导致的.项 ...
- EasyUI中combotree允许多选的时候onSelect事件会重复触发onCheck事件
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgEAAADkCAIAAACOkmAuAAAgAElEQVR4nO2dW2wc15nnO0EQBJsdzA
- EasyUI combobox下拉多选框的实现
combobox实现下拉列表多选, 效果如下
随机推荐
- Table
Table tb = new Table();TableRow r = new TableRow(); TableCell c = new TableCell();c.Text = "Sta ...
- iframe框架在IE浏览器,360兼容浏览器下将白色背景设为透明色
<IFRAME ID="Frame1" SRC="transparentBody.htm"></IFRAME> iframe在大部分浏览 ...
- [Head First设计模式]饺子馆(冬至)中的设计模式——工厂模式
系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...
- thwen 缓动框架
描述 目前提供一个方法 ele 元素对象 obj 操作 duration 时间 effect 缓动选择 thwenMove(option) 框架支持以下缓动策略 -指数衰减的正弦曲线缓动 -圆形曲线的 ...
- [Linux & Mysql] Linux下Mysql的基本操作
1. 连接Mysql 1.1 连接到本机上的Mysql 键入命令mysql -u root -p,回车后提示你输密码.注意用户名前可以有空格也可以没有空格,但是密码前必须没有空格,否则让你重新输入密码 ...
- 【bzoj3036】绿豆蛙的归宿
题目描述 随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿. 给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点.到达每一个顶点时,如 ...
- 【荐】怎么用PHP发送HTTP请求(POST请求、GET请求)?
file_get_contents版本: <?php /** * 发送post请求 * @param string $url 请求地址 * @param array $post_data pos ...
- Mac Pro 安装 Sublime Text 3,个性化设置,主题 和 插件 收藏
1.到官网下载安装包 http://www.sublimetext.com/3 2.附注册码一枚 Sublime Text 3 3126 —– BEGIN LICENSE —– Alexey Plut ...
- 03OC的类的补充
上一章我们介绍了类的定义,以及类的里面如何定义成员变量,如何定义方法等等. 一.self关键字 1.在C#中有关键字this表示当前对象,其实在OC中也有类似的关键字self,只是self关键字不仅表 ...
- Wampserver主机服务配置方法
一.更改根目录 1.左键”www目录”路径更改Wampserver安装好后,“www目录”默认为X:\wamp\www,也就是wampserver安装目录下的www文件夹.实际使用中,默认设置往往不 ...