解决"var rows = $('#dg').datagrid('getSelections');" rows.length总是为1的问题

最新推荐文章于 2020-12-07 16:05:31 发布
原创 最新推荐文章于 2020-12-07 16:05:31 发布 · 7.2k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#datagrid #easyui #web #js #jsp

文章详细介绍了在使用EasyUI的Web项目中，如何正确配置多选复选框以准确获取选中项。通过调整idField与表头字段保持一致，确保在多选情况和未选情况下都能正确统计选中的记录数量。 
1. 问题描述
	在使用到easyui的web项目中， jsp页面中涉及到复选框多选的问题的， 其中jsp页面有以下js语句 ："var rows = $('#dg').datagrid('getSelections');", 得到的rows.length在多选情况下总为1， 不选择时为0.
2. 解决方法
	原因在于， 如下
<table id="dg" title="版块列表" class="easyui-datagrid" style="width: 1500px;"
	toolbar="#toolbar" pagination="true" url="board!getAllBoard.action"
		rownumbers="true" fitColumns="true" singleSelect="false" idField="board_id">
	<thead>
		<tr>
			<th data-options="field:'ck'" width="50px" align="center" checkbox="true"></th>
			<th data-options="field:'board_id', hidden:true" width="50px" align="center">id</th>
			<th data-options="field:'boardName'" width="140px" align="center">版块名称</th>
			<th data-options="field:'boardDesc'" width="200px" align="center">版块说明</th>
			<th data-options="field:'boardPic'" width="240px" align="center">版块图片路径</th>
			<th data-options="field:'order'" width="70px" align="center">显示顺序</th>
			<th data-options="field:'isHidden'" width="70px" align="center">是否显示</th>
			<th data-options="field:'parentBoardId'" width="90px" align="center">父版块ID</th>
		</tr>
	</thead>
		
</table>
<div id="toolbar">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newBoard()">新 增</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editBoard()">编 辑</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyBoard()">删 除</a>
</div>
上面的idField="board_id"要与下面的 <th data-options="field:'board_id', hidden:true" width="50px" align="center">id</th> 中的 field:'board_id'的board_id要保持一致， 这样才能以此为根据统计出已选中有多少条记录。 


                

        

    

    
  



    



                



	

		

			

				
					
easyui datagrid使用updateRow更改单元格值后getChanges无法获取

				
			

			

				

					shyuanshuai的专栏
				

				

					05-19
					
					1万+
					
				

			

		

		

			
				
easyui datagrid使用updateRow更改单元格值后getChanges无法获取easyui datagrid使用updateRow更改单元格值后getChanges无法获取
解决方法在easyui datagrid中使用updateRow方法，会使单元格编辑完成了1. beginEdit  
 2. 具体操作  
 3. endEdit  
 4. acceptChanges四个方法

			
		

	



                

            
              



	

		

			

				
					
$('#dg').datagrid('getSelections');", 得到的rows.length在多选情况下总为1， 不选择时为0.

				
			

			

				

					只作为个人备忘录
				

				

					08-15
					
					2898
					
				

			

		

		

			
				
$('#dg').datagrid('getSelections');", 得到的rows.length在多选情况下总为1， 不选择时为0.

方案：

{title: 'ID',field: 'dataId',width: 80, hidden:true},的field一定要与idField相同


loadMsg:'数据加载中...',
           remoteSor

			
		

	



              


  
              

                


	

		

			

				
					
Jquery easyui datagrid每次切换下一页丢失上一页的记录，最后保存数据错乱的问题

				
			

			

				

					IT_ziliang的博客
				

				

					09-09
					
					948
					
				

			

		

		

			
				
1、实例化两个数组

var idsArray = new Array();  //记录勾选的id
var UnidsArray = new Array(); //记录取消勾选的id

j's代码如下：


function loadingDatagridCheckNew(url, columns, thisid, bol) {
    var _thid = "ID";
    if...

			
		

	





	

		

			

				
					
Jquery easyui从零单排之datagrid多行数据删除

				
			

			

				

					yangmingxing980的专栏
				

				

					12-16
					
					2663
					
				

			

		

		

			
				
datagrid选中的多行数据删除功能的实现


一、前台代码：

			
		

	



		

			
		



	

		

			

				
					
JQuery EasyUI的datagrid的使用方式总结

				
			

			

				

					YoungRoc--FLY
				

				

					10-15
					
					2348
					
				

			

		

		

			
				
第一步：添加样式和js脚本在前台添加展示数据表格的table元素
 例如：

    
    

注：表格的属性可以在table中设置（Unobtrusive），也可以直接使用js脚本进行控制。建议使用js脚本控制
   
 
 属性的定义：
 可以参见Jquery easyui API
 
第二步：在doucment.ready中初始化表格的属性以及数据获取的方式。

			
		

	





	

		

			

				
					
jquery中datagrid中getSelected和getSelections的用法

				
			

			

				

					aa120314484的博客
				

				

					08-24
					
					719
					
				

			

		

		

			
				
说明data是table表格的某一列的id
选中一行：
var get = $("#dg").datagrid("getSelected");
获取列值：get.data，

选中多行：
遍历多行的数据
var get = $("#dg").datagrid("getSelections");
for(var i=0;i<get.length;i++)
{
...

			
		

	





	

		

			

				
					
现在这个写法，报错： $("#dg_IPDKVersions").datagrid('rowStyler', function (index, row) { is not a function
 $("#dg_IPDKVersions").datagrid('appendRow', dg_IPDKVersionRow);

                //发布状态新增的行置为绿色
                if (isPublished) {
                    var rows = $("#dg_IPDKVersions").datagrid('getRows');
                    var newRowIndex = rows.length - 1;
                    $("#dg_IPDKVersions").datagrid('rowStyler', function (index, row) {
                        if (index === newRowIndex) {
                            return 'background-color: green;';
                        }
                    });
                }

					
最新发布

				
			

			

				

					10-30
				

			

		

		

			
				
在 Easy UI 中使用 `$('#dg_IPDKVersions').datagrid('rowStyler', function (index, row) {... })` 报错 `'is not a function'`，通常是由以下几种原因导致的，以下是对应的解决方案：  ### Easy UI 库未正确加载 ...

			
		

	





	

		

			

				
					
 function pagerFilter(data) {   	       if (typeof data.length == 'number' && typeof data.splice == 'function') {   // is array   	          data = {   	              total: data.length,   	               rows: data   	            }   	       }   	       var dg = $(this);   	       var opts = dg.datagrid('options');   	       var pager = dg.datagrid('getPager');   	        	       pager.pagination({   	           onSelectPage: function (pageNum, pageSize) {   	               opts.pageNumber = pageNum;   	               opts.pageSize = pageSize; 	               pager.pagination('refresh', {   	                   pageNumber: pageNum,   	                   pageSize: pageSize   	             });   	                dg.datagrid('loadData', data);   	            }   	       });   	       if (!data.originalRows) {   	           data.originalRows = (data.rows);   	       }   	      var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);   	      var end = start + parseInt(opts.pageSize);   	      data.rows = (data.originalRows.slice(start, end));   	      return data;   	   }  

				
			

			

				

					06-10
				

			

		

		

			
				
如果传入的是数组，则将其转换为包含 rows 和 total 属性的对象，其中 total 表示数据总数，rows 表示数据数组。如果传入的是包含 rows 属性的对象，则直接使用该对象。  在函数内部，首先获取 datagrid 的配置项和...

			
		

	





	

		

			

				
					
 var toolbar = [{
                text:'删除',
                iconCls:'icon-cut',
                handler:function(){
                    var rows = $('#table-m1').datagrid('getSelections');
                    for (let i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        var index = $('#table-m1').datagrid('getRowIndex',row);
                        var originalRows = $('#table-m1').datagrid('getData').originalRows;
                        $('#table-m1').datagrid('deleteRow',index)
                        originalRows = originalRows.filter(function (item) {
                            return item.id !== row.id;
                        })
                        $('#table-m1').data('datagrid').originalRows = null;
                        $('#table-m1').datagrid('loadData',originalRows)
                    }
                }
            },];
            var options = {
                tableName: "orderCustomInvoice",//表名
                toolbar:toolbar,//工具栏
                columns: cols,//列
                data: [],
                pagination: true,//是否使用分页
                pageSize:25,
                pageList: [25,50,100,150],
                nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
                striped : true,//设置为true将交替显示行背景。
                collapsible : true,//显示可折叠按钮
                fitColumns:true,//允许表格自动缩放，以适应父容器
                rownumbers:true,
                remoteSort: false,//排序必填（是否在后端排序的基础上排序）
                sortOrder: 'asc,asc',//排序方式
                sortName: "sap_sn,order_seq",//排序字段
                multiSort: true,//定义是否启用多列排序
                loadFilter:pagerFilter,
                callback: function (data) {//回调，

                }
            };
            //初始化列表
            initEasyUiTable('#table-m1', options);

            //客户端分页，美化明细表
            function pagerFilter(data){
                if (typeof data.length == 'number' && typeof data.splice == 'function') {	// is array
                    data = {
                        total: data.length,
                        rows: data
                    }
                }
                //这个函数为每次表格加载数据的过滤函数，data中包含原始数据，返回的是真正要显示出来的数据
                //获取Datagrid对象
                var dg = $(this);
                //获取选项对象，此处该对象用于保存分页时的相关信息
                var opts = dg.datagrid('options');
                //获取分页器
                var pager = dg.datagrid('getPager');
                //重写表格所使用分页器的onSelectPage方法，此方法在用户选择新的页面时触发，即改变pageNum或pageSize时触发
                //此处真正的翻页逻辑并不在onSelectPage方法里面，可以看到在该方法中仅仅是将新页面的参数(pageNum, pageSize)保存在opts对象中，
                //这两个参数在后面的代码中被使用
                pager.pagination({
                    onSelectPage:function(pageNum, pageSize){
                        opts.pageNumber = pageNum;
                        opts.pageSize = pageSize;
                        //下面注释的代码我暂时不明白有什么作用，没有他们分页功能仍然能够正确实现
                        //                pager.pagination('refresh',{
                        //                    pageNumber:pageNum,
                        //                    pageSize:pageSize
                        //                });
                        //此处loadData方法会加载本地数据，即data中的数据，data中包含有初次加载的所有数据
                        dg.datagrid('loadData',data);
                        //上述方法执行时会被pagerFilter拦截到，并对初始数据进行筛选，以达到分页的效果
                    },
                    layout:['list','sep','first','prev','sep','links','sep','next','last','sep','refresh']
                });
                //真正的分页逻辑
                //第一次进入pagerFilter函数时，data中只有rows中保存了数据，并无originalRows属性，实现客户端分页时，需要在一开始将这些数据保存在
                //originalRows中，成为后续分页的基础数据，所以只要originalRows属性存在且不为空，分页时的基础数据便一直是originalRows中保存的数据
                if(!data.originalRows){
                    data.originalRows =(data.rows);
                }
                //取出选择新的页面时，新页面的参数，前面已经保存在opts对象中了
                var start =(opts.pageNumber-1)*parseInt(opts.pageSize);
                var end = start + parseInt(opts.pageSize);
                //下面对初始数据进行筛选，并将结果放在data.rows中，页面每次加载时只会显示data.rows中的数据
                data.rows =(data.originalRows.slice(start, end));
                //返回data，完成分页
                data.content = (data.originalRows.slice(start, end));
                data.pageable = {"pageNumber":opts.pageNumber,"pageSize":opts.pageSize,"searchCount":false};
                data.pageNumber = opts.pageNumber;
                data.pageSize = opts.pageSize;
                data.totalPages = Math.ceil(data.total / data.pageSize);
                // console.log(data);
                return data;
            }

				
			

			

				

					08-07
				

			

		

		

			
				
 var selected = $('#table-m1').datagrid('getSelections');  for (let i = 0; i < selected.length; i++) {  var row = selected[i];  var index = $('#table-m1').datagrid('getRowIndex', row);  var ...

			
		

	





	

		

			

				
					
请帮我修正这段代码
fieldsToCompare.forEach((field) => {
                                let isDifferent;
                                isDifferent = field.current !== field.last;
                               
                                if (isDifferent) {
                                    //const fieldIndex = dg.datagrid('getColumnIndex', field.fieldName);
                                    dg.datagrid('cellStyler', function (index, colField, value) {
                                        if (index === rowIndex && colField === field.fieldName) {
                                            return 'background-color: #FFD700;';
                                        }
                                    });
                                }
                            });

				
			

			

				

					10-30
				

			

		

		

			
				
以下是一个示例代码，用于遍历 `fieldsToCompare` 数组，比较每个元素的 `current` 和 `last` 属性，若不同则为 datagrid 特定单元格设置样式。假设使用的是 jQuery EasyUI 的 datagrid：  ```javascript // 假设 ...

			
		

	





	

		

			

				
					
Datagrid 显示数据是最新的，但$('#datagrid').datagrid('getSelections')取得的选中数据不是最新的...

				
			

			

				

					移动开发
				

				

					01-30
					
					932
					
				

			

		

		

			
				
项目中使用了easyui的datagrid和dialog,dialog中包括了一个datagrid.
&lt;div id="dlg-role-edit" href="" class="easyui-dialog" modal="true" 
        style="width:500px;height:300px;padding:15px 10px" closed="true&q

			
		

	





	

		

			

				
					
datagrid数据表格使用方法

				
			

			

				

					a623982022的博客
				

				

					01-18
					
					2311
					
				

			

		

		

			
				
将静态HTML渲染为datagrid样式：&lt;!-- 方式一：将静态HTML渲染为datagrid样式 --&gt;
	&lt;table class="easyui-datagrid"&gt;
		&lt;thead&gt;
			&lt;tr&gt;
				&lt;th data-options="field:'id'"&gt;编号&lt;/th&gt;
				

			
		

	





	

		

			

				
					
Jquery easyui中datagrid使用过程中getSelections出现选择总是一行的问题

				
			

			

				

					iteye_10299的博客
				

				

					08-21
					
					678
					
				

			

		

		

			
				

今天在用datagrid时偶然发现一个问题，问题如下：
在使用 var rows = $("#datagride").datagrid('getSelections')的时候，获取选中的行数，在前台页面无论选中几行，获取rows.length的结果均为1，于是查看了一下easyui中jquery.easyui.min.js中的源码。源码如下：
 
function _4bb(_4bc){...

			
		

	





	

		

			

				
					
$(“#dgSimu“).datagrid(“getSelected“)取值赋值

				
			

			

				

					燃烧的梦想是信仰
				

				

					12-07
					
					902
					
				

			

		

		

			
				
选中一行：
	
let row = $("#dgSimu").datagrid("getSelected")

获取列值：get.data，




	选中多行：
	
遍历多行的数据

var get = $("#dg").datagrid("getSelections");

for(var i=0;i<get.length;i++)

{

 var data = get[i].data;

}

getSelections：取得所有选中行数据，返回元素记录的数组数据。

$("#edit...

			
		

	





	

		

			

				
					
前端datagrid("getSelections")问题&后台SQL查询问题

				
			

			

				

					菜鸟程序猿
				

				

					09-10
					
					4099
					
				

			

		

		

			
				
1、今天开发的时候碰到一个问题

			
		

	





	

		

			

				
					
jquery中选择器查找元素兼容IE的小问题

				
			

			

				

					zero_295813128的专栏
				

				

					06-21
					
					2420
					
				

			

		

		

			
				
" id="tr">
    
    	
    		
    		
    		 >
    	
    
    
    
    998
    99A
    20
    1
    1
    1
	
 

今天本想在模板的for循环中加入隐藏域 然后通过隐藏域的值 去查找对应td下面的值，后来谷歌是没有任何问题，缺发现IE下面出现了兼容性问题。
在IE下通过$(input[n

			
		

	





	

		

			

				
					
js获取table的行数与列数

					
热门推荐

				
			

			

				

					不用去猜
				

				

					10-16
					
					1万+
					
				

			

		

		

			
				
var table =document.getElementById("tab1");
 var rows = table.rows.length;
 alert('行数'+rows);
 var colums = table.rows[0].cells.length;
 alert('列数'+colums);


table相当于一个二维数组element类
Table{
ro

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值