树形图界面的整合

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

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

<div class="nui-splitter" style="width:100%;height:100%;">
	    <div size="240" showCollapseButton="true">
	        <div class="nui-fit">
	            <ul id="tree1" class="mini-tree" url="com.primeton.eos.organduser.component.OrgAndUser.queryTree.biz.ext" dataField="datas" style="width:100%;"
	                showTreeIcon="true" textField="org_name" idField="org_id" parentField="org_parent" resultAsTree="false" contextMenu="#treeMenu"   
	            >        
	            </ul>
	             
	        </div>
	    </div>

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

<select id="queryOrgTree" parameterClass="java.util.HashMap" resultClass="commonj.sdo.DataObject">
 		select org_id,org_name,org_parent from Aa_org_info
	 </select>

里面查询的字段和页面上的字段互相匹配，我解释一下页面上是什么意思。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进行显示和隐藏。

<div id="datagrid1" class="nui-treegrid" style="width:100%;height:100%;" sortMode="client"
		    showPager="true" pageSize="20" sizeList="[10,20,50,500]" allowAlternating="true" multiSelect="true"
		    url="com.primeton.eos.organduser.component.OrgAndUser.selectOrgAndUser.biz.ext" 
		    dataField="datas">
		    <div property="columns" width="20">
		    	<div type="id" name="id" field="id">序号</div>
        		<div type="checkcolumn"></div>
		        <div name="org_id" field="org_id" id="org_id" allowSort="true" width="100">订单编号</div>
		        <div name="org_name" field="org_name" id="org_name" allowSort="true" width="100">订单名字</div>
		        <div name="create_time" field="create_time" id="create_time" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">订单时间</div>
		        <div name="org_sort" field="org_sort" id="org_sort" allowSort="true" width="100">排序</div>
		        <div name="org_level" field="org_level" id="org_level" allowSort="true" width="100">机构等级</div>
		        <div name="org_parent" field="org_parent" id="org_parent" allowSort="true" width="100">所属机构</div>
		    </div>
		</div>
		<div id="datagrid2" class="nui-treegrid" style="width:100%;height:100%;" sortMode="client"
		    showPager="true" pageSize="20" sizeList="[10,20,50,500]" allowAlternating="true" multiSelect="true"
		    url="com.primeton.eos.organduser.component.OrgAndUser.selectUser.biz.ext" 
		    dataField="datas">
		    <div property="columns" width="20">
		    	<div type="id" name="id" field="id">序号</div>
        		<div type="checkcolumn"></div>
		        <div name="user_id" field="user_id" id="user_id" allowSort="true" width="100">用户ID</div>
		        <div name="user_name" field="user_name" id="user_name" allowSort="true" width="100">用户名</div>
		        <div name="create_time" field="create_time" id="create_time" allowSort="true" width="100" dataType="date" dateFormat="yyyy-MM-dd">用户时间</div>
		        <div name="user_state" field="user_state" id="user_state" allowSort="true" width="100">用户状态</div>
		        <div name="phone" field="phone" id="phone" allowSort="true" width="100">电话</div> 
		    </div>
		</div>

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

  <select id="SelectUser" parameterClass="java.util.Map" resultClass="commonj.sdo.DataObject">
           select * from Aa_user_info where belong_org_id=#org_id#
    </select>

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

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

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

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

<ul id="treeMenu" class="nui-contextmenu" onbeforeopen="onBeforeOpen"></ul>

同时要在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纯后台，做这个还是要变通一下才行。。希望对我自己和大家有帮助吧。