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

最新推荐文章于 2023-01-16 14:38:07 发布

JOKERTT

最新推荐文章于 2023-01-16 14:38:07 发布

阅读量2.1k

点赞数

分类专栏： PHP 文章标签： thinkphp easyui datagrid edatagrid plugin

本文链接：https://blog.csdn.net/JOKERTT/article/details/48092837

版权

PHP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

前台代码：

<span style="font-size:18px;"><!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic CRUD Application - jQuery EasyUI CRUD Demo</title>
    <link rel="stylesheet" type="text/css" href="__EASYUI__/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="__EASYUI__/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="__EASYUI__/themes/color.css">
 <!--   <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">	-->
    <script type="text/javascript" src="__EASYUI__/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="__EASYUI__/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="__EASYUI__/ext_editablegrid/jquery.edatagrid.js"></script>
    <script>
	    $(function(){
	    	$('#dg').edatagrid({
				url: '/Test/Admin/Easyui/getAll',		//获取数据的方法，这里是用Thinkphp的方法获取到的数据

				/*A URL to save data to server and !return the added row.!*/
			    saveUrl: '/Test/Admin/Easyui/insertFromEG',
			    updateUrl: '/Test/Admin/Easyui/updateFromEG',

			    /*需要有json返回值的!echo json_encode(array('success'=>true));*/
			    destroyUrl: '/Test/Admin/Easyui/deleteFromEG',	//删除数据的Thinkphp方法的地址
			    destroyMsg:{
					norecord:{	// when no record is selected
						title:'Warning',
						msg:'No record is selected.'
					},
					confirm:{	// when select a row
						title:'Confirm',
						msg:'Are you sure you want to delete?'
					}
				},
			});
	    });
    </script>
</head>
<body>
	<h1>Test EasyUI，可直接编辑的DataGrid</h1>
	<table id="dg" title="User Management" class="easyui-datagrid" style="width:800px;height:400px"

        toolbar="#toolbar"
        rownumbers="true" fitColumns="true" >
	    <thead>

	        <tr>
 <th field="firstname" width="50" editor="{type:'validatebox',options:{required:true}}">First Name</th>
            <th field="lastname" width="50" editor="{type:'validatebox',options:{required:true}}">Last Name</th>
            <th field="phone" width="50" editor="text">Phone</th>
            <th field="email" width="50" editor="{type:'validatebox',options:{validType:'email'}}">Email</th>
	        </tr>
	    </thead>
	</table>
	<div id="toolbar">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="javascript:$('#dg').edatagrid('addRow')">New</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" οnclick="javascript:$('#dg').edatagrid('saveRow')">Save</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" οnclick="javascript:$('#dg').edatagrid('cancelRow')">Cancel</a>

	</div>
</body>
</html></span>

大致的界面是这样的：

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

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

<span style="font-size:18px;">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);
						}
					}
				}</span>

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

<span style="font-size:18px;">var index = dg.datagrid('getRowIndex', idValue);</span>

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

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

JOKERTT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI editable datagrid plugin 删除失败的解决方法

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

扫一扫