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

来源：互联网发布：传奇霸业帝陨宝石数据编辑：程序博客网时间：2024/06/09 19:44

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

属性名称属性值类型描述formatterfunction单元格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()中的方法

0 0