(转)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表单元素中：

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]);
);

　　也可以这样获取Row的值

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

　　alert(s[0].id);

　　alert(s.length);