easyui 可编辑单元格

最新推荐文章于 2021-03-30 15:01:35 发布

sinat_32911227

最新推荐文章于 2021-03-30 15:01:35 发布

阅读量1.1k

点赞数 1

文章标签： easyui

本文链接：https://blog.youkuaiyun.com/sinat_32911227/article/details/75043709

版权

这篇博客介绍了如何利用EasyUI库实现表格中单元格的可编辑功能。当用户点击单元格时，该单元格进入编辑状态，同时显示保存和取消按钮。此外，还支持删除当前行和新增行的操作。后台处理包括常见的CRUD操作，前端代码实现了这一交互流程。

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

实现easyui可编辑单元格如上图所示，点击进入编辑状态，点击删除当前行，进入编辑状态时操作按钮会变为保存按钮和取消按钮。点击新增行可新增一行进行编辑。后台是普通的增删改查，前台代码如下：

function gridEditor(data) {

            //可编辑datagrid表格，根据不同状态时的操作按钮进行操作
            $("#gridEditor").datagrid({


                url: "../AjaxTools/EMSService.ashx?method=GetEditorInfo&p_id=" + data,
                striped: true,
                rownumbers: true,
                singleSelect: true,
                fitColumns: false,
                pagination: true,
                pageSize: 20,
                pageList: [20, 50, 100, 200],
                toolbar: "#toolbarEditor",
                frozenColumns: [[//冻结某些列
                    {
                        field: '操作', title: '操作', width: 80, align: 'center',
                        formatter: function (value, row, index) {
                            //正在编辑时操作按钮图标变为保存和取消
                            if (row.editing) {
                                var s = '<a href="javascript:void(0)" οnclick="saverow(' + index + ')"><img style="padding:2px 5px 2px 5px;" src="../scripts/easyui/themes/icons/easysave.png" /></a> ';
                                var c = '<a href="javascript:void(0)" οnclick="cancelrow(' + index + ')"><img style="padding:2px 5px 2px 5px;" src="../scripts/easyui/themes/icons/easycancel.png" /></a>';
                                return s + c;
                            }
                            //编辑完成时操作按钮图标变为编辑和删除
                            else {
                                var e = '<a href="javascript:void(0)" οnclick="editrow(' + index + ')"><img style="padding:2px 5px 2px 5px;" src="../scripts/easyui/themes/icons/easyedit.png" /></a> ';
                                var d = '<a href="javascript:void(0)" οnclick="deleterow(' + index + ')"><img style="padding:2px 5px 2px 5px;" src="../scripts/easyui/themes/icons/easydelete.png" /></a>';
                                return e + d