【EasyUI】行内编辑、删除

最新推荐文章于 2025-07-08 14:12:09 发布

原创

最新推荐文章于 2025-07-08 14:12:09 发布 · 3.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何使用EasyUI在表格中实现行内编辑和删除功能。通过设置editor属性，可以配置文本框等编辑元素，并结合后台控制器方法处理保存数据。

效果图：

//需要引用脚本

<link href="~/Css/css.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/icon.css" rel="stylesheet" />
<link href="~/UILibs/easyui/themes/default/easyui.css" rel="stylesheet" />


<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/UILibs/easyui/jquery.easyui.min.js"></script>
<script src="~/UILibs/easyui/locale/easyui-lang-zh_CN.js"></script>




//列表

<body>   
        <a class="easyui-linkbutton" iconcls="icon-add" onclick="addRow();">添加</a>
        <a class="easyui-linkbutton" iconcls="icon-save" onclick="save();">批量提交</a>
        <table id="tb">
        </table>
</body>


//显示字段内容
            $("#tb").datagrid({
                fit: true,
                title: '行内编辑测试',
                border: false,
                striped: true,
                data: persons,
                rownumbers: true,
                columns: [[
                        {
                            title: '编号', field: 'ID',halign: 'center',align: 'center',width:100,

最低0.47元/天解锁文章

新学期VIP享超值加赠