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]