树形图界面的整合

  上一次是MiNIUI的多表CRUD，今天就在这个的基础上增加树形界面进行左右联动显示。

1.在之前显示的主页面上面增加如下代码，或者说是直接拖拽一个控件出来，再填写相应的样式都可以。

其中最为重要的就是id为tree1的ul,这个就是树形界面的雏形。通过相应的方法查询出你需要的字段在页面上面进行显示，查询语句如下：

 		select org_id,org_name,org_parent from Aa_org_info
	 

里面查询的字段和页面上的字段互相匹配，我解释一下页面上是什么意思。textField是显示给我们看的值，idField是这个字段的标识，可以理解为这个字段的id,parentField指的是这个字段属于哪个字段的从属，下面上张图解释一下。

这里我觉得就比较好理解了，待会我把数据库贴出来看。

2.接下来就是根据这个进行操作，首先获取和声明树形节点
var tree = nui.get("tree1");

3.针对这个树形节点进行相应的设置

tree.on("nodeselect", function (e) {
        
            if (e.isLeaf) {
                 var org_id = tree.getValue();  //获取相应的id
                 //alert(org_id);
                 $("#datagrid1").hide();
		         $("#datagrid2").show();
		         $("#orgnui").hide();
		         $("#usernui").show();
		         grid2.load({params:{org_id:org_id}});//将获取的值和数据层进行匹配
            } else {
              
            }
        });

页面上面我需要点击相应的order表的org_id来显示相应用户的信息，所以我建了两个div盒子，放置不同的显示信息，然后获取id进行显示和隐藏。

		    

		    	
序号
        		

		        
订单编号
		        
订单名字
		        
订单时间
		        
排序
		        
机构等级
		        
所属机构
		    
		
		

		    

		    	
序号
        		

		        
用户ID
		        
用户名
		        
用户时间
		        
用户状态
		        
电话
 
		    
		

一切顺利的话那就可以看到我这里的用户界面了，不过不要忘记了写相应查看信息的方法，通过相应的字段值相等进行匹配

  
           select * from Aa_user_info where belong_org_id=#org_id#
    

正确的显示应该是这个样子的。。。。

图片中上方的红色框也是一个显示和隐藏，，还没做完善哈。。。

4.接下来要做一个右键点击进行操作的需求，也就是这样的。

接下来就要在刚刚树形界面代码的那里加上这么一条语句

同时要在jquery里面加上这个

 tree.expandLevel(0);//树节点与右键菜单的映射

只有这样才能让他们产生关联，也就是禁止鼠标右键事件的产生，网上其实还有方法，不过我采用的是这个哈，接下来就是给右键以后弹出来的文本框设置相应的链接了，

function onBeforeOpen(e) {
		var node = tree.getSelectedNode();//获取树形图当前选中行
		var menu = e.sender;//获取当前的发送方
		 /* var menuList = menu_map[node._level]; */
		 // 机构右键菜单
		var orgMenu = [{text: "增加下级机构", onclick: "addOrg", iconCls: "icon-add"},
			{text: "删除本级机构", onclick: "onRemoveOrg", iconCls: "icon-remove"},
			{text: "刷新", onclick: "onRefreshNode", iconCls: "icon-reload"}];
		// 用户右键菜单
		var userMenu = [{text: "增加用户", onclick: "addUser", iconCls: "icon-add"},
			{text: "删除用户", onclick: "onRemoveOrg", iconCls: "icon-remove"},
			{text: "刷新", onclick: "onRefreshNode", iconCls: "icon-reload"}];
			
		if(node._level=='1')
		{
			menu.loadList(nui.clone(orgMenu)); 
		}else if(node._level=='2')
		{
			menu.loadList(nui.clone(userMenu)); 
		}
	}  

结合这个代码和之前的图片，大家可以看到相应的效果，然后给相应的链接建立点击事件就好了。

这就是弹出一个页面之后的效果，这个弹出页面的代码我上一篇博文也有。不过还是把代码粘贴出来。

//添加订单
      function  addOrg(){
          nui.open({
			url: "addOrg.jsp",
			title: "添加机构", width: "800px", height: "170px",
			
			ondestroy: function (action) {
				if (action=="ok")
				grid.reload();
				tree.reload();
			}
		});
      }  

其实很多都是样式的问题，有的时候没有刷新呀，有的时候div地方放错了，有的时候少了一个大括号，我觉得学像MiniUI这类的前端框架，你就是要细心加小心，而且要把逻辑想通，有的时候做这个不比做SSM纯后台，做这个还是要变通一下才行。。希望对我自己和大家有帮助吧。