(转)row selection for jquery easyui datagrid

本文转载自：http://lilywangcn.iteye.com/blog/848226

easyui的datagrid中为我们提供了行选择功能的api，不知是否浏览器不兼容的原因，无论在firefox还是在ie下面默认提供的行 选择功能不是非常好用。为获取共选择了多少行，根据api获取的row count和我们实际界面上的row count总是不相等，这样就为修改，删除等功能制造了麻烦。

 

     使用easyui默认提供的行选择api分别获取选择的行，行数，每行数据的id字符串，对选择的行赋值到对应的form表单元素中：

Js代码 

1. var row = $('#grid').datagrid('getSelections');  //acquire selected rows  
2. var count=row.length;            //acquire the count of the selected rows  
3. var ids = '';  
4.  $.each(row, function(i, rowval) {  
5.       if (i)  
6.          ids += ',';  
7.          ids += rowval.id;  
8.  })                                            //acqire selected row ids string  
9. var selrow = $('#grid').datagrid('getSelected'); //acquire the first selected row  
10. $('.easyui-validatebox').each(function(index){  //asign the row value to the form input  
11.      $(this).val(selrow[this.id]);                       
12.  });   

 但是$('#grid').datagrid('getSelections')获取的结果和实际界面上不符，这应该算是easyui中的一个bug吧。

更正：$('#grid').datagrid('getSelections')获取的结果和实际界面是相符合的，需要

 

Js代码 

1. $('#grid').datagrid({title: mygrid.title,  
2.                 iconCls:'icon-save',  
3.                 width:650,  
4.                 height:667,  
5.                 url:mygrid.url,  
6.                 sortName: 'id',  
7.                 sortOrder: 'asc',  
8.                 remoteSort: false,  
9.                 idField:'id',  
10.                 columns: mygrid.columns,      
11.                 pagination:true,  
12.                 noheader:false,  
13.                 rownumbers:true,  
14.                 toolbar: mygrid.toolbar  
15. });  

 中指定正确的idField。（2011-3-7）

因此要解决一下一系列问题：

（1）根据界面选择获取选择rows的总行数。

Js代码 

1. var count=$('.datagrid-row-selected td:nth-child(1) div').length;  

 （2）根据界面选择获取选择row的ids字符串

Js代码 

1. var ids='';  
2. $('.datagrid-row-selected td:nth-child(3) div').each(function(i) {  
3.     if (i)  
4.     ids += ',';  
5.     ids += $(this).text();  
6. });  

 （3）根据选择的行为form表单赋值。有两种方式

    第一种方式，根据grid界面的显示值获取选择行的值。但是这种方式对于不在grid中显示的hidden域无法赋值

Java代码 

1. var rowval=[];  
2. $('.datagrid-row-selected td div').each(function(i) {  
3.     if (i!=0 && i!=1)  
4.     rowval.push($(this).text());  
5. });  
6. $('.easyui-validatebox').each(function(index){    
7.     $(this).val(rowval[index]);  
8. });   

    第二种方式，需要grid通过ajax load 数据的时候，获取。通过在jquery.easyui.min.js中第6347行的函数中增加一个全局变量datastore

 

Js代码 

1. $.ajax({type:opts.method,url:opts.url,data:_471,dataType:"json",success:function(data){  
2.     datastore=data;  
3.     ........  

      在使用的时候首先获得选择行对应的index

Js代码 

1. var row_index;  
2. $('.datagrid-row-selected td:nth-child(1) div').each(function(i) {  
3. row_index = $(this).text();  
4. );  
5.         

    然后赋值

Js代码 

1. var rowval=datastore.rows[row_index];  
2. $('.easyui-validatebox').each(function(index){    
3. $(this).val(rowval[this.id]);  
4. );  
   

　　也可以这样获取Row的值

　　var s = $("#company").datagrid('getSelections');
    alert(s[0]['cphone']);

　　alert(s[0].id);

　　alert(s.length);