EasyUI-Datagrid行内编辑

最新推荐文章于 2025-05-19 21:48:24 发布

原创

最新推荐文章于 2025-05-19 21:48:24 发布 · 7.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在EasyUI的datagrid中实现行内编辑功能。通过定义table的onClickCell事件，设置编辑触发响应editor，如'text'，并编写响应的js文件来完成单元格的编辑操作。

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

接上一篇，这次介绍easyUI的datagrid的行内编辑单元格的功能。

关于行内编辑，我之前写过一个demo 《jQuery：页面可编辑表格》，但是easyui 中早已经封装了行内单元格编辑的功能，我们在调用时只需要使用人家封装好的方法就行。这里就使用封装好的方法。

实现思路：

1.定义table 时写上监听单击事件的方法：onClickCell:onClickCell；

2.将需要编辑的<th>和<td>设置编辑的触发响应：editor:'text'。其中text只是它的一种类型，也可以写combox或设置它的数据类型等。

3.响应onclickcell和editor的方法，编写js文件（详细见代码）。

<head>
    @*引入的easyui的js和css*@
<script src="../../Content/jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
<link href=

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一支支穿云箭

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
56
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

EasyUi datagrid editor 自定义编辑器 mutilbox 一列多编辑器一列包含下拉框文本输入框

tttesbit的博客

05-20

3246

easyUI datagird数据表格一列实现下拉框和编辑框复合编辑器自定义编辑器

在easyUI中使用DataGrid组件更改单元格中的值

Kuangtian的博客

12-15

3024

var rows = $('#idName').datagrid("getRows");//获取页行数 $('#idName').datagrid('endEdit', 修改行号);$('#idName').datagrid('updateRow',{index:修改行号,row:{field:val}}); 在更改单元格式先把改行结束编辑否则报错

56 条评论您还未登录，请先登录后发表或查看评论

EasyUI可扩展Editable DataGrid（可编辑数据表格）

08-10

NULL 博文链接：https://focus-sunbo.iteye.com/blog/2198721

EasyUI datagrid实现双击单元格编辑、单击该行其它单元格结束编辑

最新发布

程序就是世界

05-19

230

文章摘要：本文介绍了一个基于jQuery EasyUI的DataGrid组件的双击单元格编辑功能实现。通过onDblClickCell事件，用户双击单元格时触发编辑模式，并获取对应的编辑器。在编辑器中，当用户点击特定字段（如InsuOptins）的相邻元素时，结束编辑并保存数据。编辑完成后，onAfterEdit事件被触发，弹出一个包含编辑行中psnName字段值的提示框。该功能适用于需要快速编辑和验证数据的场景。

easyui实现datagrid行内编辑

dotedy的博客

10-16

5162

easyui的datagrid行内编辑对于修改信息而言比较方便直观，下面举例说明：需求说明：在行内编辑员工状态一、编辑jsp Html代码 ... a href="#" id="save" onclick="obj.save()" class="easyui-linkbutton" iconCls="

easyui datagrid行内编辑

dht91597的博客

06-08

157

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" ...

EasyUI之dataGrid的行内编辑

weixin_33691817的博客

11-13

273

1 $(function () { 2 var datagrid; //定义全局变量datagrid 3 var editRow = undefined; //定义全局变量：当前编辑的行 4 datagrid = TskupluAddPacket.datagrid({ 5 url: Th...

编程语言EasyUI之dataGrid的行内编辑

11-01

1464

编程语言EasyUI之dataGrid的行内编辑　　这个js代码是别人写的，可能不是最好的，但我个人觉得首先能帮助别人解决功能问题的话就特别好。我稍加修改后用在了自己的项目上了，这里贴出来分享一下。后台用的TinkPHP因为都是查增删改比较简单，这里就不贴了。前台效果图因为比较懒，也不贴了。　　 $(function () {var datagrid; //定义全局变量datagridvar editRow = undefined; //定义全局变量：当前编辑的行datagrid = T

easyui-datagrid12-demo.zip

11-30

在“easyui-datagrid12-demo.zip”这个压缩包中，我们主要关注的是EasyUI 的 DataGrid 组件，以及可能涉及到的行内编辑功能。DataGrid 是 EasyUI 提供的一个用于展示数据表格的组件，它具有强大的数据管理能力，包括...

easyui-datagrid12行内编辑功能演示与实现

在easyui框架中，为了实现行内编辑功能，通常需要在easyui-datagrid组件中添加特定的配置，比如通过设置行内编辑插件，配置触发编辑事件的方式（例如双击行或单元格），以及定义编辑完成后的数据处理逻辑等。...

EasyUI中的dataGrid的行内编辑

08-30

EasyUI中的DataGrid行内编辑实现详解 EasyUI是一个流行的基于jQuery的前端UI框架，提供了许多实用的UI组件，其中包括DataGrid组件。DataGrid组件是EasyUI中最常用的一个组件，用于显示和编辑数据。然而，DataGrid...

easyui-datagrid-rowediting

05-13

"easyui-datagrid-rowediting"是一个关于EasyUI Datagrid组件的特定功能，允许用户在表格行内进行编辑，实现多行数据的增删改查。本文将详细探讨这个功能的实现原理和应用场景。一、EasyUI Datagrid简介 EasyUI的...

Easyui学习笔记（一）datagrid行编辑

qq_43701801的博客

05-07

8562

一、定义datagrid <table id="grid"></table> 二、datagrid设置重点事件： $('#grid').datagrid({ iconCls: 'icon-forward', fit: true, border: false,...

easyui datagrid实现通用编辑

u011703959的专栏

11-20

其他章节function BillEdit(Jquerygrd) { var self = this; this.grd = Jquerygrd this.editIndex = undefined this.GetCurrentIndex=function (){ let index=null let row =this....

datagrid行内编辑

weixin_34337265的博客

05-09

152

编辑属性：editor: { type: 'text'} $('#listShow').datagrid({ height : 478, pagesize : 20, pageList : [20,30,40,50], title : '查询结果', striped : ...

可编辑表格使用经验分享

weixin_30894389的博客

08-20

248

http://www.easyui.info/archives/623.html 对于Easyui的可编辑表格，个人也是较为陌生的，尽管在操作方式上可能比使用表单修改的方式便捷，但是可编辑表格对代码质量的要求往往更高一些，不熟练的话，容易出现这样或者那样的问题，本篇文章就自己使用的经历做一些总结。相关接口方法 NameParameterDescription Metho...

EasyUI datagrid可编辑行

gghh2015的博客

12-06

4330

如图： function loadDatagrid(){ $('#dg').datagrid({ url:'kkkkkk.do?method=queryyyyy', method: 'POST', title: '加载表格', loadMsg: '正在加载，请稍后...',

EasyUI DataGrid能编辑

weixin_34306593的博客

09-27

106

创建DataGrid <table id="tt"></table> $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', width:660, height:250, singleSelect:true, idField:'it...

使用EasyUI的Datagrid的Editor进行行编辑，Enter回车结束编辑，并开启新的一行。

weixin_33895516的博客

10-09

912

//新增数据function add() { if (Index == undefined) { 　　row = { move_date: '', start_time: '', end_time: '', start_place: '', arrival_place: '', move_vehicle: '' };　　　　$('#dg').datagri...