EasyUI DataGrid 编辑单元格

最新推荐文章于 2022-04-19 11:09:13 发布
最新推荐文章于 2022-04-19 11:09:13 发布
阅读量1.8w 收藏 17
点赞数 4
分类专栏： EasyUI 文章标签： easyui datagrid 单元格
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itmyhome1990/article/details/50847270
版权
本文介绍了如何在EasyUI DataGrid中实现单击特定单元格时仅该单元格可编辑的功能，详细讲解了添加onClickCell事件、设置editor属性的方法，并提供了小数位数、文本类型和checkbox编辑样例，还包含核心代码展示和在线演示链接。
摘要由CSDN通过智能技术生成

之前文章 EasyUI DataGrid可编辑单元格 实现可编辑单元格，如果有多列都需要可编辑 当点击一个单元格 则此整行都会进行编辑

如下图：

这里写图片描述

现改为单击某个单元格只对此单元格进行可编辑

<TABLE>标记添加 onClickCell

<table id="dg" class="easyui-datagrid" data-options="onClickCell: onClickCell">


需要进行编辑的列上添加 editor


                

                
                
        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  麦田
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
EasyUi datagrid单元格可编辑（根据条件）

				
			

			

				

					Louis__lv的博客
				

				

					07-22
					
					3835
					
				

			

		

		

			
				
目标

一个datagrid表格含多个列（field1，field2....），默认filed2不可编辑，但当某个条件（以字段filed1为空为例）时字段field2可编辑，且不影响其他列的编辑状态。

思路

设置列filed2的编辑器（例如：editor:'text'），点击行事件时触发判定，若不可编辑，关闭该列编辑权限。


			
		

	



                

              
                



	

		

			

				
					
EasyUi的DataGrid单元格编辑

				
			

			

				

					CabbageDumpling的博客
				

				

					03-29
					
					895
					
				

			

		

		

			
				
		&lt;script type="text/javascript"&gt;			$(function() {				// 页面加载后，对datagrid 进行设置				$("#grid").datagrid({					url: "datagrid_data.json",//发送数据加载请求到服务器					method: 'get',					fitColumns: false,//自动伸...

			
		

	



                


  
              

                


	

		

			

				
					
EasyUI DataGrid可编辑单元格

				
			

			

				

					itmyhome的专栏
				

				

					07-22
					
					1万+
					
				

			

		

		

			
				
效果如图：首先在需要可编辑的列上添加一个editor属性，列定义为numberbox编辑类型默认分值 当用户点击一行的时候,我们开始一个编辑动作$('#dg').datagrid({   
	onClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).dat

			
		

	





	

		

			

				
					
EasyUI动态编辑datagrid单元格

				
			

			

				

					sinat_27674731的博客
				

				

					04-19
					
					1733
					
				

			

		

		

			
				
EasyUI动态编辑datagrid单元格

			
		

	



		

			
		



	

		

			

				
					
easyUI datagrid合并单元格(支持子对象的属性)

				
			

			

				

					07-05
				

			

		

		

			
				
easyUI datagrid合并单元格的两种方法 都实现了按照子对象的属性合并单元格的需求 调用方式也很简单调用方式： $(tableID).datagrid("autoUnrelatedMergeCells", ["role.name", "num"]);

			
		

	





	

		

			

				
					
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

				
			

			

				

					10-21
				

			

		

		

			
				
知识点三：单元格编辑状态控制 在 `onDblClickRow` 事件处理函数内部，首先调用 `endEdit` 方法来结束之前的编辑状态，然后调用 `beginEdit` 方法让当前行进入编辑模式。通过 `endEdit` 和 `beginEdit` 方法的调用，...

			
		

	





	

		

			

				
					
easyUI datagrid表格 编辑单元格详解

				
			

			

				

					Lynn_Blog
				

				

					01-05
					
					1万+
					
				

			

		

		

			
				
为了研究这里的问题，网上的示例不多，基本上就是两种方法来解决单元格编辑，但是有一种还要重写easyUI的方法，这样的即使可以成功，作为这方面的新手也是很难理解，不适合广泛的使用，easyUi就是让编辑更简单的，能不重写就不重写，更简单的编辑页面这才是easyUI存在的意义。

			
		

	





	

		

			

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

				
			

			

				

					08-10
				

			

		

		

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

			
		

	





	

		

			

				
					
使用easyui的可编辑数据表格(editable datagrid)

				
			

			

				

					BoringError的博客
				

				

					07-18
					
					1万+
					
				

			

		

		

			
				
相关的参考属性、方法和事件：

1、列属性：



2、datagrid事件：



3、datagrid方法：







4、示范代码：


&lt;table id="myTable"&gt;&lt;/table&gt;
	&lt;script type="text/javascript"&gt;
	 $(function(){
		 //定义被编辑的行号
		 var rowNu...

			
		

	





	

		

			

				
					
EasyUI DataGrid 单元格编辑 注释版

				
			

			

				

					随心更博
				

				

					01-17
					
					5266
					
				

			

		

		

			
				
最近做组织部项目的时候，需要点击Datagrid，然后能够写入数值；研究了半天没明白是什么意思，后来查资料的时候，直接在easyUI 中文网的Demo中找到了相同的代码，但是代码没有注释，依然不是很理解，后来找同伴一块推敲，基本掌握了整个思路，写出注释来给大家分享；
EeayUI中文网Demo及展示效果：http://www.jeasyui.net/demo/332.html
效果图：

			
		

	





	

		

			

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

				
			

			

				

					Kuangtian的博客
				

				

					12-15
					
					2602
					
				

			

		

		

			
				
var rows = $('#idName').datagrid("getRows");//获取页行数
$('#idName').datagrid('endEdit', 修改行号);$('#idName').datagrid('updateRow',{index:修改行号,row:{field:val}});

在更改单元格式先把改行结束编辑否则报错

			
		

	





	

		

			

				
					
EasyUI数据表格（datagird）可编辑

				
			

			

				

					ronybo的博客
				

				

					06-18
					
					3066
					
				

			

		

		

			
				
<!--引入easyui的样式 -->
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<!-- js文件 -->
...

			
		

	





	

		

			

				
					
easyui 修改单元格内容_easyui datagrid 单元格编辑（cell editing）

				
			

			

				

					weixin_39945871的博客
				

				

					12-19
					
					541
					
				

			

		

		

			
				
demo中有row editing项目中发现个cell editing,但是有bug,修改好了主要实现功能：单击数据表格单元格，编辑单元格数据js代码如下：$.extend($.fn.datagrid.methods, {editCell: function (jq, param) {return jq.each(function () {var opts = $(this).datagrid('...

			
		

	





	

		

			

				
					
easyui-datagrid 编辑单元格

					
热门推荐

				
			

			

				

					
				

				

					03-30
					
					2万+
					
				

			

		

		

			
				
在做itoo成绩的时候，有个需求是教师判分，学生成绩有两部分组成：平时成绩和期末成绩，然后根据两种成绩比例算出总成绩。现在是有了平时成绩和成绩比例，输入期末成绩，计算出总成绩，并且把输入的期末成绩和计算的总成绩更新到数据库中。主要应用了单击单元格进行编辑，编辑完成之后，失去焦点则保存数据。如果数据没有变化，失去焦点则不更新数据库。
         页面效果是这样的：


期末成绩的单元格

			
		

	





	

		

			

				
					
easyui可编辑表格 Datagrid

				
			

			

				

					weixin_30723433的博客
				

				

					12-06
					
					162
					
				

			

		

		

			
				
样式预览

Jsp页面

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3     String path = request.getContextPath();
 4     String basePath = request.getScheme() +...

			
		

	





	

		

			

				
					
jQuery Easyui DataGrid单元格编辑与自动保存

				
			

			

				

					
				

			

		

		

			
				
本文主要探讨了如何在jQuery Easyui DataGrid中实现点击单元格立即进入编辑状态，并在焦点离开后自动保存数据的功能。这个功能对于数据管理界面来说非常实用，可以提升用户体验，确保数据的及时更新。  jQuery ...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值