datagrid添加操作列

最新推荐文章于 2019-07-09 16:33:47 发布

原创

最新推荐文章于 2019-07-09 16:33:47 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#easyUI #datagrid #操作列

本文介绍了如何在easyUI的datagrid中添加操作列，重点在于利用formatter属性定义自定义函数，实现列的格式化。通过这个函数，可以创建包含按钮的操作列，并为按钮添加点击事件，例如在点击后调用operate函数执行特定操作，如编辑记录。在operate函数中，可以利用传入的‘this’参数获取当前行的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义一个datagrid

		<table class="easyui-datagrid"
			    data-options="rownumbers:true, 
                            fitColumns:true,
                            fit:true ">
			<thead>
			    <tr>
			        <th field="column1" align="center" width="65">列1</th>
				<th field="column2" align="center" width="65">列2</th>
				<th field="column3" align="center" width="65">列3</th>
				<th field="_operate" align="center",width=80,formatter="formatOper">操作</th>  
			    </tr>
			</thead>
		</table>

注意看最后一个<th>，它就是操作列！与之前的<th>不同的是它/他/她 多了一个formatter属性！这个属性的值就是一个自定义函数，返回格式化的列就可以了，看下面：

2.操作列格式化函数

function formatOper(){
var str="<div><a onclick='operate(this)'>点我触发</a></div>";
return str;
}<

最低0.47元/天解锁文章

200万优质内容无限畅学