对于梅花雪的树，想增加Checkbox功能，以及动态增加、修改、删除结点功能，如何实现？请教！

sandy1314 2006-08-10 05:35:08
在研究梅花雪的树，现在我的应用中要在每个结点前加入Checkbox，这一点如何实现？请指教！谢谢！
另外，我想实现的效果是，
1.点击某个结点后，再点击“增加”按钮后，在内容框架页面中显示要添加的结点的信息，信息填好后，提交到数据保存结点信息，并再点击的结点下显示新的结点。
2.点击某个结点后，再点击“修改”按钮后，在内容框架页面中显示要修改的结点的信息，信息修改好后，提交到数据保存结点信息，并再点击的结点下显示新修改的结点。
3.点击某个结点后，再点击“删除”按钮后，将结点信息从数据库中删除，再点击的结点下没有删除的结点。
4.并且再刷新树时，能够不整个树的刷新，而是局部刷新.
结合梅花雪的树和服务器脚步语言是否能实现上述功能，能给个思路或代码嘛？谢谢！
...全文
748 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
smsmrbz 2007-04-10
  • 打赏
  • 举报
 回复
能给我发个2.0的树吗？ggq001@gmail.com 小弟不胜感激
xuStanly 2007-04-08
  • 打赏
  • 举报
 回复
我是根据我的项目需要改的，用起来可能不太那么方便，再加上梅老板的树是异步加载的，如果不展开节点，控件在页面中是不存在的。
whtyou 2007-04-08
  • 打赏
  • 举报
 回复
xuStanly(黑金) 的好象不行 报错 dataId[1] 不存在
whtyou 2007-04-08
  • 打赏
  • 举报
 回复
标记
java说 2006-09-08
  • 打赏
  • 举报
 回复
很好，收获很多，谢谢！！！
ysunl 2006-09-05
  • 打赏
  • 举报
 回复
值得一看
gu1dai 2006-09-05
  • 打赏
  • 举报
 回复
= 梅老大放3.0的树吧。
xuStanly 2006-09-05
  • 打赏
  • 举报
 回复
上面最后一个要改的地方有误，应为如下：
在"MzTreeView.prototype.nodeToHTML = function(node, AtEnd)"中将HTML变量的赋值过程改成如下：
HTML += "<IMG "+
"align='absMiddle' "+
"id='"+ this.name +"_icon_"+ id +"' "+
"src='"+ this.icons[node.icon].src +"'>";
if(node.ctrl) HTML += "<input type='"+ node.ctrlType +"' name='"+ node.ctrlName +"' value="+ dataId[1] +" onclick='"+ node.ctrlClick +"'>" //由xuStanly_cn增加于2006.5.4
HTML += "<A "+
"class='MzTreeview' hideFocus "+
"id='"+ this.name +"_link_"+ id +"' "+
"href='"+ url +"' "+
"target='"+ target +"' "+
"title='"+ node.hint +"' "+
"onfocus=\""+ this.name +".focusLink('"+ id +"')\" "+
"onclick=\"return "+ this.name +".nodeClick('"+ id +"')\">"+ node.text +
"</A>"+ node.addicon; //由xuStanly_cn增加于2006.4.30
if(!node.hasChild) HTML += node.delicon //由xuStanly_cn增加于2006.4.30
HTML += "</NOBR></DIV>"
if(isRoot && node.text=="") HTML = "";
HTML = "\r\n<SPAN id='"+ this.name +"_tree_"+ id +"'>"+ HTML
HTML +="<SPAN style='DISPLAY: none'></SPAN></SPAN>";
return HTML;
xuStanly 2006-09-05
  • 打赏
  • 举报
 回复
在"MzTreeView.prototype.nodeInit = function(sourceIndex, parentId)"中添加如下内容：
var addicon = this.getAttribute(source, "addicon"); //由xuStanly_cn增加于2006.4.30
var delicon = this.getAttribute(source, "delicon"); //由xuStanly_cn增加于2006.4.30
var ctrl = this.getAttribute(source, "ctrl"); //由xuStanly_cn增加于2006.5.4
var ctrlClick = this.getAttribute(source, "ctrlClick"); //由xuStanly_cn增加于2006.5.4
var ctrlName = this.getAttribute(source, "ctrlName"); //由xuStanly_cn增加于2006.5.4
var ctrlType = this.getAttribute(source, "ctrlType"); //由xuStanly_cn增加于2006.8.4
if (ctrlType == "") ctrlType = "checkbox"; //由xuStanly_cn增加于2006.8.4

还是在上面那个function中,在"this.node[this.index] ="部分再添加如下内容
"addicon" : addicon, //由xuStanly_cn增加于2006.4.30
"delicon" : delicon, //由xuStanly_cn增加于2006.4.30
"ctrl" : ctrl, //由XuStanly_cn增加于2006.5.4
"ctrlClick" : ctrlClick, //由XuStanly_cn增加于2006.5.4
"ctrlName" : ctrlName, //由XuStanly_cn增加于2006.5.4
"ctrlType" : ctrlType //由XuStanly_cn增加于2006.8.4

在"MzTreeView.prototype.nodeToHTML = function(node, AtEnd)"中把带注释的两行加上
HTML += "<A "+
"class='MzTreeview' hideFocus "+
"id='"+ this.name +"_link_"+ id +"' "+
"href='"+ url +"' "+
"target='"+ target +"' "+
"title='"+ node.hint +"' "+
"onfocus=\""+ this.name +".focusLink('"+ id +"')\" "+
"onclick=\"return "+ this.name +".nodeClick('"+ id +"')\">"+ node.text +
"</A>"+ node.addicon; //由xuStanly_cn增加于2006.4.30
if(!node.hasChild) HTML += node.delicon //由xuStanly_cn增加于2006.4.30
HTML += "</NOBR></DIV>"
if(isRoot && node.text=="") HTML = "";
HTML = "\r\n<SPAN id='"+ this.name +"_tree_"+ id +"'>"+ HTML
HTML +="<SPAN style='DISPLAY: none'></SPAN></SPAN>";
return HTML;

调用：
<script>
window.tree = new MzTreeView("tree");
tree.setIconPath("../images/");
tree.nodes["-1_1"] = "text:产品分类;"
<%
rs.open "select 分类ID,上级分类ID,分类名称 from product_catalog where 分类ID>1 order by 分类ID",conn
Do while not rs.Eof
response.write " tree.nodes[""" & rs(1) & "_" & rs(0) & """] = ""text:" & rs(2) & ";ctrl:true;ctrlName:pc;""" & VBCrLf
rs.movenext
Loop
%>
tree.wordLine = false;
</script>
ctrl：是否显示控件；
ctrlName：控件的name属性；
ctrlType：默认为checkbox，可以指定为radio。
以上生成带checkbox的梅花雪树。应该可以，有一段时间了，有些地方是不是改了不太记得，有问题发消息给我。
HoToo 2006-08-29
  • 打赏
  • 举报
 回复
学习
dfjinn 2006-08-28
  • 打赏
  • 举报
 回复
学习.....
JK_10000 2006-08-11
  • 打赏
  • 举报
 回复

function getItemHtml(parentItemObj,item)//此函数仅作示例,修改（或重载）此函数来自定义tree的节点HTML。
{

var htmlStr="";
if("Folder"==item[0]) htmlStr=folderJKHtml+'<A class=treeTitleJK href="#" target="aaaa">目录'+item[1]+'</A></DIV><span id="tree_tree_'+item[1]+'"></span>';
else if("File"==item[0]) htmlStr=fileJKHtml+'<A class=treeTitleJK href="#" target="aaaa">文件'+item[1]+'</A></DIV>';
else if("Checkbox"==item[0]) htmlStr='<input type=checkbox name=abcdefg value="'+item[1]+'">'+'<A class=treeTitleJK href="#" target="aaaa">文件'+item[1]+'</A></DIV>';
else if("EditableItem"==item[0]) htmlStr='可编辑节点示例'+'<A class=treeTitleJK href="#" onclick="alert(\'弹出修改框，修改完后刷新本节点的父节点\');return false;">修改</A> <A class=treeTitleJK href="#" onclick="alert(\'删除本节点，并刷新本节点的父节点\');return false;">删除</A></DIV>';
else if("NewItem"==item[0]) htmlStr=''+'<A class=treeTitleJK href="#" onclick="alert(\'弹出添加框，添加完后刷新本节点的父节点\');return false;">添加</A></DIV>';
return htmlStr;
}

function showTreeItem(itemId)//此函数用来展开树，以显示所指定的treeItem
{
var itemObj=document.getElementById("treeItem_"+itemId);
if(itemObj==null) {
alert("该Item还没生成");
return;
}
while(itemObj!=null && (/treeItem/ig).test(itemObj.id))
{
var itemFolderImg=getTreeItemFolderImg(itemObj);
if(itemFolderImg!=null && ("commonClosedFolderJK"==itemFolderImg.className || "lastClosedFolderJK"==itemFolderImg.className))
itemFolderImg.fireEvent("onclick");
itemObj=document.getElementById(itemObj.parentElement.id.replace(/tree_tree/ig,"treeItem"));
}
if(true)//实现scrollIntoView（obj.scrollIntoWiew不够体贴）
{
itemObj=document.getElementById("treeItem_"+itemId);
var tempInput=document.createElement("input");
itemObj.appendChild(tempInput);
tempInput.focus();
tempInput.removeNode(true);
}
}

function showMultipleTreeItems(itemIds)//此函数用来展开树，以显示所指定的一系列Item.
{
for(var i=0;i<itemIds.length;i++){
var itemObj=document.getElementById("treeItem_"+itemIds[i]);
if(itemObj==null){
alert("该Item还没生成");
return;
}
var itemFolderImg=getTreeItemFolderImg(itemObj);
if(itemFolderImg!=null && ("commonClosedFolderJK"==itemFolderImg.className || "lastClosedFolderJK"==itemFolderImg.className))
itemFolderImg.fireEvent("onclick");
}
if(itemIds.length>0)//实现scrollIntoView（obj.scrollIntoWiew不够体贴）
{
var itemObj=document.getElementById("treeItem_"+itemIds[itemIds.length-1]);
var tempInput=document.createElement("input");
itemObj.appendChild(tempInput);
tempInput.focus();
tempInput.removeNode(true);
}

}


function getTreeItemFolderImg(itemObj){
var objs=itemObj.children;
for(var i=0;i<objs.length;i++){
var tempClassName=objs[i].className;
if("commonClosedFolderJK"==tempClassName || "commonOpenFolderJK"==tempClassName || "lastClosedFolderJK"==tempClassName || "lastOpenFolderJK"==tempClassName )
return objs[i];
}
return null;
}

</script>

</head>

<body >
<div>
注1：部分代码及所有图片来自csdn tree(csdn-tree的作者为Meizz) <br/><br/>
注2：使用时请将图片改成本公司图片，以免涉嫌侵权<br/><br/>
注3：function getSubItems(parentItemObj) //此函数仅作示例,修改（或重载）此函数来自定义tree的节点数据类型及数据来源。<br/><br/>
注4：function getItemHtml(parentItemObj,item)//此函数仅作示例,修改（或重载）此函数来自定义tree的节点HTML。<br/><br/>
注5：前三个函数可用于参照“本tree的html”来生成的tree状html页面<br/><br/>
注6：AJAX层开层生成树，参见注3<font color=#FFFFFF>（外行话，说给外行听）</font><br/><br/>
注7：Javascript层开层生成树，参见注3<br/><br/>
注8：function showTreeItem(itemId)用来打开某节点：请双击<input width=50 value="0101" ondblclick="showTreeItem(this.value);"> <br/><br/>
注9：function showMultipleTreeItems(items)//此函数用来展开树，以显示所指定的一系列Item.：请双击<input width=50 value="02,0202,020205" ondblclick="showMultipleTreeItems(this.value.split(','));"> <br/><br/>
注10：本页面只作代码示例，客户化时请自行封装。<br/><br/>
注11：本页面仅在IE6下测试过。<br/><br/>
注-----：作者JK：JK_10000@yahoo.com.cn<br/><br/>

</div>

<DIV id=treeContainerDiv onmouseover="mouseOverInTree();" onmouseout="mouseOutInTree();" >
<nobr>
<DIV class=treeItemJK id="treeItem_"><img src="http://community.csdn.net/Tree/TreeImages/root.gif" onclick="clickFolderImgFun(this);" class="rootJK" align="absMiddle" width="16" height="16" /><A class=treeTitleJK href="#" target="aaaa">根目录</A></DIV><span id="tree_tree_"></span>
</nobr>
</DIV>
<script >
clickFolderImgFun(document.getElementById('treeItem_').children[0]);//这一句是为打开tree_root。如果页面没什么图片的话，也可以放到<body onload='...'>
</script>
</body>

</html>

JK_10000 2006-08-11
  • 打赏
  • 举报
 回复
自定义节点就是：
以下代码仅作思路示例。

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>

<style remark="JK_10000@yahoo.com.cn------2006-08-03">

.treeItemJK {}
.treeTitleJK {}
.rootJK {}
.commonClosedFolderJK {cursor:hand;}
.commonOpenFolderJK {cursor:hand;}
.lastClosedFolderJK {cursor:hand;}
.lastOpenFolderJK {cursor:hand;}

</style>


<script language=javascript>


//var rootJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/root.gif"/>';
var commonClosedFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/P1.gif" onclick="clickFolderImgFun(this);" class="commonClosedFolderJK" align="absMiddle" />';
var commonOpenFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/M1.gif" onclick="clickFolderImgFun(this);" class="commonOpenFolderJK" align="absMiddle" />';
var lastClosedFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/P2.gif" onclick="clickFolderImgFun(this);" class="lastClosedFolderJK" align="absMiddle" />';
var lastOpenFolderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/M2.gif" onclick="clickFolderImgFun(this);" class="lastOpenFolderJK" align="absMiddle" />';
var commonFileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L1.gif" align="absMiddle" />';
var lastFileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L2.gif" align="absMiddle" />';
var fileJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/file.gif" />';
var folderJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/folder.gif" />';
var threadJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L4.gif" align="absMiddle" />';
var blankJKHtml ='<img src="http://community.csdn.net/Tree/TreeImages/L5.gif" align="absMiddle" />';


var currentTreeItem=null;
function mouseOverInTree(){
if(event.srcElement.className=="treeItemJK") currentTreeItem=event.srcElement;
else if (event.srcElement.parentElement.className=="treeItemJK") currentTreeItem=event.srcElement.parentElement;
if(currentTreeItem!=null) currentTreeItem.children[currentTreeItem.children.length-1].style.setAttribute("backgroundColor","#D4D0C8");
}

function mouseOutInTree(){
if(currentTreeItem==null) return;
currentTreeItem.children[currentTreeItem.children.length-1].style.backgroundColor="";
currentTreeItem=null;
}

function clickFolderImgFun(folderImgObj)
{
var itemObj=folderImgObj.parentElement;
var itemId=itemObj.id.replace(/treeItem_/ig,"");
var treeTreeObj=document.getElementById("tree_tree_"+itemId);
if(folderImgObj.className=="commonOpenFolderJK"){
folderImgObj.outerHTML=commonClosedFolderJKHtml;
treeTreeObj.style.display="none";;
}
else if(folderImgObj.className=="lastOpenFolderJK"){
folderImgObj.outerHTML=lastClosedFolderJKHtml;
treeTreeObj.style.display="none";
}
else if(folderImgObj.className=="commonClosedFolderJK"){
folderImgObj.outerHTML=commonOpenFolderJKHtml;
treeTreeObj.style.display="";
if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
}
else if(folderImgObj.className=="lastClosedFolderJK"){
folderImgObj.outerHTML=lastOpenFolderJKHtml;
treeTreeObj.style.display="";
if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
}
else if (folderImgObj.className=="rootJK"){
if(treeTreeObj.innerHTML.length<20) treeTreeObj.innerHTML=getSubItemsHtml(itemObj);
}

}

function getSubItemsHtml(itemObj)//得到sub的HTML字符串
{
var items= getSubItems(itemObj);
var itemsHtml=new Array(items.length);
var itemId=itemObj.id.replace(/treeItem_/ig,"");
for(var i=0;i<items.length-1;i++){
if("Folder"==items[i][0]) itemsHtml[i]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+commonClosedFolderJKHtml+getItemHtml(itemObj,items[i]);
else itemsHtml[i]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+commonFileJKHtml+getItemHtml(itemObj,items[i]);
}
var lastItem=items[items.length-1];
{
if("Folder"==lastItem[0]) itemsHtml[items.length-1]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+lastClosedFolderJKHtml+getItemHtml(itemObj,lastItem)+'</span>';
else itemsHtml[items.length-1]='<DIV class=treeItemJK id="treeItem_'+items[i][1]+'" >'+getItemTreeImgsHtml(itemObj)+lastFileJKHtml+getItemHtml(itemObj,lastItem)+'</span>';
}
return "\n"+itemsHtml.join("\n");
}

function getItemTreeImgsHtml(itemObj)
{
var itemObjElements=itemObj.children;
var imgsHtml="";
for(var i=0;i<itemObjElements.length;i++){
if(itemObjElements[i].className=="rootJK") return "";
if(itemObjElements[i].className=="lastOpenFolderJK"||itemObjElements[i].className=="lastClosedFolderJK" ){
imgsHtml+=blankJKHtml;
break;
}
else if (itemObjElements[i].className=="commonOpenFolderJK"||itemObjElements[i].className=="commonClosedFolderJK"){
imgsHtml+=threadJKHtml;
break;
}
else {
imgsHtml+=itemObjElements[i].outerHTML;
}
}
return imgsHtml;
}

function getSubItems(parentItemObj) //此函数仅作示例,修改（或重载）此函数来自定义tree的节点数据类型。
{
var parentItemId=parentItemObj.id.replace(/treeItem_/ig,"");
var items=new Array();
items[items.length]=new Array("Folder",parentItemId+"01");
items[items.length]=new Array("Folder",parentItemId+"02");
items[items.length]=new Array("File",parentItemId+"03");
items[items.length]=new Array("File",parentItemId+"04");
items[items.length]=new Array("Checkbox",parentItemId+"05");
items[items.length]=new Array("Checkbox",parentItemId+"06");
items[items.length]=new Array("EditableItem",parentItemId+"07");
items[items.length]=new Array("NewItem",parentItemId+"00");
return items;
}
jacky421 2006-08-11
  • 打赏
  • 举报
 回复
帮顶
dtree树形菜单(有带checkbox实现)
本工程使用dTree组件实现树形菜单的展示 有静态树形菜单和动态(从数据库获取数据)树形菜单展示两种 ...菜单既有普通的树结构展示,也有方便做权限等功能的带选择框的展示(含带默认选中checkbox的处理)
带CheckBox的listView 支持多选,全选,反选
在许多场景下，我们需要在ListView中加入复选框（CheckBox），实现多选、全选和反选的功能，例如在选择联系人、设置菜单等场景。这个“带CheckBox的listView”项目就是为了解决这类需求而设计的，并且已经解决了常见...
MultiSelect.rar
本项目"MultiSelect.rar"旨在实现一个功能，即在ListView中集成CheckBox，支持用户进行多选和全选操作，这对于构建具有数据筛选、批量处理等功能的应用非常实用。 首先，我们需要创建一个自定义的Adapter，这是连接...
Vue.js基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果
Vue.js 基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果 在实现角色-权限管理时遇到了交互上的问题，即：需要以树形样式列出系统中所有的菜单，并在每一个菜单后面...
checkbox批量删除功能
今天来实现一个批量删除的功能：批量删除的功能呢，首先前台页面可以想到使用checkbox来做，这里后台数据库其实有两种删除的方式，如下：但是不管数据库以哪种形式的sql删除，想要批量删除，那么前台传到后台的id...
JavaScript

87,996

社区成员

224,708

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章