上一次是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指的是这个字段属于哪个字段的从属,下面上张图解释一下。

<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>
<select id="queryOrgTree" parameterClass="java.util.HashMap" resultClass="commonj.sdo.DataObject">
select org_id,org_name,org_parent from Aa_org_info
</select>
这里我觉得就比较好理解了,待会我把数据库贴出来看。
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>
正确的显示应该是这个样子的。。。。
<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里面加上这个
<ul id="treeMenu" class="nui-contextmenu" onbeforeopen="onBeforeOpen"></ul>
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纯后台,做这个还是要变通一下才行。。希望对我自己和大家有帮助吧。
//添加订单
function addOrg(){
nui.open({
url: "addOrg.jsp",
title: "添加机构", width: "800px", height: "170px",
ondestroy: function (action) {
if (action=="ok")
grid.reload();
tree.reload();
}
});
}