EasyUI学习系列（一）——Datagrid单元格按钮

最新推荐文章于 2026-05-19 05:06:20 发布

原创最新推荐文章于 2026-05-19 05:06:20 发布 · 1.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#datagrid #easyui #function

本文是EasyUI学习系列的第一部分，主要聚焦于Datagrid中的单元格按钮。通过介绍EasyUI的formatter属性，详细阐述如何在Datagrid单元格内添加功能按钮，提升数据展示的交互性。

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看

首先引用EasyUI文档关于formatter相关知识

属性名称 属性值类型 描述

formatter

function

单元格formatter(格式化器)函数，带3个参数：
value：字段值。
rowData：行记录数据。
rowIndex: 行索引。

代码示例：

	$('#dg').datagrid({
		columns : [ [ {
			field : 'userId',
			title : 'User',
			width : 80,
			formatter : function(value, row, index) {
				if (row.user) {
					return row.user.name;
				} else {
					return value;
				}
			}
		} ] ]
	});

接下来是重头戏，注意formatter的位置

<span style="font-size:14px;">	$('#dg_project').datagrid({
		fit : true,
		fitColumns : true,
		rownumbers : true,
		pagination : true,
		singleSelect : true,
		border : false,
		striped : true,
		url : 'json/manage_project.json',
		toolbar : [ {
			text : '增加工程',
			iconCls : 'icon-add',
			handler : function() {
				newProject();
			}
		}, '-', {
			text : '编辑工程',
			iconCls : 'icon-edit',
			handler : function() {
				editProject();
			}
		}, '-', {
			text : '移除工程',
			iconCls : 'icon-remove',
			handler : function() {
				removeProject();
			}
		} ],
		columns : [ [ {
			field : 'unid',
			title : 'UNID',
			rowspan : 2,
			hidden : true
		}, {
			field : 'project_name',
			width : 100,
			title : '工程名称',
			align : 'center',
			rowspan : 2
		}, {
			field : 'machine_num',
			width : 100,
			title : '设备数',
			align : 'center',
			rowspan : 2
		}, {
			field : 'machine_function',
			width : 100,
			title : '设备维护',
			align : 'center',
			rowspan : 2,
			formatter : function(value, row, index) {
				var btn = '<a class="editcls"></a>';
				return btn;
			}
		} ],
		onLoadSuccess : function(data) {
			$('.editcls').linkbutton({
				text : '编辑',
				plain : true,
				iconCls : 'icon-a_edit',
				onClick : function() {
					addMachine();
				}
			});
		}
	});</span>

先标记，然后通过onLoadSuccess方法对<a>标签进行样式和功能的扩展

function addMachine() {
	var row = $('#dg_project').datagrid('getSelected');
	if (row) {
		var title = '设备维护' + ' 【 工程名称： ' + row.project_name + ' 】 ';
		$('#fm_add_machine').form('clear');// 清除原来的内容
		$('#dlg_add_machine').dialog('open').dialog('setTitle', title);
		url = addrs;
		type = 'POST'
	} else {
		$.messager.alert('警告', '请选择先工程！');
	}

}

通过点击Datagrid单元格中的按钮，执行addMachine()中的方法

低功耗蓝牙项目，需要一块懂省电的板

思澈 SF32LB52 芯片，BLE 协议栈深度优化，上手即开发

点击查看