问题描述: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(',')) }
相关推荐
首先,`datagrid`是EasyUI中的一个核心组件,它用于展示数据表格,支持分页、排序、过滤等多种操作。在实现多条件筛选时,我们需要对datagrid的`columns`属性进行配置,定义每一列的显示方式和筛选条件。例如,我们...
EasyUI的一个重要组件是datagrid,它是一个数据表格控件,可以显示多行多列的数据,并允许对这些数据进行操作和管理。有时候,为了满足特定的业务需求,在EasyUI的datagrid中需要对某些行的checkbox进行禁用处理。...
在实际开发中,确保数据绑定正确并能双向更新是非常关键的,这样才能实现CheckBox和DataGrid之间的实时交互。 通过以上步骤,我们可以成功地在DataGrid中使用CheckBox实现全选功能。这提高了用户界面的易用性,也...
在.NET框架中,WPF(Windows Presentation Foundation)提供了一个强大的数据呈现控件——DataGrid,它用于显示和编辑网格形式的数据。在实际开发中,我们经常需要根据需求对DataGrid的列标题进行自定义,以增强界面...
标题 "easyui checkbox +全选" 指的是在网页界面设计中使用 EasyUI 框架实现复选框(checkbox)以及全选功能。EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列预定义的 CSS 样式和 JavaScript 组件,帮助...
1、获取已勾选的行: var rows = $(‘#datagrid’).datagrid(‘getChecked’); 2、判断checkbox是否全选: ...以上这篇基于easyui checkbox 的一些操作处理方法就是小编分享给大家的全部内容了,希望能给大家一个参
`easyUidataGrid`是一个基于`EasyUI`框架的数据网格组件的使用示例,适合初学者学习和使用。`EasyUI`是一个轻量级的前端JavaScript库,它基于jQuery,提供了丰富的用户界面组件,包括数据网格、下拉框、表单、窗口等...
需要实现EasyUI的datagrid组件加入选择checkbox列,并提交后台批量添加的功能,页面代码如下: 代码如下: [removed] $(function() { //searchbox $(‘#selectgoods-keywords’).searchbox({ searcher: function(val,...
EasyUI 是一款基于 jQuery 的用户界面插件集合,它提供了丰富的 UI 控件,包括 datagrid,可以方便地构建出复杂的数据展示表格。Datagrid 是 EasyUI 中非常重要的一个组件,它支持多种显示模式和编辑功能。 #### 二...
8. **行选择**:Datagrid 提供单选和多选模式,通过 `singleSelect` 和 `checkbox` 属性控制。行选择的事件如 `onSelect` 和 `onUnselect` 可以帮助开发者处理选中行的操作。 9. **异步加载与懒加载**:在处理大...
在.NET框架中,`DataGrid`控件是一个用于展示数据表格的强大工具,它允许用户以交互方式查看和编辑数据。在某些应用场景下,我们可能需要在`DataGrid`的每一行添加复选框,以便用户可以多选操作,如全选和取消全选...
在使用EasyUI开发Web应用时,常常会遇到数据表格(datagrid)分页显示大量数据的情况。当用户需要在多页中选择多个项目时,如何实现跨页勾选功能呢?标题和描述中提到的问题,实际上在EasyUI的框架内是可以解决的,...
easyUI 添加CheckBox选择到DataGrid easyUI自定义DataGrid分页栏 启用DataGrid行内编辑器 继承扩展DataGrid的editors easyUI在可编辑的datagrid中计算两列的值 easyUI合并DataGrid单元格 easyUI为...
在网页设计中,表单元素如复选框(Checkbox)和单选按钮(Radio Button)是用户交互的重要组成部分。它们通常用于收集用户的选择性信息,例如用户同意服务条款、选择偏好或进行多选项决策。然而,原生的HTML表单元素...
在前端开发中,EasyUI 是一个基于 jQuery 的 UI 框架,它提供了一系列美观、易用的组件,用于构建用户界面。在这个实例中,我们将深入探讨 EasyUI 中的两个重要组件:`easyui-textbox` 和 `easyui-combobox`,以及...
- **介绍**:EasyUI DataGrid提供了一种名为Virtual Scroll View的视图模式,专门用于改善大数据量下的性能问题。 - **实施步骤**:启用此视图模式,以减少页面滚动时的数据重绘次数,从而提升整体性能。 #### 勾选...
1、此demo适合初次学习easyui 2、DEMO中内含client端和server端的简单交互 3、server端非常简单的使用servlet和jdbc连接 ...5、datagrid中使用了checkbox,textbox,combobox。 6、combobox 实现了模糊查询
Datagrid是EasyUI提供的一个强大的表格控件,可以用来展示大量数据,并提供了很多实用的功能,例如分页、排序、编辑等。下面我们来详细介绍如何使用EasyUI创建一个Datagrid。 首先,我们需要在HTML文件中定义一个...