EasyUI editable datagrid plugin 删除失败的解决方法

最近在学习使用EasyUI,今天跟着官方的教程做了一下editable datagrid的例子,官方教程在这里:http://www.jeasyui.com/tutorial/app/crud2.php。我的前台代码基本和官方教程一样,只不过我用的Thinkphp来写后台操作数据过程。

前台代码:




    
    Basic CRUD Application - jQuery EasyUI CRUD Demo
    
    
    
 
    
    
    
    


	

Test EasyUI,可直接编辑的DataGrid

First Name Last Name Phone Email

大致的界面是这样的:


添加和修改功能都可以正常的使用,但是一删除j,前台获取后台返回的json时js就会报错

分明是和官网一模一样的代码,可是就是删除不了……后来看了一下jquery.edatagrid.js的源码,删除的功能具体是由destroyRow这个函数执行的,找到函数的源码,由于我的错误出现在前台处理json返回数据的时候,所以直接找有没有ajax处理的代码,发现有这样的函数:

function _del(row){
					var index = dg.datagrid('getRowIndex', row);
					if (index == -1){return}
					if (row.isNewRecord){
						dg.datagrid('cancelEdit', index);
					} else {
						if (opts.destroyUrl){
							var idValue = row[opts.idField||'id'];
							$.post(opts.destroyUrl, {id:idValue}, function(data){
								var index = dg.datagrid('getRowIndex', index);
							//	alert(index+"  "+idValue);
								if (data.isError){
									dg.datagrid('selectRow', index);
									opts.onError.call(dg[0], index, data);
									return;
								}
								if (opts.tree){
									dg.datagrid('reload');
									var t = $(opts.tree);
									var node = t.tree('find', idValue);
									if (node){
										t.tree('remove', node.target);
									}
								} else {
									dg.datagrid('cancelEdit', index);
									dg.datagrid('deleteRow', index);
								}
								opts.onDestroy.call(dg[0], index, row);
								var pager = dg.datagrid('getPager');
								if (pager.length && !dg.datagrid('getRows').length){
									dg.datagrid('options').pageNumber = pager.pagination('options').pageNumber;
									dg.datagrid('reload');
								}
							}, 'json');
						} else {
							dg.datagrid('cancelEdit', index);
							dg.datagrid('deleteRow', index);
							opts.onDestroy.call(dg[0], index, row);
						}
					}
				}

重点注意中间post提交ajax的部分,调试了好久发现问题出在post提交ajax的下一行代码:

var index = dg.datagrid('getRowIndex', idValue);

这个函数的作用就是:根据用户选择的行的数据的主码(就是idValue这个值)转换为,显示在界面中的数据表中的行号。比如在我的例子中,用户选择删除kevin这行数据,kevin这行数据在我的数据库中的主码id是33,而它显示在第一行,因此,这个函数就会把33转换为0(数据表的行号是从0开始),并把返回值0赋给index,然后对index执行具体的删除流程。我调试输出了一下index,发现在我的例子中输出的index总是-1,看样子问题在于getRowIndex这个函数。根据官方教程,这个函数有两种参数形式:

源码中用到的就是id的形式,我就尝试了一下将idValue参数换成了row(这个参数就是用户选择的行的对象),结果居然成功了!不再有任何js报错,可以正常删除了。具体是什么原因还不清楚,如果有高手知道原因或者是我哪里操作错误希望能指出一下。




你可能感兴趣的:(PHP)