`
kanpiaoxue
  • 浏览: 1781352 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

easyui datagrid checkbox 多选获取的数据不正确

 
阅读更多

问题描述:easyui datagrid checkbox进行多选的时候,获取的数据与选择的数据不一致,有的时候一条数据,有的时候多条数据。

根源:easyui datagrid 设置了 idField 列造成的。

解决:使用好 idField 列,或者去掉这个配置。

如下:

	$('#dg_taskgrid')
			.datagrid(
					{
						remoteSort : true,
						/*toolbar : [ {
							text : '批量修复',
							iconCls : 'icon-batch-repair',
							handler : function() {
								batchRepairAction();
							}
						} ],*/
						
						toolbar : '#tb_ops',
						singleSelect: false,
                        checkOnSelect : false,
                        selectOnCheck : false,
						title : '任务列表',
						fitColumns : true, // 设置列宽度自适应屏幕
						iconCls : 'icon-task-list',
						striped : true,
						url : basePath + 'web/op/queryTaskLog',
						method : 'get',
						width: $(window).width()*0.9,
						pageNumber : 1,
						pageSize : baseNum, // 设置默认分页大小
						pageList : pageList, // 设置分页大小
						idField : 'versionId',
						columns : [ [
                                {
                                    checkbox : true
                                },
										 
								{
									field : 'taskId',
									title : '任务ID',
									width : 40,
									align : 'center',
									sortable : true
								},
								{
									field : 'taskName',
									title : '任务名称',
									width : 80,
									align : 'center',
									sortable : false,
									formatter : function(val, row, rowIndex) {
										var taskName = val;
										var taskId = row.taskId;
										var length = 40;
										var showTaskName = suitableLengthText(
												taskName, length);
										var arr = [];
										arr
												.push('<a href="javascript:void(0);" title="');
										arr.push(taskName);
										arr.push('" class="'
												+ SHOW_FIRST_TOOLTIP_CLASS
												+ '" onclick="openTaskDeatil(');
										arr.push(taskId);
                                        arr.push(',2)">');
										arr.push(showTaskName);
										arr.push('</a>');
										return arr.join('');

									}
								}, 
								
								{
				                    field : 'versionNo',
				                    title : '数据版本',
				                    width : 30,
				                    align : 'center',
				                    sortable : true
				                },
				                {
									field : 'state',
									title : '版本状态',
									width : 30,
									align : 'center',
									sortable : true,
									formatter : versionStateFormat
								}, 
				                {
				                    field : 'startTime',
				                    title : '运行开始时间',
				                    width : 40,
				                    align : 'center',
				                    sortable : true,
				                    formatter : function(val, row, rowIndex) {
				                        if (null == val) {
				                            return '-';
				                        } else {
				                            return val;
				                        }
				                    }
				                },
				                {
				                    field : 'endTime',
				                    title : '运行结束时间',
				                    width : 40,
				                    align : 'center',
				                    sortable : true,
				                    formatter : function(val, row, rowIndex) {
				                        if (null == val) {
				                            return '-';
				                        } else {
				                            return val;
				                        }
				                    }
				                },
				                {
									field : 'elapsedLabel',
									title : '运行耗时',
									width : 20,
									align : 'center',
									sortable : false
								}, 
				                {
				                    field : 'message',
				                    title : '信息',
				                    width : 80,
				                    align : 'left',
				                    sortable : false,
				                    formatter : function(val, row, rowIndex) {
				                        var length = 30;
				                        var showVal = suitableLengthText(val,
				                            length);
				                        var arr = [];
				                        arr.push('<span class="'
				                            + SHOW_FIRST_TOOLTIP_CLASS
				                            + '" title="');
				                        arr.push(val);
				                        arr.push('">');
				                        arr.push(showVal);
				                        arr.push('</span>');
				                        return arr.join('');
				                    }
				                },{
									field : 'teamName',
									title : '团队名称',
									width : 30,
									align : 'center'
								},  {
									field : 'op',
									title : '操作',
									//width : 40,
									align : 'center',
									formatter : formatOp,
									sortable : false
								} ] ],
						pagination : true,
						queryParams : {
							filters : params
						},
						onLoadSuccess : function(data) {
							addToolTips(SHOW_FIRST_TOOLTIP_CLASS);
						}
					});

};

 

附加 checkbox的多选函数:

function batchKillTaskAction(){
    // FIXME 20150709
    var checkedItems = $('#dg_taskgrid').datagrid('getChecked');
    var arr = [];
    $.each(checkedItems, function(index, item){
        var str = item.taskId + ':' + item.versionNo;
        arr.push(str);
    });
    console.log('arr:'+arr.length+' --> '+arr.join(','))
}

 

分享到:
评论

相关推荐

    easyui datagrid 多条件筛选 可复选 类似淘宝筛选

    首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、过滤等多种操作。在实现多条件筛选时,我们需要对datagrid的`columns`属性进行配置,定义每一列的显示方式和筛选条件。例如,我们...

    jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法

    EasyUI的一个重要组件是datagrid,它是一个数据表格控件,可以显示多行多列的数据,并允许对这些数据进行操作和管理。有时候,为了满足特定的业务需求,在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。...

    在DataGrid中使用CheckBox,实现全选功能

    在实际开发中,确保数据绑定正确并能双向更新是非常关键的,这样才能实现CheckBox和DataGrid之间的实时交互。 通过以上步骤,我们可以成功地在DataGrid中使用CheckBox实现全选功能。这提高了用户界面的易用性,也...

    DataGrid自定义列标题

    在.NET框架中,WPF(Windows Presentation Foundation)提供了一个强大的数据呈现控件——DataGrid,它用于显示和编辑网格形式的数据。在实际开发中,我们经常需要根据需求对DataGrid的列标题进行自定义,以增强界面...

    easyui checkbox +全选

    标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...

    基于easyui checkbox 的一些操作处理方法

    1、获取已勾选的行: var rows = $(‘#datagrid’).datagrid(‘getChecked’); 2、判断checkbox是否全选: ...以上这篇基于easyui checkbox 的一些操作处理方法就是小编分享给大家的全部内容了,希望能给大家一个参

    easyUidataGrid

    `easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...

    ASP.NET MVC使用EasyUI的datagrid多选提交保存教程

    需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 代码如下: [removed] $(function() { //searchbox $(‘#selectgoods-keywords’).searchbox({ searcher: function(val,...

    Easyui-datagrid编辑模式详解

    EasyUI 是一款基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 控件,包括 datagrid,可以方便地构建出复杂的数据展示表格。Datagrid 是 EasyUI 中非常重要的一个组件,它支持多种显示模式和编辑功能。 #### 二...

    easyUI,datagrid小样例

    8. **行选择**:Datagrid 提供单选和多选模式,通过 `singleSelect` 和 `checkbox` 属性控制。行选择的事件如 `onSelect` 和 `onUnselect` 可以帮助开发者处理选中行的操作。 9. **异步加载与懒加载**:在处理大...

    在DataGrid中进行复选框的操作(全选和取消)

    在.NET框架中,`DataGrid`控件是一个用于展示数据表格的强大工具,它允许用户以交互方式查看和编辑数据。在某些应用场景下,我们可能需要在`DataGrid`的每一行添加复选框,以便用户可以多选操作,如全选和取消全选...

    easyui 中的datagrid跨页勾选问题的实现方法

    在使用EasyUI开发Web应用时,常常会遇到数据表格(datagrid)分页显示大量数据的情况。当用户需要在多页中选择多个项目时,如何实现跨页勾选功能呢?标题和描述中提到的问题,实际上在EasyUI的框架内是可以解决的,...

    EasyUI tutorial 中文版 chm

    easyUI 添加CheckBox选择到DataGrid easyUI自定义DataGrid分页栏 启用DataGrid行内编辑器 继承扩展DataGrid的editors easyUI在可编辑的datagrid中计算两列的值 easyUI合并DataGrid单元格 easyUI为...

    9款表单复选框(Checkbox)与单选按钮美化

    在网页设计中,表单元素如复选框(Checkbox)和单选按钮(Radio Button)是用户交互的重要组成部分。它们通常用于收集用户的选择性信息,例如用户同意服务条款、选择偏好或进行多选项决策。然而,原生的HTML表单元素...

    easyui-textbox和easyui-combobox的onchange事件响应实例

    在前端开发中,EasyUI 是一个基于 jQuery 的 UI 框架,它提供了一系列美观、易用的组件,用于构建用户界面。在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及...

    JQuery Easy-UI DataGrid性能调优

    - **介绍**:EasyUI DataGrid提供了一种名为Virtual Scroll View的视图模式,专门用于改善大数据量下的性能问题。 - **实施步骤**:启用此视图模式,以减少页面滚动时的数据重绘次数,从而提升整体性能。 #### 勾选...

    EasyUI DataGrid Demo

    1、此demo适合初次学习easyui 2、DEMO中内含client端和server端的简单交互 3、server端非常简单的使用servlet和jdbc连接 ...5、datagrid中使用了checkbox,textbox,combobox。 6、combobox 实现了模糊查询

    详解EasyUi控件中的Datagrid

    Datagrid是EasyUI提供的一个强大的表格控件,可以用来展示大量数据,并提供了很多实用的功能,例如分页、排序、编辑等。下面我们来详细介绍如何使用EasyUI创建一个Datagrid。 首先,我们需要在HTML文件中定义一个...

Global site tag (gtag.js) - Google Analytics