easyUI datagrid自定义添加列（点击事件）

最新推荐文章于 2025-10-11 13:47:43 发布

原创最新推荐文章于 2025-10-11 13:47:43 发布 · 2.8w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #datagrid #js

前端同时被 2 个专栏收录

18 篇文章

订阅专栏

杂项（小知识点）

13 篇文章

订阅专栏

本文介绍如何在easyUI的datagrid中自定义添加包含操作按钮的列，如删除功能，通过JS实现。

有列表想添加一个操作列类似删除之类的

<table class="easyui-datagrid" title="编码列表" style="width:500px; min-height: 0px;" id="Hsdata">
                                    <thead>
                                        <tr>
                                            <th data-options="field:'HsCode',width:100">编码</th>
                                            <th data-options="field:'StartDate',width:150">开始日期</th>
                                            <th data-options="field:'EndDate',width:150,align:'结束日期'">结束日期</th>
                                            <th data-options="field:'IsImporter',width:100,align:'是否进口数据'">是否进口数据</th>
                                            <th data-options="field:'IsDemoData',width:100">是否演示数据</th>
                                            <th data-options="field:'Id',width:100,formatter:  rowformater,onClickRow:delHsCode">操作</th>
                                        </tr>
                                    </thead>
                                </table>

通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接

 //删除
        function rowformater(value, row, index) {
            return '<a href="#" onclick="delHsCode(' + index + ')">删除</a>';          
        }

上面这个方法在其他博客里看的不全别人的是：

return '<a href="'+row["ID"]+'">修改</a>';

我改了一下在onclick方法中绑定方法因为如果用之前的传value row index 三个参数会导致自动触发所以改动了一下

function delHsCode(index) {
            $('#Hsdata').datagrid('selectRow', index);
            var row = $('#Hsdata').datagrid('getSelected');
            if (row.Id != null && row.Id !== undefined)
            alert(row.Id);
        }

以下为效果图：