1. function YpTreeMenu(ypTreeMenu,treeObj) {
  2. this.ypTreeMenu=ypTreeMenu;
  3. this.treeObj=treeObj;
  4. this.treeId=treeObj.id+"tree";
  5. this.treeOK=this.treeId+"ok";
  6. this.treeCLOSE=this.treeId+"close";
  7. this.treeCheckAll=this.treeId+"checkAll";
  8. this.treeReverse=this.treeId+"reverse";
  9. this.treeCancelAll=this.treeId+"CancelAll";
  10. this.treeReset=this.treeId+"Reset";
  11. this.tree=null;
  12. this.init();
  13. }
  14. YpTreeMenu.prototype = {
  15. init:function(){
  16. var that=this;
  17. this.width=this.ypTreeMenu.width||500;
  18. this.height=this.ypTreeMenu.height||500;
  19. this.treeStructure=this.ypTreeMenu.treeStructure;
  20. this.treeUrl=this.ypTreeMenu.treeUrl;
  21. this.treeIdObj=this.ypTreeMenu.treeIdObj;
  22. this.treeExtendObjs=this.ypTreeMenu.treeExtendObjs;
  23. this.treeType=this.ypTreeMenu.treeType||"radio";
  24. this.disabledLink=this.ypTreeMenu.disabledLink;
  25. this.lockParent=this.ypTreeMenu.lockParent;
  26. this.isWarrants=this.ypTreeMenu.isWarrants;
  27. this.clickParent=this.ypTreeMenu.clickParent;
  28. $(that.treeObj).unbind().bind('click',function(ev){
  29. that.show();
  30. });
  31. },
  32. show:function(){
  33. var that=this;
  34. var treeDiv=$("#"+that.treeId);
  35. if(!(treeDiv&&treeDiv.length)){
  36. var tO=$(that.treeObj);
  37.  
  38. var left=tO.offset().left;
  39. if(that.width+left>$("body").width()){
  40. left=left-(that.width-tO.width());
  41. }
  42. var top=tO.offset().top+tO.height();
  43. var createBtn=function(bit){
  44. var buttons=[];
  45. var aStyle=' display:inline-block; margin: 2px 5px; text-decoration: none; color: #0A5991; font-weight: bold;';
  46. if(bit){
  47. var style=aStyle+'color:#2F3841;';
  48. buttons.push([that.treeCheckAll,"全选",style,function(ev){
  49. that.tree.tree.checkAllNodes(true);
  50. }]);
  51. buttons.push([that.treeCancelAll,"全部取消",style,function(ev){
  52. that.tree.tree.checkAllNodes(false);
  53. }]);
  54. buttons.push([that.treeOK,"确认",style,function(ev){
  55. var nodes=that.tree.tree.getCheckedNodes(true);
  56. var names=[];
  57. var ids=[];
  58. if(nodes&&nodes.length){
  59. for(var i=0;i<nodes.length;i++){
  60. names.push(that.tree.getName(nodes[i]));
  61. ids.push(that.tree.getId(nodes[i]));
  62. }
  63. }
  64. $(that.treeObj).val(names.join(","));
  65. if(that.treeIdObj){
  66. $(that.treeIdObj).val(ids.join(","));
  67. }
  68. if(that.treeExtendObjs){
  69. $(treeExtendObjs).val(jyTools.obj2JsonString(nodes));
  70. }
  71. that.recovery();
  72. }]);
  73. }
  74. buttons.push([that.treeReset,"重置",aStyle+' ',function(ev){
  75. $(that.treeObj).val("");
  76. setNullCss($(that.treeObj),"字段不能为空");
  77. $(that.treeIdObj).val("");
  78. that.tree.tree.checkAllNodes(false);
  79. that.recovery();
  80. }]);
  81. buttons.push([that.treeCLOSE,"关闭",aStyle+' ',function(ev){
  82. that.recovery();
  83. }]);
  84. return {
  85. getBtnStr:function(){
  86. var btnStr=[];
  87. var groupBtn=function(btn){
  88. return '<a href="javascript:void(0)" id="'+btn[0]+'" style="'+btn[2]+'">'+btn[1]+'</a>'
  89. }
  90. for(var i=0;i<buttons.length;i++){
  91. btnStr.push(groupBtn(buttons[i]));
  92. }
  93. return btnStr.join("");
  94. },
  95. addEvent:function(){
  96. for(var i=0;i<buttons.length;i++){
  97. var btn=buttons[i]
  98. $("#"+btn[0]).unbind().bind("click",btn[3]);
  99. }
  100. }
  101. }
  102. }
  103. var createTree=function(bit){
  104. var h=that.height-25;
  105. var btnDiv="";
  106. var btnOp=createBtn(bit);
  107. btnDiv='<div class="treeBtns">'+btnOp.getBtnStr()+'</div>';
  108. var cDiv='<div style="overflow:auto;width:100%;height:'+h+'px;" id="'+that.treeId+'_"></div>';
  109. $("body").append('<div class="ui-widget-content treeMenu" style="left:'+left+'px; top:'+(top+6)+'px;width:'+that.width+'px;height:'+that.height+'px;" id="'+that.treeId+'">'+cDiv+btnDiv+'</div>');
  110. btnOp.addEvent();
  111. };
  112. if(that.treeStructure){
  113. createTree();
  114. that.tree= $("#"+that.treeId).jyTree(that.treeStructure);
  115. that.tree.show();
  116. }else if(that.treeUrl){
  117. var ownTreeS= {"url":that.treeUrl};
  118. if(this.treeType=="radio"){
  119. createTree();
  120. ownTreeS["viewFun"]=function(nodeId,node){
  121. if(node.isParent && that.lockParent){
  122. that.clickParent();
  123. }else if(node.level != 4){
  124. that.clickParent();
  125. }else{
  126. var a=that.tree.getName(node);
  127. $(that.treeIdObj).css("border-color","#ff0000")
  128. $(that.treeObj).val(a);
  129. removeNullCss($(that.treeObj));
  130. if(that.treeIdObj){
  131. $(that.treeIdObj).val(that.tree.getId(node));
  132. }
  133. if(that.treeExtendObjs){
  134. $(that.treeExtendObjs).val(jyTools.obj2JsonString(node));
  135. }
  136. if(that.isWarrants){
  137. dictDetail();
  138. }
  139. that.recovery();
  140. }
  141.  
  142. };
  143. }else if(this.treeType="checkbox"){
  144. createTree(true);
  145. ownTreeS["check"]=true;
  146. }
  147. if(this.disabledLink=="true")
  148. {
  149. ownTreeS["disabledLink"]=true;
  150. }
  151. that.tree=$("#"+that.treeId+"_").jyTree(ownTreeS);
  152. that.tree.show();
  153. }
  154. }
  155. $("#"+that.treeId).show();
  156. },
  157. recovery:function(){
  158. var that=this;
  159. $("#"+this.treeId).remove();
  160. that=null;
  161. }
  162. };
  163.  
  164. (function( $ ){
  165. $.fn.ypTreeMenu = function(menuTreeStructure) {
  166. return new YpTreeMenu(menuTreeStructure,$(this)[0]);
  167. };
  168. })( jQuery );
  1. $(document).ready(function(){
  2. var URL ="后台url返回List<map> json 串";
  3. $("input[name='guarTypeName']").ypTreeMenu({"treeUrl":URL,"treeType":"checkbox","treeIdObj":$("input[name='guarType']"), "width":"200","height":"300","disabledLink": true});
  4. $("input[name='guarTypeName']").attr({ readonly: "readonly"});
  5. });
  1. private List<Map<String, String>> treeAreaData(List<AreaDTO> data) {
  2. if(data!=null && data.size()>0){
  3. List<Map<String, String>> maps = new ArrayList<Map<String, String>>();
  4. for(AreaDTO dto: data){
  5. Map<String, String> map = new HashMap<String, String>();
  6. map.put("ID", dto.getAreaCode());
  7. map.put("NAME", dto.getAreaName());
  8. map.put("PID", dto.getParentId());
  9. maps.add(map);
  10. }
  11. return maps;
  12. }else{
  13. return null;
  14. }
  15. }

自定义tree的更多相关文章

  1. js/jq基础(日常整理记录)-4-一个简单的自定义tree插件

    一.一个简单的自定义tree插件 上一篇是之前自定义的table插件,这一篇也是之前同期尝试做的一个tree插件. 话不多说,先看看长什么样子哈! 现在来看确实不好看,以后在优化吧! 数据源:ajax ...

  2. easyui treegrid 封装(不用分页,用加载更多按钮)延迟加载加加载更多

    /** * @author wsf数据加载 */ ; var intervalId = null; (function (win,$){ $.myCache = { dataCache : {},// ...

  3. zTree的拖拽排序

    ztree本身是可以支持拖拽的,但是却没有找到明确的支持拖拽的排序,也就是说,在拖拽过程中,需要自定义维护拖拽后的顺序并保存至后台. 在这样一个比较常规的需求情况下,网上也有朋友给出了一些解决方案,比 ...

  4. 使用layui-tree美化左侧菜单,点击生成tab选项

    layui-tree美化左侧菜单 html <div class="layui-side layui-bg-black"> <div class="la ...

  5. odoo10 addon开发流程

    odoo addon开发流程 创建一个addon(插件) 命令如下 python odoo-bin scaffold 插件名 路径 # 例如 python odoo-bin scaffold hh_t ...

  6. Git——基本操作(三)

    一.安装和配置 1.Git安装 yum install git -y 安装完Git就可以对其做一些配置: Git有一个工具被称为git config,它允许你获得和设置配置变量: 这些变量可以控制Gi ...

  7. antd Tree组件中,自定义右键菜单

    最近项目中,有一个需求是自定义antd的Tree组件的右键菜单功能. 直接上代码 class Demo extends Component { state = { rightClickNodeTree ...

  8. easyUI tree 自定义图标

    文章转载自: https://blog.csdn.net/zhlantian/article/details/52913115 近期由于项目中需要使用easyui tree树形列表,并在系统中动态配置 ...

  9. element-ui tree树形组件自定义实现可展开选择表格

    最近做项目遇到一个需求,表格里可以展开,可以选择,大概效果如下图: 一开始是在table组件里找方法,使用了表格的合并方法,效果是实现了,但是表格的多选每次触发时,都会执行好几次,而且没法实现一部分的 ...

随机推荐

  1. 买卖股票的最佳时机 III

    给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 两笔 交易. 注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的 ...

  2. Map遍历的几种方式

    代码示例 /** * @author liaowenhui * @date 2020/6/25 11:15 */ public class TestMap { public static void m ...

  3. php利用腾讯ip分享计划获取地理位置示例分享

    <?php function getIPLoc_QQ($queryIP){ $url = 'http://ip.qq.com/cgi-bin/searchip?searchip1='.$quer ...

  4. python的默认参数的一个坑

    前言 pass 正文 在 https://docs.python.org/3/tutorial/controlflow.html#default-argument-values 中,有这样一段话 Im ...

  5. 【SpringMVC】SpringMVC 入门

    SpringMVC 入门 文章源码 SpringMVC 基本概念 在 JavaEE 开发中,几乎全都是基于 B/S 架构的开发.在 B/S 架构中,系统标准的三层架构包括:表现层.业务层.持久层. 表 ...

  6. JavaScript入门-函数function(二)

    JavaScript入门-函数function(二) 递归函数 什么是递归函数? 递归简单理解就是,在函数体里,调用自己. //我们在求一个10的阶乘的时候,可能会这么做 //写一个循环 var to ...

  7. awk -v参数

    -v var=val --assign var=val Assign the value val to the variable var, before execution of the progra ...

  8. kubernets之DaemonSet

    一  k8s资源之DaemonSet 1.1 介绍认识DaemonSet DaemonSet可以理解为一种比较特殊的RS,DaemonSet的作用是永远保持被指定的节点只运行一个pod的副本,可用作集 ...

  9. Java中的基本数据类型与引用数据类型

    一.基本数据类型 byte.short.int.long(整数类型) float.double(浮点数类型) char(字符型) boolean(布尔类型 ) Java数据大多数存放在堆栈中. 栈区: ...

  10. 用APICloud开发iOS App Clip详细教程

    App Clip是苹果公司在WWDC20开发者大会上发布的新功能,用户可以只访问应用程序的一小部分,而无需下载整个应用,被称为苹果小程序.本文主要介绍如何通过APICloud开发App Clip. 一 ...