EasyUI editable datagrid plugin 删除失败的解决方法
来源:互联网 发布:金三立网络硬盘录像机 编辑:程序博客网 时间:2024/06/18 01:51
最近在学习使用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 selectedtitle:'Warning',msg:'No record is selected.'},confirm:{// when select a rowtitle:'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" onclick="javascript:$('#dg').edatagrid('addRow')">New</a> <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="javascript:$('#dg').edatagrid('destroyRow')">Destroy</a> <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:$('#dg').edatagrid('saveRow')">Save</a> <a href="#" class="easyui-linkbutton" iconCls="icon-undo" plain="true" onclick="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报错,可以正常删除了。具体是什么原因还不清楚,如果有高手知道原因或者是我哪里操作错误希望能指出一下。
- EasyUI editable datagrid plugin 删除失败的解决方法
- 学习easyUI 扩展的Editable DataGrid组件
- EasyUI里的DataGrid Editable combobox下拉框联动
- jquery easyui datagrid的增加,修改,删除
- easyui datagrid deleteRow(删除行)的BUG!
- easyui-datagrid多笔删除的BUG
- 【EasyUi DataGrid】批量删除
- jquery>editable plugin
- easyui datagrid请求两次解决方法
- easyui datagrid 动态删除行
- EasyUI-DataGrid之批量删除
- EasyUI-DataGrid之批量删除
- easyui datagrid 删除行问题
- EasyUI-DataGrid之批量删除
- easyui datagrid数据批量删除
- easyui datagrid 没数据时显示滚动条的解决方法
- jquery-easyui datagrid 修改默认pagesize无效的解决方法
- easyui datagrid右边框不显示的解决方法
- 暑期小节
- 腾讯 程序员 Java 笔试题目
- qtmac发布的第一测试流程
- 对象的内存表示
- gradle学习总结,偷窥android studio的底裤
- EasyUI editable datagrid plugin 删除失败的解决方法
- 机房收费系统(合作版)总结——技术篇(一)
- Python @property
- 设计模式笔记(十)--小结
- 串口通信编程--多线程异步方式
- 《机器学习实战》学习笔记:k-近邻算法实现
- 《JAVA网络编程》阅读笔记(三)
- Excel 使用ODBC直接访问
- React学习笔记(6)---组件协同使用介绍