实现动态加载树节点,解决方法
分类:关于美高梅

1、古板方法

在明天的付出中遇见多少个奇异的主题材料。即便曾经被本人消除但依旧百思不得其解,决定记录一下,看看有没有大神能给自家答案。
难点再次出现:

下边二个代码片段是 easyUI 页面加载等待,代码如下所示:

推荐介绍阅读:

$(function () { 
var url = "../Source/Query/jhDataQry.ashx?action=query"; 
$(dg).datagrid({ 
url: url, 
queryParams: { 
qsrq: qsrq, 
zzrq: zzrq 
} 
}); 
}) 

<table id="DataGrid" class="easyui-datagrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh', queryParams: { 'action': 'query'}" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table>

是因为作者有4个combotree须求加载数据,然而自身又不想每一遍初叶化二个combotree就去拜访服务器加载一下数码,于是自个儿将加载数据经过写成这么

function ajaxLoading() { 
 var id = "#textboxDiv"; 
 var left = ($(window).outerWidth(true) - 190) / 2; 
 var top = ($(window).height() - 35) / 2; 
 var height = $(window).height() * 2; 
 $("<div class="datagrid-mask"></div>").css({ display: "block", width: "100%", height: height }).appendTo(id); 
 $("<div class="datagrid-mask-msg"></div>").html("正在加载,请稍候...").appendTo(id).css({ display: "block", left: left, top: top }); 
} 
function ajaxLoadEnd() { 
 $(".datagrid-mask").remove(); 
 $(".datagrid-mask-msg").remove(); 
} 

简要介绍EasyUI datagrid editor combogrid寻觅框的贯彻

2、原因分析及建设方案

$.post('xxxurl',function(data){ 
 $('#inputTree0').combotree('loadData',data); 
 $('#inputTree1').combotree('loadData',data); 
 $('#inputTree2').combotree('loadData',data); 
 $('#ttree').combotree('loadData',data); 
}); 

下边看个工具类 基于easyui的页面等待晋升层,即mask

EasyUi中的Combogrid 完毕分页和动态找寻远程数据

html代码中使用class注明了datagrid,导致easyUI分析class代码的时候先深入分析class注脚中的datagrid,那样组件就央浼了三回url;然后又调用js开始化代码央求二遍url。那样变成了再也加载,解决的办法正是只用一种初步化方法来申明easyUI组件避防止再一次的付出须要,即除去html中的class评释(class="easyui-datagrid"),修改后的代码如下:

看起来没什么毛病,刷新分界面点开那多少个combotree树也能显得出来,不过,难点来了,当作者点击树的节点的时候,节点是选上了,但combo上边并不曾显得本人所选取的节点的名号,那使作者很思疑。应该早已足够初叶化过这一个控件了啊(前台代码已经宣称过了class="easyui-combotree" id="inputTree0")然后小编换来一般的初阶化加载数据的格局比较一下

<pre name="code" class="java">/** 
 * 使用方法: 
 * 开启:MaskUtil.mask(); 
 * 关闭:MaskUtil.unmask(); 
 * 
 * MaskUtil.mask('其它提示文字...'); 
 */ 
var MaskUtil = (function(){ 
 var $mask,$maskMsg; 
 var defMsg = '正在处理,请稍待。。。'; 
 function init(){ 
  if(!$mask){ 
   $mask = $("<div class="datagrid-mask mymask"></div>").appendTo("body"); 
  } 
  if(!$maskMsg){ 
   $maskMsg = $("<div class="datagrid-mask-msg mymask">"+defMsg+"</div>") 
    .appendTo("body").css({'font-size':'12px'}); 
  } 
  $mask.css({width:"100%",height:$(document).height()}); 
  var scrollTop = $(document.body).scrollTop(); 
  $maskMsg.css({ 
   left:( $(document.body).outerWidth(true) - 190 ) / 2 
   ,top:( ($(window).height() - 45) / 2 ) + scrollTop 
  }); 
 } 
 return { 
  mask:function(msg){ 
   init(); 
   $mask.show(); 
   $maskMsg.html(msg||defMsg).show(); 
  } 
  ,unmask:function(){ 
   $mask.hide(); 
   $maskMsg.hide(); 
  } 
 } 
}()); 

easyui 1.2.4例证中并从未交到动态加载树节点的事例,只能自个儿钻探。

<table id="DataGrid" fit="true" border="false" toolbar="#TBar" pagination="true" 
data-options="pageSize:20,pageList: [10, 20, 30, 40, 50,100,5000],idField:'chjid',sortName:'chjbh'" 
rownumbers="true" singleSelect="true" url="../Source/JiChu/chjdoc.ashx"> 
<thead> 
<tr> 
</tr> 
</thead> 
</table>
$('#inputTree0').combotree({ 
 url: "xxxurl" 
}); 

效果图:

从源码中可见能够观看combotree 是后续 combo 和 tree两个控件,所以在展开其下属子节点时,把combotree内置的tree的options选项的url重新设置成一个动态取采用值的url,代码如下:

你大概感兴趣的稿子:

  • jQuery Easyui 下拉树组件combotree
  • easyui中combotree循环获取父节点至根节点并出口路线达成格局
  • 浅谈EasyUi ComBotree树修改 父节点选择的主题材料
  • EasyUI 中combotree 默许不能够选用父节点的兑现形式
  • EasyUi combotree 实现动态加载树节点
  • jQuery EasyUI API 中文文书档案 - ComboTree组合树
  • EASYUI TREEGQX56ID异步加载数据落成格局
  • EasyUI的treegrid组件动态加载数据难点的消除办法
  • Jquery EasyUI中弹出显明对话框以及加载效果示例代码
  • easyui combotree加载静态数据难题(选不上)消除格局

这么开始化却又有啥不可选上并出示。

图片 1

$('#cc').combotree({
url:"treejson.aspx?act=allregion&parentid=0", 
onBeforeExpand:function(node){
$('#cc').combotree("tree").tree("options").url= "treejson.aspx?act=allregion&parentid=" + node.id;
}
}); 

末尾自身决定换种加载形式:
$('#inputTree0').combotree('loadData',data);改成$('#inputTree0').combotree({data:data}); 这么就缓和了之前出现的极度选上但不出示你选了哪些的主题素材了。

如上所述是笔者给大家介绍的jQuery EasyUI 页面加载等待及页面等待层,希望对大家持有协理,倘使我们有其余疑问请给小编留言,笔者会及时复苏大家的。在此也特别谢谢大家对台本之家网址的协理!

如上内容是笔者给大家介绍的EasyUi combotree 达成动态加载树节点的相干文化,希望对大家全部帮忙!

以上正是本文的全部内容,希望对我们的读书抱有扶助,也愿意大家多多支持脚本之家。

你可能感兴趣的文章:

  • easyui datagrid 大数据加载效用慢,优化解决方法(推荐)
  • jQuery Easyui使用(二)之可折叠面板动态加载无意义的消除格局
  • EasyUI加载完Html内容样式渲染达成后突显
  • EasyUi combotree 完毕动态加载树节点
  • JQuery EasyUI 加载两遍url的原因深入分析及缓慢解决方案
  • Jquery EasyUI中弹出肯定对话框以及加载效果示例代码
  • EASYUI TREEGTiggoID异步加载数据达成情势
  • EasyUI的treegrid组件动态加载数据难点的化解办法
  • jQuery EasyUI API 华语文书档案 - EasyLoader 加载器

您恐怕感兴趣的稿子:

  • 浅谈EasyUi ComBotree树修改 父节点采用的标题
  • 自在学习jQuery插件EasyUI EasyUI创建树形菜单
  • Jquery easyui 完结动态树
  • jquery中EasyUI完结异步树
  • jquery中EasyUI完成同步树
  • EasyUI Tree+Asp.net实现权力树或目录树导航的轻巧实例
  • jQuery EasyUI API 粤语文书档案 - TreeGrid 树表格使用介绍
  • EasyUI成立职员树的实例代码

您恐怕感兴趣的篇章:

  • jQuery Easyui 下拉树组件combotree
  • easyui中combotree循环获取父节点至根节点并出口路线实现格局
  • 浅谈EasyUi ComBotree树修改 父节点接纳的难点
  • EasyUI 中combotree 暗中认可无法选取父节点的兑现情势
  • EasyUi combotree 完毕动态加载树节点
  • jQuery EasyUI API 中文文书档案 - ComboTree组合树
  • EASYUI TREEG揽胜ID异步加载数据达成形式
  • EasyUI的treegrid组件动态加载数据难题的消除办法
  • Jquery EasyUI中弹出显然对话框以及加载效果示例代码
  • JQuery EasyUI 加载五次url的原故剖析及实施方案

本文由美高梅网址发布于关于美高梅,转载请注明出处:实现动态加载树节点,解决方法

上一篇:js安装教程和NPM包管理器使用详解,npm常用命令详 下一篇:没有了
猜你喜欢
热门排行
精彩图文