源代码下载地址:https://download.csdn.net/download/heqinghua217/10621217
类似easyui的 combotree,
但是功能没有它的强大,
combotree有一个缺点,超过1000个节点全部,你勾选保存速度还好,
但是如果修改,那么在全部张开所有节点之后,再调用setValues方法赋值,能吧浏览器弄崩溃,所以才自己写了一个。
后台封装json的方法
首先顶一个实体类
package com.huating.uimp.model;
import java.util.List;
public class TreeData {
private String id;
private String pID;
private String text;
private List<TreeData> menulist;
private String check;//1表示选中,0表示不选中
public String getCheck() {
return check;
}
public void setCheck(String check) {
this.check = check;
}
public List<TreeData> getMenulist() {
return menulist;
}
public void setMenulist(List<TreeData> menulist) {
this.menulist = menulist;
}
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getpID() {
return pID;
}
public void setpID(String pID) {
this.pID = pID;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
之后查询出数据后,用递归方法封装json
/**
* @desc 初始化树
*
* */
public void initTree() {
Object obj = getRequest().getParameter("idsStr");
String ids = "";
if(obj != null) {
ids = obj.toString() + ",";
}
Map<String, List<FCPAllContent>> ca = allcontentService.cacheData();
List<FCPAllContent> list = ca.get("0");
TreeData treeData = null;
if(list != null) {
FCPAllContent f = list.get(0);
treeData = new TreeData();
treeData.setId(String.valueOf(f.getConUnid()));
treeData.setpID(String.valueOf(f.getConParentUnid()));
treeData.setText(f.getConText());
treeData.setCheck("1");
}
treeData = dg("0", ca, treeData, ids);
System.out.println(getJSON(treeData));
ResponseJson(getJSON(treeData));
/*if(obj == null)
obj = "";
Gson g = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").create();
return g.toJson(obj);*/
}
/**
* 递归拼接json数据
*
* */
public TreeData dg(String key, Map<String, List<FCPAllContent>> ca, TreeData parentTree, String ids) {
List<FCPAllContent> list = ca.get(key);
if(list != null) {
for (FCPAllContent f : list) {
TreeData treeData = new TreeData();
treeData.setId(String.valueOf(f.getConUnid()));
treeData.setpID(String.valueOf(f.getConParentUnid()));
treeData.setText(f.getConText());
//id是否是已经共有的,如果已经有了,就设置为选中状态
if(ids.indexOf(String.valueOf(f.getConUnid())+",") != -1){
treeData.setCheck("1");
}else {
treeData.setCheck("0");
}
if(parentTree.getMenulist() == null) {
List<TreeData> treeList = new ArrayList<TreeData>();
parentTree.setMenulist(treeList);
}
parentTree.getMenulist().add(treeData);
dg(treeData.getId(), ca, treeData, ids);
}
}
return parentTree;
}
前端js调用代码
/************************针对树的操作******************************/
$.ajax({
url:'f_all_content!initTree.action',
type:'post',
dataType:'json',
data: {'idsStr':rows[0].allcontentUnid},
success:function(data){
$(".ul-con").html("");
var showlist = $("<ul class='parent'></ul>");
showall(data.menulist, showlist);
$(".ul-con").append(showlist);
initTree();
//只能这么赋值选中或者不选中,不能在html代码中一进来就写死样式
var arr = rows[0].allcontentUnid.split(",");
for ( var i = 0; i < arr.length; i++) {
$("#"+arr[i]).attr("class","toggle1 checked");
}
}
});
function initTree(){
//点击收缩
$(".toggle").click(function(){
if($(this).hasClass("down")){
$(this).removeClass("down").addClass("up");
$(this).next().next("a").find("img").attr({"src":"<%=basePath%>public/tree-demo/images/p_icon.png"});
$(this).next().next().next("ul").hide();
}else {
$(this).addClass("down").removeClass("up");
$(this).next().next("a").find("img").attr({"src":"<%=basePath%>public/tree-demo/images/c_icon.png"});
$(this).next().next().next("ul").show();
}
});
//点击span标签选中
$("span.toggle1").click(function(){
if($(this).hasClass("unchecked")){
$(this).attr({"class":"toggle1 checked"});
$(this).next().next("ul").find("span.unchecked").attr({"class":"toggle1 checked"});
}else {
$(this).attr({"class":"toggle1 unchecked"});
$(this).next().next("ul").find("span.checked").attr({"class":"toggle1 unchecked"});
}
//var $this = $(this);
//checked($this);
});
}
function checked(item){
var liCon = item.parent("li");
liCon.each(function(){
var liLen = $(this).parent("ul.parent").find("li").length;
var checked = $(this).parent("ul.parent").find("li").find("span.checked").length;
if(liLen == checked && $(this).find("ul").length == 0) {
$(this).parent("ul.parent").prev().prev("span.toggle1").attr("class","toggle1 checked");
}else {
$(this).parents("ul.parent").prev().prev("span.toggle1").attr("class","toggle1 unchecked");
}
});
}
//menu_list为json数据
//parent为要组合成html的容器
function showall(menu_list, parent) {
for (var menu in menu_list) {
//如果有子节点,则遍历该子节点
if (menu_list[menu].menulist != null && menu_list[menu].menulist != "undefined" && menu_list[menu].menulist.length > 0) {
//创建一个子节点li
var li = $("<li></li>");
//将li的文本设置好,并马上添加一个空白的ul子节点,并且将这个li添加到父亲节点中
if(menu_list[menu].check == "1") {
var aText = "<span class='toggle up'></span><span id='"+menu_list[menu].id+"' class='toggle1 unchecked'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon.png' />"+menu_list[menu].text+"</a>";
} else {
var aText = "<span class='toggle up'></span><span id='"+menu_list[menu].id+"' class='toggle1 unchecked'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon.png' />"+menu_list[menu].text+"</a>";
}
$(li).append(aText).append("<ul class='parent hide'></ul>").appendTo(parent);
//将空白的ul作为下一个递归遍历的父亲节点传入
showall(menu_list[menu].menulist, $(li).children().eq(3));
}
//如果该节点没有子节点,则直接将该节点li以及文本创建好直接添加到父亲节点中
else {
if(menu_list[menu].text != null && menu_list[menu].text != "undefined"){
if(menu_list[menu].check == "1") {
var aText1 = "<span id='"+menu_list[menu].id+"' class='toggle1 unchecked' style='margin-left: 10px;'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon1.png' />"+menu_list[menu].text+"</a>";
} else {
var aText1 = "<span id='"+menu_list[menu].id+"' class='toggle1 unchecked' style='margin-left: 10px;'></span><a><img src='<%=basePath%>public/tree-demo/images/c_icon1.png' />"+menu_list[menu].text+"</a>";
}
$("<li></li>").append(aText1).appendTo(parent);
}
}
}
}
html的代码就很简单了:
<div class="main" id="updateTree" >
<div class="ul-con"></div>
</div>
==========
=======================================注意点=========================================
这里最需要注意的是,选中和不选中,刚开始想的是,后台直接查询出数据,设置checked属性,然后前台直接设置span标签的样式,是否为checked即可,但是这招试了无数遍,不可行。只能在所以标签初始化之后,再用js,动态设置span的选中样式。