Easy UI datagrid 多行数据操作

最新推荐文章于 2024-04-02 16:46:42 发布
最新推荐文章于 2024-04-02 16:46:42 发布
阅读量1.7k 收藏
点赞数
分类专栏： jQuery Easy UI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uuloveqiqi/article/details/39348077
版权
这篇博客介绍了如何使用Easy UI的datagrid进行多行数据操作，包括获取被选中的多行数据、插入新行以及删除多行记录。通过jQuery的选择器和datagrid的方法，如getSelections、appendRow和deleteRow，实现了对数据的高效管理。
摘要由CSDN通过智能技术生成
  最近做jquery easy ui设计前端的项目，用datagrid控件设计和实现了一些交互界面。在datagrid的多行数据的操作上，费了一番功夫。多行数据的操作主要分为三大操作，主要是获取多行数据，插入多行数据，删除多行数据。

  一：获取多行数据。

 <span style="font-size:14px;"> var rows=$('#selectable').datagrid("getSelections");</span>

  注释：通过jQuery的选择器，选择id为selectable的datagrid控件。然后实现datagrid的getSelections方法，获取datagrid中被选择（selected）的多行数据。返回的对象熟数组对象，如果被选择的行记录为空，则返回空的数组。

  二：插入多行数据。


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  uuloveqiqi
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
easyui-datagrid删除行，添加行

				
			

			

				

					a4638966的博客
				

				

					02-17
					
					2万+
					
				

			

		

		

			
				
这里我遇到的问题是怎么点击分配按钮把左边表单中选中的内容删除，并且在右边的表单中添加选中的那些内容。
经过查阅百度及easyui的官方文档，我解决用到了下面的几个datagrid中的方法：
用到的方法：
getSelections ： 返回所有选中的行，当没有选中的记录时，将返回空数组。

getRowIndex ： 返回指定行的索引，row 参数可以是一个行记录或者一个 id 字段的值

			
		

	



                

              
                



	

		

			

				
					
Easyui datagrid 多行编辑

				
			

			

				

					zhouminfangbdqn的博客
				

				

					05-24
					
					3837
					
				

			

		

		

			
				
// 初始化数据列表
    function initDatagrid() {
        $('#dg').datagrid({
            loadMsg: '数据加载中请稍后……',
            striped: true,
            url: '/api/Attendance',
            sortName: 'ID',
     ...

			
		

	



                


  
              

                


	

		

			

				
					
DataGrid 多行

				
			

			

				

					weixin_30949361的博客
				

				

					05-09
					
					71
					
				

			

		

		

			
				
1privatevoidDataGrid_Join()2{3intiRow,iSpan=1,iRow_Start=0;//定义当前行数，合并行数，合并开始行标志4stringsSText,sNText;//比较源文本，比较下一文本56for(i...

			
		

	





	

		

			

				
					
easyui DataGrid 的 Checkbox  选择多行

				
			

			

				

					weixin_30401605的博客
				

				

					04-27
					
					554
					
				

			

		

		

			
				
这么一来在取得 DataGrid 的 Checkbox 有勾选的数据值就可以沿用方式一的程序，


view sourceprint?



1.$('#ButonGetCheck').click(function(){
2.varcheckedItems = $('#dg').datagrid('getChecked');
3.varnames = [];
4....

			
		

	



		

			
		



	

		

			

				
					
EasyUI DataGrid 实现单行/多行编辑功能

				
			

			

				

					Dandelion_drq的专栏
				

				

					02-22
					
					1万+
					
				

			

		

		

			
				
要实现 EasyUI DataGrid 的可编辑很简单，在需要编辑的列添加 editor 【编辑器】就可以了。
单行编辑
// 初始化数据列表
function initDatagrid() {
    $('#dg').datagrid({
        loadMsg: '数据加载中请稍后……',
        striped: true,
        url: '/api/Employ

			
		

	





	

		

			

				
					
easyui datagrid 获取多条选中的数据进行操作

				
			

			

				

					boluoadai的博客
				

				

					09-12
					
					5854
					
				

			

		

		

			
				
easyui datagrid 获取多条选中的数据进行操作function topCenter(msg) {
    $.messager.show({
        title: '提示',
        msg: msg,
        showType: 'slide',
        style: {
            right: '',
            top: d

			
		

	





	

		

			

				
					
【JQuery Easy UI】后台管理系统的简单布局

				
			

			

				

					10-27
				

			

		

		

			
				
Easy UI 的 `datagrid` 组件支持灵活的列宽分配，通过 `colspan` 和 `rowspan` 属性可以实现复杂的单元格合并，从而创建出多列多行的网格布局。  3. **响应式布局**：随着移动设备的普及，后台管理系统也需要适应...

			
		

	





	

		

			

				
					
easyui-datagrid之间拖拽效果demo

				
			

			

				

					03-18
				

			

		

		

			
				
通过以上步骤，我们可以创建一个既美观又实用的前端应用，用户可以通过简单的拖放动作，方便地在 Datagrid 之间操作数据。这在数据管理、任务分配等场景下尤其有用。在实际开发中，还需要注意性能优化，避免因大量...

			
		

	





	

		

			

				
					
EasyUI DataGrid 多级表头设置

				
			

			

				

					itmyhome的专栏
				

				

					02-28
					
					1万+
					
				

			

		

		

			
				
使用EasyUI做一个报表统计，需要合并表头为多级表头，核心代码如下: 



$('#dg').datagrid({  
    url:'datagrid_data.action',  
    fit : true,
    fitColumns : false,
    columns:
         [
             [
                {"title":

			
		

	





	

		

			

				
					
easyui datagrid 删除多行操作

				
			

			

				

					12-19
				

			

		

		

			
				
easyui datagrid 删除多行操作时会出现异常，该方法可以直接加载一次数据，避免该问题的发生

			
		

	





	

		

			

				
					
关于easyui datagrid表格中，表格为空时，appendRow,insertRow报错data.rows is null或data.rows is undefined的问题

				
			

			

				

					static周的博客
				

				

					04-28
					
					1929
					
				

			

		

		

			
				
easyui datagrid表格为空时，如果使用appendRow或insertRow追加数据时，出现data.rows is undefined





可以看到，不管是appendRow还是insertRow最后问题都是出在这个地方，这里的data就是你服务端载入的数据，上图我从服务端加载到表格的数据只有一个 total:0，所以这里报错：data.rows is undefined，...

			
		

	





	

		

			

				
					
EasyUI学习之easyui datagrid 批量编辑和提交

					
热门推荐

				
			

			

				

					编程人生
				

				

					12-21
					
					3万+
					
				

			

		

		

			
				
前台主要代码：



 





001
"text/javascript">









002
    $(function() {









003
        var
$dg = $("#dg");









004
        $dg.datagrid({

			
		

	





	

		

			

				
					
jQuery easyuI datagrid 多行编辑

				
			

			

				

					dd84393295的博客
				

				

					06-01
					
					378
					
				

			

		

		

			
				
在easyUI动态绑定部分数据后，需要有部分列可以修改，研究了一天终于搞定。这是小弟的做法，望各位有好招的大侠指点。
1.添加jQuery 和jQuery easyuI的引用。
2.添加id为tt的table和获取行数据测试按钮getChangeValue


<div id="setRoleDiv" style=" display:none;">
      ...

			
		

	





	

		

			

				
					
easyUI点击编辑操作实现行编辑，点击取消编辑取消编辑，点击添加实现添加行操作

					
最新发布

				
			

			

				

					拼命小李博客
				

				

					04-02
					
					960
					
				

			

		

		

			
				
【代码】easyUI点击编辑操作实现行编辑，点击取消编辑取消编辑，点击添加实现添加行操作。

			
		

	





	

		

			

				
					
easyUI datagrid的一些问题

				
			

			

				

					b0303的博客
				

				

					08-03
					
					222
					
				

			

		

		

			
				
关于datagrid表格的一些适用性的小功能点：

1.列隐藏

$('表格ID').datagrid('hideColumn','索要隐藏的字段');

2.合计总数（单独一行）

var tre = 0，tres = 0，tat = 0，heji = "合计:";

$('表格ID').datagrid('appendRow', { contracttotal: '合计', costamount: tres, pasunmsurplus: tat,aa:"123"});

3.获取treegrid选..

			
		

	





	

		

			

				
					
EasyUI 添加行 appendRow

				
			

			

				

					cndn20120225的博客
				

				

					02-02
					
					1480
					
				

			

		

		

			
				
使用：appendRow


var row = {name: '张三', address: '在那遥远的地方'};
$('#id').datagrid("appendRow", row);




			
		

	





	

		

			

				
					
Easyui DataGrid row的相关操作

				
			

			

				

					ytangdigl的博客
				

				

					06-28
					
					1738
					
				

			

		

		

			
				
Easyui DataGrid row的相关操作
1、获取datagrid选中行（单行选中）
2、获取datagrid选中行（多行选中）
3、获取当前行索引
4、根据索引删除当前行
5、快速清空DataGrid
6、根据行索引更新行数据
7、新增一行数据

			
		

	





	

		

			

				
					
解决easyui datagrid多行删除异常问题

				
			

			

				

					
				

			

		

		

			
				
"这篇资源主要讨论了在使用EasyUI Datagrid进行多行删除操作时可能出现的问题及解决方案。在默认情况下，使用datagrid的deleteRow方法连续删除行可能导致异常，因为每删除一行，行号会更新，影响后续的删除操作。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值