easyui DataGrid 的 Checkbox 选择多行
这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序,
1.
$(
'#ButonGetCheck'
).click(
function
(){
2.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
3.
var
names = [];
4.
$.each(checkedItems,
function
(index, item){
5.
names.push(item.productname);
6.
});
7.
console.log(names.join(
","
));
8.
});
执行结果:
完整 Javascript 程序如下:
01.
$(
function
(){
02.
$(
'#dg'
).datagrid({
03.
title:
'CheckBox Selection on DataGrid'
,
04.
url:
'datagrid_data3.json'
,
05.
width:
'700'
,
06.
rownumbers:
true
,
07.
columns:[[
08.
{field:
'checked'
,formatter:
function
(value,row,index){
09.
if
(row.checked){
10.
return
'<input type="checkbox" name="DataGridCheckbox" checked="checked">'
;
11.
}
12.
else
{
13.
return
'<input type="checkbox" name="DataGridCheckbox">'
;
14.
}
15.
}},
16.
{ field:
'productid'
, title:
'productid'
},
17.
{ field:
'productname'
, title:
'productname'
},
18.
{ field:
'unitcost'
, title:
'unitcost'
},
19.
{ field:
'status'
, title:
'status'
},
20.
{ field:
'listprice'
, title:
'listprice'
},
21.
{ field:
'itemid'
, title:
'itemid'
}
22.
]],
23.
singleSelect:
true
24.
});
25.
26.
$(
'#ButonGetCheck'
).click(
function
(){
27.
var
checkedItems = $(
'#dg'
).datagrid(
'getChecked'
);
28.
var
names = [];
29.
$.each(checkedItems,
function
(index, item){
30.
names.push(item.productname);
31.
});
32.
console.log(names.join(
","
));
33.
});
34.
});
35.
36.
$.extend($.fn.datagrid.methods, {
37.
getChecked:
function
(jq) {
38.
var
rr = [];
39.
var
rows = jq.datagrid(
'getRows'
);
40.
jq.datagrid(
'getPanel'
).find(
'div.datagrid-cell input:checked'
).each(
function
() {
41.
var
index = $(
this
).parents(
'tr:first'
).attr(
'datagrid-row-index'
);
42.
rr.push(rows[index]);
43.
});
44.
return
rr;
45.
}
46.
});
easyui DataGrid 的 Checkbox 选择多行的更多相关文章
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
- easyui datagrid editor checkbox 单击事件
Easyui datagrid treegrid中能够为行追加checkbox元素.比如: $('#tt').treegrid({ url:'get_data.php', idField:'id', ...
- easyUI datagrid中checkbox选中事件以及行点击事件,翻页之后还可以选中
DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选 ...
- easyUI datagrid中 checkbox 各属性和事件
DataGrid其中与选择,勾选相关 DataGrid属性:singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行 ...
- JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)
1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRow ...
- EasyUI datagrid 的checkbox设置
参考url: http://blog.csdn.net/baronyang/article/details/9323463 我的需求: 抓取数据生成的日志,日志中有部分是抓取失败的,需要将失败的发送到 ...
- easyui datagrid如何获取到每行的文本框
在return '<input type="text" name="txtCount" class="inputvalue"/> ...
- 学习日记6、easyui datagrid 新增一行,编辑行,结束编辑和删除行操作记录
1.新增一行并进入编辑状态 var index=$('#Numbers').datagrid('appendRow', { CardInformation: '开户行', CardNumber: '银 ...
- easyui datagrid 跨页选择
$.fn.extend( memberList ,{ quickSearch : function() { var time1 = new Date(); /* this.datagrid.datag ...
随机推荐
- CCF真题之相反数
201403-1 问题描述 有 N 个非零且各不相同的整数.请你编一个程序求出它们中有多少对相反数(a 和 -a 为一对相反数). 输入格式 第一行包含一个正整数 N.(1 ≤ N ≤ 500). ...
- 找到多个与名为“Index”的控制器匹配的类型的解决方法!
“/”应用程序中的服务器错误. 找到多个与名为“Index”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由在搜索匹配此请求的控制器时没有指定 ...
- PAT乙级 1023. 组个最小数 (20)
1023. 组个最小数 (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CAO, Peng 给定数字0-9各若干个.你可以以 ...
- 全志A20芯片用于启动的SD卡的布局
起始 大小 内容 0 8KB 存放分区表等 8 24KB SPL loader 32 512KB u-boot 544 128KB environment 672 352KB 保留 1024 - 用于 ...
- 【ubuntu】install openbox+tint2+bmenu on ubuntu12.04.4
原文地址: http://ndever.net/articles/linux/install-openbox-ubuntu-1304-1310 openbox是我用过的轻量窗口中最好用的了. Step ...
- 利用 iptables 命令限制单个端口的并发连接数
iptables -I INPUT -p tcp --dport 11251:11300 -m connlimit --connlimit-above 10 -j REJECT 以上代码意思: 在IN ...
- TI CC2541的整体目标
1. App端会发送一定数量的byte过来蓝牙, 每2个byte是一个汉字的编码. 2. 拿到汉字编码之后, 统计字符数量, 然后通过SPI, 搜索编码 3. 收到的编码, 每个汉字字符有32个byt ...
- MAVEN修改localRepository不起作用
MAVEN修改localRepository不起作用 环境:win10 改用其他盘符都可以,唯独C:\Users\Administrator\.m2\repository不起作用,应该是win10权限 ...
- Linux下Nagios的安装与配置
一.本文说明 本文是在参考:http://www.cnblogs.com/mchina/archive/2013/02/20/2883404.html David_Tang文章以及网上的一些资料完 ...
- 工具类 dp转px 获取图片实际尺寸 获取屏幕尺寸
dp转px public class Dp2pxUtils { public static int Dp2Px(Context context, float dp) { final float sca ...