树形图界面的整合

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