用的是easyui的combotree插件
先贴效果
当返回的节点的state为open时说明他是有下级数据的,否则就是节点数据,
每次点击上级的时候,上级节点展开之前,他会根据上级的id取请求他的下级数据,如果有数据,展开后会把数据自动填充为他的下级即children:属性,依次类推,
如果是静态的我们就应该补上children:属性
ComboTree demo
http://www.jeasyui.com/demo/main/index.php?plugin=ComboTree&theme=material-teal&dir=ltr&pitem=&sort=asc
ComboTree api
http://www.jeasyui.com/documentation/combotree.php
这个组件从$ .fn.combo.defaults和$ .fn.tree.defaults扩展。使用$ .fn.combotree.defaults覆盖默认值。
可以加载以下格式的数据
loadData data Load the locale tree data.
Code example:
$('#cc').combotree('loadData',
[{
id: 1,
text: 'Languages',
children:
[{
id: 11,
text: 'Java'
},
{
id: 12,
text: 'C++'
}]
}]
);
它只有这一个方法有用
clear none Clear the component value.
主要看看它继承的tree组件
http://www.jeasyui.com/demo/main/index.php?plugin=Tree&theme=material-teal&dir=ltr&pitem=&sort=asc
http://www.jeasyui.com/documentation/tree.php
它常用的方法有
options none Return the options of tree.
onBeforeExpand node Fires before node is expanded, return false to cancel this expand action.
其次注意的是(很重要)
许多事件回调函数都可以采用'node'参数,该参数包含以下属性:
id:标识值绑定到节点。
text:要显示的文本。
iconCls:要显示图标的css类。
checked:是否检查节点。
state:节点状态,'open'或'closed'。
attributes:自定义属性绑定到节点。
target:目标DOM对象。
Events
Many events callback function can take the 'node' parameter, which contains following properties:
id: An identity value bind to the node.
text: Text to be showed.
iconCls: The css class to display icon.
checked: Whether the node is checked.
state: The node state, 'open' or 'closed'.
attributes: Custom attributes bind to the node.
target: Target DOM object.
贴代码
前端
<input id="orgName" type="text" name="orgName" />
$(function () {
$('#orgName').combotree({
width:135,
url: 'tmCommonController.do?findOrgList&parentId=402882e55f813b35015f816362c70003',//第一次应该先加载顶级的节点
onBeforeExpand: function (node) {
$(this).tree('options').url =
'tmCommonController.do?findOrgList&parentId='+node.id;
}
});
});
}
重置:
$('#orgName').combotree('clear');
后台
@RequestMapping(params = "findOrgList")
@ResponseBody
public List<TreeVo> findOrgList(String parentId){
List<TreeVo> orgList = tmCommonService.findOrgList(parentId);
return orgList;
}
sql用自连接
SELECT DISTINCT
CASE
WHEN t1.IS_LEAF = 1 THEN 'open'
ELSE 'closed'
END AS STATE,
t1.id AS id,
t1.org_code AS orgcode,
t1.org_name AS text,
t2.id AS parentid,
t2.org_name AS parentname
FROM
tm_org t1
LEFT JOIN tm_org t2 ON t1.parent_id = t2.id
WHERE
1 = 1
AND
t.parent_id =?
vo
TreeGridVo
public class TreeGridVo<T> {
private String id;
private String parentId;
private String parentName;
private String text;
private String state = "closed";
}
TreeVo
public class TreeVo extends TreeGridVo<TreeVo> {
private String orgId;
private String orgName;
private String orgCode;
private String parentId;
}