lilywangcn 发表于 2013-1-29 11:35:09

row selection for jquery easyui datagrid

    easyui的datagrid中为我们提供了行选择功能的api,不知是否浏览器不兼容的原因,无论在firefox还是在ie下面默认提供的行选择功能不是非常好用。为获取共选择了多少行,根据api获取的row count和我们实际界面上的row count总是不相等,这样就为修改,删除等功能制造了麻烦。
    
http://dl.iteye.com/upload/attachment/371601/459c9b19-716a-3ca6-a9fe-25d5e0f031cc.bmp
     使用easyui默认提供的行选择api分别获取选择的行,行数,每行数据的id字符串,对选择的行赋值到对应的form表单元素中:
var row = $('#grid').datagrid('getSelections');  //acquire selected rowsvar count=row.length;            //acquire the count of the selected rowsvar ids = ''; $.each(row, function(i, rowval) {      if (i)         ids += ',';         ids += rowval.id; })                                            //acqire selected row ids stringvar 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);                      });  但是$('#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);});     第二种方式,需要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;$('.easyui-validatebox').each(function(index){$(this).val(rowval);});
页: [1]
查看完整版本: row selection for jquery easyui datagrid