EasyUI中datagrid（数据表格）点击特定单元格获取该单元格所在行的其它属性的数据值并在控制台打印输出

最新推荐文章于 2024-07-29 01:32:22 发布

最美是初见

最新推荐文章于 2024-07-29 01:32:22 发布

阅读量4.7k

点赞数

分类专栏： EasyUI

本文链接：https://blog.csdn.net/weixin_43236850/article/details/99241449

版权

EasyUI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

EasyUI中datagrid（数据表格）点击特定单元格获取该单元格所在行的其它属性的数据值并在控制台打印输出

效果展示

点击datagrid数据表格中每一个项目的项目名称，然后在控制台打印输出“项目名称、项目编号、截止日期、项目经理、项目成员”等信息，点击其他单元格没有效果。
例如：点击A1项目，控制台输出项目名称：A1项目项目编号：ssss截止日期：2019-01-12项目经理：sadfd项目成员：safhjv。
在这里插入图片描述

实现方法

方法一

运用EasyUI datagrid（数据表格）的事件onClickCell(在用户点击一个单元格的时候触发)

具体代码：

$('#projectList').datagrid({
	method: 'get',
	url: 'datagrid_data.json',
	fitColumns: true,
	pageList: [ 5, 10, 15, 20 ],
	singleSelect: false,
	pagination: true,
	fit: true,
	rownumbers: true,
	checkOnSelect: true,
	//通过点击单元格获取单元格所在行的所有值
	onClickCell: function(rowIndex, field, value){
		if(field === 'name'){
			var row =$('#projectList').datagrid('getRows')[rowIndex];//获取单元格所在行的所有的值
			console.log(
				'项目名称：' +
				row.name +
				'项目编号：' +
				row.code +
				'起止时间：' +
				row.planStartTime +
				'项目经理：' +
				row.managerInfo +
				'项目成员：' +
				row.members
			);
	  }
   }
})

方法二

在项目名称所在的单元格追加一个a链接，并给一个onclick事件。

具体代码：

//添加onclick事件
{
   field: 'name',
   title: '项目名称',
   width: '100px',
   align: 'center',
   formatter: function(value, row, index) {
	  var rowData = JSON.stringify(row).replace(/"\"/g, "'");//注意一定要将onclick所传递的对象参数转换成json对象
	  var str = "<a onclick='clickCell(" + rowData + ")'>" + value + '</a>';
	  return str;
	}
}
//具体实现方法
function clickCell(rowData) {
if (rowData) {
	console.log(
		'项目名称：' +
			rowData.name +
			'项目编号：' +
			rowData.code +
			'截止日期：' +
			rowData.planEndTime +
			'项目经理：' +
			rowData.managerInfo +
			'项目成员：' +
			rowData.members
	);
  }
}