zTree的实列运用
获取数据节点、提交后台、失败后数据回显
function submitHandler() { //获取所选节点
var ids = [], nodes = zTreeMenu.getCheckedNodes(true);
for (var i = 0; i < nodes.length; i++) {
ids.push(nodes[i].id);
}
$("#menuIds").val(ids);
var ids2 = [], nodes2 = zTreeOffice.getCheckedNodes(true);
for (var i = 0; i < nodes2.length; i++) {
ids2.push(nodes2[i].id);
}
$("#officeIds").val(ids2);
}
<form:hidden path="menuIds"/>
public void setMenuIds(String menuIds) {
menuList =
Lists.newArrayList();
if (menuIds != null){
String[] ids = StringUtils.split(menuIds, ",");
setMenuIdList(Lists.newArrayList(ids));
}
}
map文件
<insert id="insertRoleMenu">
INSERT INTO zo_role_menu(role_id, menu_id)
<foreach collection="menuList" item="menu" separator=" union all ">
SELECT #{id}, #{menu.id} FROM dual
</foreach>
</insert>
var ids = "${role.menuIds}".split(",");
function initZtree() {
zTreeMenu = $.fn.zTree.init($("#menuTree"), setting, zNodes);
for(var i=0; i<ids.length; i++) {
var node = zTreeMenu.getNodeByParam("id", ids[i]);
try{zTreeMenu.checkNode(node, true, false);}catch(e){}
}
zTreeMenu.expandAll(true); //展开所有树节点
public String getOfficeIds() {
return StringUtils.join(getOfficeIdList(), ",");
}
public List<String> getOfficeIdList() {
List<String> officeIdList = Lists.newArrayList();
for (Office office : officeList) {
officeIdList.add(office.getId());
}
return officeIdList;
}
public static String join(Iterable<?> iterable, String separator) {
return iterable == null?null:join(iterable.iterator(), separator);
}
public void setOfficeIds(String officeIds) {
officeList = Lists.newArrayList();
if (officeIds != null){
String[] ids = StringUtils.split(officeIds, ",");
setOfficeIdList(Lists.newArrayList(ids));
}
}
public void setOfficeIdList(List<String> officeIdList) {
officeList = Lists.newArrayList();
for (String officeId : officeIdList) {
Office office = new Office(officeId);
officeList.add(office);
}
}
;(function($) {
var url="${ctx}/admin/role/users";
var urltoassign="${ctx}/admin/role/assignrole";
var roleId="${role.id}";
var officeNodes=[
<c:forEach items="${officeList}" var="office">
{id:"${office.id}",
pId:"${not empty office.parent?office.parent.id:0}",
name:"${office.name}"},
</c:forEach>];
var pre_selectedNodes =[
<c:forEach items="${userList}" var="user">
{id:"${user.id}",
pId:"0",
name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"},
</c:forEach>];
var selectedNodes =[
<c:forEach items="${userList}" var="user">
{id:"${user.id}",
pId:"0",
name:"<font color='red' style='font-weight:bold;'>${user.name}</font>"},
</c:forEach>];
var pre_ids = "${selectIds}".split(",");
var ids = "${selectIds}".split(",");
var officeTree;
var selectedTree;//zTree已选择对象
var setting = {
view: {selectedMulti:false,nameIsHTML:true,showTitle:false,dblClickExpand:false},
data: {simpleData: {enable: true}},
callback: {
onClick: treeOnClick
}
};
var idArray="";
// 初始化
$(document).ready(function(){
officeTree = $.fn.zTree.init($("#officeTree"), setting, officeNodes);
selectedTree = $.fn.zTree.init($("#selectedTree"), setting, selectedNodes);
$("#closeBut").click(function(){
window.close();
});
$("#clearBut").click(function(){
var allNodes=selectedTree.getNodes();
for(var i=0;i<allNodes.length;i++){
if($.inArray(String(allNodes[i].id),pre_ids)<0){
ids.splice($.inArray(String(allNodes[i].id), ids), 1);
selectedTree.removeNode(allNodes[i]);
}
}
});
$("#assignBut").click(function(){
var allNodes=selectedTree.getNodes();
for(var i=0;i<allNodes.length;i++){
if($.inArray(String(allNodes[i].id),pre_ids)<0){
idArray+=allNodes[i].id+",";
//idArray.splice($.inArray(String(allNodes[i].id), ids), 1);
}
}
if(idArray==""){
alert("请先添加用户！");
return;
}
// $.tipx("清除成功","2");
window.location.href = urltoassign+"?userIds="+idArray+"&id="+roleId;
// window.close();
/* $.ajax({
type: "POST",
url: urltoassign,
data: {"userIds":idArray,"id":roleId},
success: function(data){
alert(data);
}
});*/
});
});
//点击选择项回调
function treeOnClick(event, treeId, treeNode){
if("officeTree"==treeId){
$.ajax({
type: "POST",
url: url,
data: {"officeId":treeNode.id},
dataType: "json",
success: function(userNodes){
$.fn.zTree.init($("#userTree"), setting, userNodes);
}
});
}
if("userTree"==treeId){
if($.inArray(String(treeNode.id), ids)<0){
selectedTree.addNodes(null, treeNode);
ids.push(String(treeNode.id));
}
};
if("selectedTree"==treeId){
if($.inArray(String(treeNode.id), pre_ids)<0){ //判断在pre_ids结合中，无返回-1
selectedTree.removeNode(treeNode);
ids.splice($.inArray(String(treeNode.id), ids), 1);
}else{
alert("角色原有成员不能清除！")
}
}
};
})(jQuery);
@ResponseBody
@RequestMapping(value = "users")
public List<Map<String, Object>> users(String officeId) {
List<Map<String, Object>> mapList = Lists.newArrayList();
User user = new User();
user.setOffice(new Office(officeId));
List<User> users = userService.findUserByOfficeId(officeId);
for(User u:users){
Map<String, Object> map = Maps.newHashMap();
map.put("id", u.getId());
map.put("pId", 0);
map.put("name", u.getName());
mapList.add(map);
}
return mapList;
}
zTree第二部分
如何让指定树被勾选！
;(function($) {
var zTreeMenu;
var zTreeOffice;
var isSubmit="";
var setting = {check:{enable:true,nocheckInherit:true},view:{selectedMulti:false},
data:{simpleData:{enable:true}},callback:{beforeClick:function(id, node){
tree.checkNode(node, !node.checked, true, true);
return false;
}}};
function initZtree() {
zTreeMenu = $.fn.zTree.init($("#menuTree"), setting,zNodes);
for(var i=0; i<ids.length; i++) {
var node = zTreeMenu.getNodeByParam("id", ids[i]);
try{zTreeMenu.checkNode(node, true, false);}catch(e){}
}
zTreeMenu.expandAll(true); //展开所有树节点
zTreeOffice = $.fn.zTree.init($("#officeTree"), setting, zNodes2);
for(var i=0; i<ids2.length; i++) {
var node = zTreeOffice.getNodeByParam("id", ids2[i]);
try{zTreeOffice.checkNode(node, true, false);}catch(e){}
}
zTreeOffice.expandAll(true);
}
浙公网安备 33010602011771号