etmvc结合easyui-tree开发时的问题

原创 2013年12月04日 09:50:05


背景

花了两天时间来做帮助文档生成树的的任务,期间遇到了许多问题,这里就说几点吧

etmvc集成了tree

  • etmvc很好的集成了json拼写tree的方式,这样在写树形结构时就不需要像struts那样使用大量的字符串来拼树形结构,但是初学者往往不得要领,这里我分享下自己的经验吧。
    • 首先定义自己需要的模板,注意要使用对应的easyui-tree的属性来定义,如下代码
      全选示例 :
      public class Help  extends ActiveRecordBase  {
              @Id private Integer id;
      	@Column private Integer pId;
      	@Column private String name;
      	@Column private Integer sort;
              // 由于url在easyui-tree里是不存在的属性,所以必须使用它提供的专门用来设               置属性的元素attributes,如下mapa
      	@Column private String url;
      	@Column private String iconCls;
      	@Column private Integer status;
             //easyui-tree的特有属性,用来设定额外属性的,不需要和数据库关联
      	private Map<String,Object> attributes = new HashMap<String, Object>();
      	//判断是否有子节点
      	public int getChildCount() throws Exception {
      		return (int)count(Help.class, "pId=?", new Object[]{id});
      	}
      	
      	public String findChildIds() throws Exception {
      		String s = "";
      		List<Integer> ids = new ArrayList<Integer>();
      		ids.add(id);
      		while(!ids.isEmpty()){
      			int id = ids.remove(0);
      			s += id + ",";
      			for(Help help: Help.findAll(Help.class, "pId=?", new Object[]{id})){
      				ids.add(help.getId());
      			}
      		}
      		if (!s.equals("")){
      			s = s.substring(0, s.length() - 1);
      		}
      		return s;
      	}
      	......
            //getter/setter
      
  • 其次编写controller类,编写controller时需要注意的也是关于attributes的设定,代码如下:
    全选示例 :
    public View getItems() throws Exception {
    		List<Map<String,Object>> items = new ArrayList<Map<String,Object>>();
    		
    		List<Help> helps = Help.findAll(Help.class, "pId=0", null, "sort");
    		for(Help help: helps){
    			Map<String,Object> item = new HashMap<String,Object>();
    			item.put("id", help.getId());
    			item.put("text", help.getName());
    			//设定attributes,开始时我想在models中装入,而看到同事帮助在此处使用,感觉在此处使用更好
    			Map<String,Object> attributes = new HashMap<String, Object>();
    			attributes.put("url", help.getUrl());
    			item.put("attributes", attributes);
    			
    			items.add(item);
    		}
    		
    		List<Map<String,Object>> doing = new ArrayList<Map<String,Object>>();
    		doing.addAll(items);
    		while(!doing.isEmpty()){
    			List<Map<String,Object>> todo = new ArrayList<Map<String,Object>>();
    			for(Map<String,Object> item: doing){
    				helps = Help.findAll(Help.class, "pId=?", new Object[]{item.get("id")}, "sort");
    				if (helps.isEmpty()){
    					continue;
    				}
    				List<Object> children = new ArrayList<Object>();
    				for(Help help: helps){
    					Map<String,Object> child = new HashMap<String,Object>();
    					child.put("id", help.getId());
    					child.put("text", help.getName());
    					
    					Map<String,Object> attributes = new HashMap<String, Object>();
    					attributes.put("url", help.getUrl());
    					child.put("attributes", attributes);
    					
    					child.put("state", help.getChildCount() > 0 ? "closed" : "open");
    					children.add(child);
    					
    					todo.add(child);
    				}
    				item.put("children", children.toArray(new Object[children.size()]));
    			}
    			doing = todo;
    		}
    		System.out.println(new JsonView(items));
    		return new JsonView(items);
    	}
    

easyui-tree

  • easyui啊,让现在的我又爱又恨,说说easyui的tree吧,为了做这个模块,我算是翻遍网页吧,但最终能用到的少之又少。该模块的easyui代码如下:
全选示例 :
$(function() {			 
			$("#helptree").tree({				
				line:true,
				checkbox:false,
    			        url:"<c:url value='/doc/help/getItems'/>",				    
				onClick: function(node){
					if(node.state == null){
						var data = $("#helptree").tree('getData',node.target);
						addTab(node.text,_base+data.attributes.url);
					}
             }
			});
			
		});

上面代码里当触发一个onClick事件时,如何拿到传入的url是一个让人头大的问题,我们试过了onLoadSuccess,以及onClick的好些方法都没有用,后来同事查找更新版本的API发现可以使用getData方法来拿,详见api吧,下面说说几个特性:

  • 很多事件的回调函数需要 'node' 函数,它包含下列特性:
    • id:绑定到节点的标识值。
    • text:显示的文字。
    • checked:是否节点被选中。
    • attributes:绑定到节点的自定义属性。
    • target:目标的 DOM 对象。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

etmvc+jQuery EasyUI+combobox多值操作实现角色授权

基于角色的权限管理一般有5张表构成,如下图,这里我们要实现对角色role进行授权操作,简单来说就是要对rolemenu进行添加操作,这里前端主要用easyui-combobox来实现权限多选。 ...

etmvc+jQuery EasyUI Highcharts实现柱状图

基于JQuery easyUI 使用Highcharts实现了数据柱状图的显示,前段显示主要使用Highchartst这个图表库,后端使用etmvc框架从数据库获取数据,前后端数据交互采用Json数据...

etmvc+jQuery EasyUI+POI动态导出EXCEL

一直想找一种简单的办法来实现JQuery easyUI datagrid的数据导出,试了很多种都不是特别理想,主要是我这里后端使用etmvc框架。先是在前端想了一些办法,没戏,后来有想过把datagr...

etmvc+jQuery EasyUI combobox实现google提示

基于JQuery easyUI combobox实现了一个类似google、百度输入框的提示,主要使用combobox的onChange事件,在onChange事件中改变url参数,重新绑定数据,代码...

etmvc和jQuery EasyUI使用教程

  • 2016-11-22 14:28
  • 522KB
  • 下载

关于easyUI tree控件后台数据绑定问题

如图所示: easyui框架下  tree控件实现四个对象的绑定:酒店、大楼、楼层、房间,四个对象间前后为父子关系。 网上主流的后台数据绑定都市针对一张表用一个递推实现绑定的。如:  priva...

easyUI中Tree节点的选中与取消选中----------工作问题004

修改的话,必须回显

EasyUI使用tree生成树形结构加载两次的问题

今天开发中无意发现,EasyUI使用tree生成树形结构加载居然向后台发送了两次一模一样的请求,导致加载了两次(alert("=======>")也运行了两次),先贴出代码: js代码: functi...

解决EasyUI-Datagrid和LinqToEntity结合应用时排序问题

我们在做WEB页面时,时常会选择JQuery框架的Datagrid,如Ext、EasyUI、Flexigrid,数据访问则采用LinqToSQL或LinqToEntity。UI用Jquery框架的目的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)