jQuery EasyUI tree 使用拖拽时遇到的错误小结

在我使用tree拖拽时总是失败，控制台输出了很多错误。

经过跟踪分析发现这是一个由于特殊配置导致的错误。

原先错误的代码如下：

$('#tree').tree({
//省略其他
loadFilter: function(data, parent){
return data.rows;
}
});

由于我后台返回值并不是一个直接适合tree使用的数据，需要从中取出rows才可以，所以就有了这段代码。

而 EasyUI 出错的原因就在于当拖动时，拖动方法中仍然会调用loadFilter方法，如下图代码：

EasyUI在前面的处理中，已经将data处理为了数组，所以当调用loadFilter方法时，由于返回的data.rows，肯定是undefined，而不是数组，因此在后续对data操作时就会出错，导致拖动失败，而且整棵树都出现问题。

解决的方法也很简单，将loadFilter方法改为可以适配默认情况即可：

loadFilter: function(data, parent){
if($.isArray(data)){
return data;
}
return data.rows;
}

主要就是判断如果data是个数组就直接返回，否则仍然返回我自己的data.rows。

以上所述是小编给大家介绍的jQuery EasyUI tree 使用拖拽时遇到的错误小结，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • jqueryUI里拖拽排序示例分析

    示例参考http://jsfiddle.net/KyleMit/Geupm/2/  (这个站需要FQ才能看到效果) 其实是jqueryUI官方购物车拖拽添加例子的增强版,就是在拖拽的时候增加了排序 这个是html代码 复制代码 代码如下: <div id="products"> <h1 class="ui-widget-header">Products</h1> <div id="catalog">

  • jQuery EasyUI API 中文文档 - Draggable 可拖拽

    用$.fn.draggable.defaults重写默认的defaults. 用法 复制代码 代码如下: <div id="dd" style="width:100px;height:100px;"> <div id="title" style="background:#ccc;">title</div> </div> 复制代码 代码如下: $('#dd').draggable(

  • Jquery UI实现一次拖拽多个选中的元素操作

    Jquery UI实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在实际的操作中,遇到个很多的问题,说明一下,最后附上效果图和代码. 1.本人使用的bootstrap框架,引入jquery-ui后,为元素添加拖拽方法后,提示该方法不是一个函数.查找原因,是bootstrap和jquery-uide的$ 标识符控制权冲突.在引入的jquery-ui的js前加上一下语句

  • 通过jquery-ui中的sortable来实现拖拽排序的简单实例

    通过jquery-ui中的sortable来实现拖拽排序的简单实例

    1.引入文件 <script src="{sh::PUB}js/jquery-1.10.1.min.js"></script> <link rel="stylesheet" href="Public/css/jquery-ui.min.css"> <script src="{sh::PUB}js/jquery-ui.min.js"></script> 2.给元素附上s

  • JQuery UI的拖拽功能实现方法小结

    JQuery UI提供的API极大简化了拖拽功能的开发.只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可. 拖拽原理 首先要明确几个概念. ource:拖拽源,要拖动的元素. taerget:拖放目标,能够放入source的容器. 拖拽的动作分解如下: 1. drag start:在拖拽源(source)上按下鼠标并开始移动 2. drag move: 移动过程中 3. drag enter: 移动进入目标(target)容器 4.

  • jQuery EasyUI tree 使用拖拽时遇到的错误小结

    jQuery EasyUI tree 使用拖拽时遇到的错误小结

    在我使用tree拖拽时总是失败,控制台输出了很多错误. 经过跟踪分析发现这是一个由于特殊配置导致的错误. 原先错误的代码如下: $('#tree').tree({ //省略其他 loadFilter: function(data, parent){ return data.rows; } }); 由于我后台返回值并不是一个直接适合tree使用的数据,需要从中取出rows才可以,所以就有了这段代码. 而 EasyUI 出错的原因就在于当拖动时,拖动方法中仍然会调用loadFilter方法,如下图代

  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)

    本文实例讲述了jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法.分享给大家供大家参考,具体如下: 该插件是文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的拖拽改变元素大小的效果,您可以根据自己的实际需求来设置被拖拽元素的最小宽高和最大宽高.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

  • jQuery 实现DOM元素拖拽交换位置的实例代码

    实现步骤 1.html + bootstrap 布局画3个面板. 注:面板样式 position 属性必须是绝对位置或者相对位置. 2.监听面板的的 mousedown事件. 记录当前对应面板的位置target_index,设置面板透明拖动. 3.监听当前被拖动的面板的mousemove事件. 根据鼠标移动的位置和面板的相对位置计算出面板应该出现的新位置,就将面板位置设置为新位置. 4.监听当前被拖动的面板的mouseup事件. 当松开鼠标时,查看当前鼠标所在位置对应的面板的位置exchange

  • jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)

    本文实例讲述了jQuery自定义图片缩放拖拽插件imageQ实现方法.分享给大家供大家参考,具体如下: 综合网上一些代码 自己写的一个图片缩放拖拽的小插件 /** * * <a href="http://lib.csdn.net/base/22" class='replace_word' title="jQuery知识库" target='_blank' style='color:#df3434; font-weight:bold;'>jQuery<

  • 扩展jquery easyui tree的搜索树节点方法(推荐)

    如下所示: /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状态 */ (function($) { $.extend($.fn.tree.methods,

  • jQuery EasyUI tree增加搜索功能的实现方法

    扩展jQuery EasyUI tree搜索树节点的方法,使其支持节点名称的模糊匹配,将不匹配的节点隐藏. /** * 1)扩展jquery easyui tree的节点检索方法.使用方法如下: * $("#treeId").tree("search", searchText); * 其中,treeId为easyui tree的根UL元素的ID,searchText为检索的文本. * 如果searchText为空或"",将恢复展示所有节点为正常状

  • jquery实现可旋转可拖拽的文字效果代码

    jquery实现可旋转可拖拽的文字效果代码

    本文实例讲述了jquery实现可旋转可拖拽的文字效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript

  • jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

    jQuery Easyui加载表格出错时在表格中间显示自定义的提示内容

    onLoadSuccess : function(data) { if(!data.success){ //添加一个新数据行,第一列的值为你需要的提示信息,然后将其他列合并到第一列来,注意修改colspan参数为你columns配置的总列数 $(this).datagrid( 'appendRow', { portId : '<div style="text-align:center;color:red">'+data.msg+'</div>' }).datag

  • jQuery实现div横向拖拽排序的简单实例

    实例如下: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>div横向拖拽排序</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <style type="text/css"

  • 详解Jquery EasyUI tree 的异步加载（遍历指定文件夹，根据文件夹内的文件生成tree）

    Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)具体代码如下: private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationManager.AppSettings["LocalConnectionString"]; string path = context.Server.MapPath(@"

随机推荐