row selection for jquery easyui datagrid

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

    

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

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

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

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

 

$('#grid').datagrid({title: mygrid.title,
				iconCls:'icon-save',
				width:650,
				height:667,
				url:mygrid.url,
				sortName: 'id',
				sortOrder: 'asc',
				remoteSort: false,
				idField:'id',
				columns: mygrid.columns,	
				pagination:true,
				noheader:false,
				rownumbers:true,
				toolbar: mygrid.toolbar
});

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

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

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

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

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

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

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

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

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

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

 

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

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

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

    然后赋值

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