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: true24.});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 ...
随机推荐
- 开发者经验谈:如何一天时间搞定iOS游戏开发?
开发者经验谈:如何一天时间搞定iOS游戏开发? 在一天时间里将完成iPhone游戏开发由梦想变为现实? 本文作者给出了从创意转变成现实的详细答案.使用苹果原生游戏引擎SpriteKit,遵循一定的原则 ...
- kafka0.8.2以下版本删除topic
一些说明 kafka0.8.2及以上版本已经支持delete命令删除topic,可是之前的版本要是想删除topic还是要费一番手脚,绝对是个体力活... 该方法最好仅在线下开发环境中使用,毕竟要重启z ...
- paper 39 :Matlab绘制误差棒图(errorbar函数的使用)
同很多非数学相关专业的朋友一样,我第一次碰到这个图时也是丈二和尚摸不着头脑.只知道这个工字型的图案,中间的点代表的是平均值,上下的两条横线代表的是方差值,除此之外,连这个图叫什么名字都不知道,只好硬着 ...
- archlinux锁屏
启动管理器用的是 slim 发现锁屏可以用 slimlock
- datatables中columns.render的使用
可直接在columns申明中对应列下方使用render改变该列样式 也可单独在columnsDefs中用targets指定目标. "render":function(data,ty ...
- webApi FileReader
https://developer.mozilla.org/en-US/docs/Web/API/FileReader https://github.com/node-file-api/FileRea ...
- 深拷贝 vs 浅拷贝 释放多次
如果类中有需要new的数据,那么一定要注意delete; 如果只free一次,但是提示free多次,一定要注意了,有可能是因为你没有定义拷贝函数! 以我的亲身经历来说: operater *(mycl ...
- Oracle 临时表
一.临时表的介绍: Oracle的临时表只存在于某个会话或者事物的生命周期里,此时临时表中的数据只对当前这个会话可见. 临时表经常被用于存放一个操作的中间数据(数据处理的中间环节). 临时表由于不产生 ...
- 【PHP操作sphinx】
[index.php] [find.php] <?php header("Content-type:text/html;charset=utf-8"); $keyword = ...
- 【css】多行文字图片混排容器内垂直居中解决方案
css: .box-wrap{display:table;width:200px;height:200px;*position:relative;}/*最外边的容器,需固定宽高*/ .box-ha ...