javascript实现treeview无刷新添加和删除节点

最新推荐文章于 2023-03-07 14:02:23 发布
最新推荐文章于 2023-03-07 14:02:23 发布
阅读量3.9k 收藏
点赞数
分类专栏： Web开发 文章标签： javascript webform table null div border
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baihongmei/article/details/3929737
版权

 以前在vs2003，2005中都用过treeview控件

最近的project要求无刷新使用treeview控件，因为事件的响应都是javascript完成的，开始没觉得是个big issue,但是后来发现花费了我很多时间来完成。

 

我们知道在。net3.5中treeview会自动生成一个script resource文件(如果使用了scriptmanager的话)，或者是webresource文件，具体内容如下：

function

 

TreeView_HoverNode( data, node) {

if (!data) {

return;

}

node.hoverClass = data.hoverClass;

WebForm_AppendToClassName(node, data.hoverClass);

if (__nonMSDOMBrowser) {

node = node.childNodes[node.childNodes.length - 1];

}

else {

node = node.children[node.children.length - 1];

}

node.hoverHyperLinkClass = data.hoverHyperLinkClass;

WebForm_AppendToClassName(node, data.hoverHyperLinkClass);

}

function

 

TreeView_GetNodeText( node) {

var trNode = WebForm_GetParentByTagName(node, "TR");

var outerNodes;

if (trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName) {

outerNodes = trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName("A");

if (!outerNodes || outerNodes.length == 0) {

outerNodes = trNode.childNodes[trNode.childNodes.length - 1].getElementsByTagName("SPAN");

}

}

var textNode = (outerNodes && outerNodes.length > 0) ?

outerNodes[0].childNodes[0] :

trNode.childNodes[trNode.childNodes.length - 1].childNodes[0];

return (textNode && textNode.nodeValue) ? textNode.nodeValue : "";

}

function

 

TreeView_PopulateNode( data, index, node, selectNode, selectImageNode, lineType, text, path, databound, datapath, parentIsLast) {

if (!data) {

return;

}

var context = new Object();

context.data = data;

context.node = node;

context.selectNode = selectNode;

context.selectImageNode = selectImageNode;

context.lineType = lineType;

context.index = index;

context.isChecked = "f";

var tr = WebForm_GetParentByTagName(node, "TR");

if (tr) {

var checkbox = tr.getElementsByTagName("INPUT");

if (checkbox && (checkbox.length > 0)) {

for (var i = 0; i < checkbox.length; i++) {

if (checkbox[i].type.toLowerCase() == "checkbox") {

if (checkbox[i].checked) {

context.isChecked = "t";

}

break;

}

}

}

}

var param = index + "|" + data.lastIndex + "|" + databound + context.isChecked + parentIsLast + "|" +

text.length + "|" + text + datapath.length + "|" + datapath + path;

TreeView_PopulateNodeDoCallBack(context, param);

}

function

 

TreeView_ProcessNodeData( result, context) {

var treeNode = context.node;

if (result.length > 0) {

var ci = result.indexOf("|", 0);

context.data.lastIndex = result.substring(0, ci);

ci = result.indexOf("|", ci + 1);

var newExpandState = result.substring(context.data.lastIndex.length + 1, ci);

context.data.expandState.value += newExpandState;

var chunk = result.substr(ci + 1);

var newChildren, table;

if (__nonMSDOMBrowser) {

var newDiv = document.createElement("div");

newDiv.innerHTML = chunk;

table = WebForm_GetParentByTagName(treeNode, "TABLE");

newChildren = null;

if ((typeof(table.nextSibling) == "undefined") || (table.nextSibling == null)) {

table.parentNode.insertBefore(newDiv.firstChild, table.nextSibling);

newChildren = table.previousSibling;

}

else {

table = table.nextSibling;

table.parentNode.insertBefore(newDiv.firstChild, table);

newChildren = table.previousSibling;

}

newChildren = document.getElementById(treeNode.id + "Nodes");

}

else {

table = WebForm_GetParentByTagName(treeNode, "TABLE");

table.insertAdjacentHTML("afterEnd", chunk);

newChildren = document.all[treeNode.id + "Nodes"];

}

if ((typeof(newChildren) != "undefined") && (newChildren != null)) {

TreeView_ToggleNode(context.data, context.index, treeNode, context.lineType, newChildren);

treeNode.href = document.getElementById ?

"javascript:TreeView_ToggleNode(" + context.data.name + "," + context.index + ",document.getElementById('" + treeNode.id + "'),'" + context.lineType + "',document.getElementById('" + newChildren.id + "'))" :

"javascript:TreeView_ToggleNode(" + context.data.name + "," + context.index + "," + treeNode.id + ",'" + context.lineType + "'," + newChildren.id + ")";

if ((typeof(context.selectNode) != "undefined") && (context.selectNode != null) && context.selectNode.href &&

(context.selectNode.href.indexOf("javascript:TreeView_PopulateNode", 0) == 0)) {

context.selectNode.href = treeNode.href;

}

if ((typeof(context.selectImageNode) != "undefined") && (context.selectImageNode != null) && context.selectNode.href &&

(context.selectImageNode.href.indexOf("javascript:TreeView_PopulateNode", 0) == 0)) {

context.selectImageNode.href = treeNode.href;

}

}

context.data.populateLog.value += context.index + ",";

}

else {

var img = treeNode.childNodes ? treeNode.childNodes[0] : treeNode.children[0];

if ((typeof(img) != "undefined") && (img != null)) {

var lineType = context.lineType;

if (lineType == "l") {

img.src = context.data.images[13];

}

else if (lineType == "t") {

img.src = context.data.images[10];

}

else if (lineType == "-") {

img.src = context.data.images[16];

}

else {

img.src = context.data.images[3];

}

var pe;

if (__nonMSDOMBrowser) {

pe = treeNode.parentNode;

pe.insertBefore(img, treeNode);

pe.removeChild(treeNode);

}

else {

pe = treeNode.parentElement;

treeNode.style.visibility="hidden";

treeNode.style.display="none";

pe.insertAdjacentElement("afterBegin", img);

}

}

}

}

function

 

TreeView_SelectNode( data, node, nodeId) {

if (!data) {

return;

}

if ((typeof(data.selectedClass) != "undefined") && (data.selectedClass != null)) {

var id = data.selectedNodeID.value;

if (id.length > 0) {

var selectedNode = document.getElementById(id);

if ((typeof(selectedNode) != "undefined") && (selectedNode != null)) {

WebForm_RemoveClassName(selectedNode, data.selectedHyperLinkClass);

selectedNode = WebForm_GetParentByTagName(selectedNode, "TD");

WebForm_RemoveClassName(selectedNode, data.selectedClass);

}

}

WebForm_AppendToClassName(node, data.selectedHyperLinkClass);

node = WebForm_GetParentByTagName(node, "TD");

WebForm_AppendToClassName(node, data.selectedClass)

}

data.selectedNodeID.value = nodeId;

}

function

 

TreeView_ToggleNode( data, index, node, lineType, children) {

if (!data) {

return;

}

var img = node.childNodes[0];

var newExpandState;

try {

if (children.style.display == "none") {

children.style.display = "block";

newExpandState = "e";

if ((typeof(img) != "undefined") && (img != null)) {

if (lineType == "l") {

img.src = data.images[15];

}

else if (lineType == "t") {

img.src = data.images[12];

}

else if (lineType == "-") {

img.src = data.images[18];

}

else {

img.src = data.images[5];

}

img.alt = data.collapseToolTip.replace(//{0/}/, TreeView_GetNodeText(node));

}

}

else {

children.style.display = "none";

newExpandState = "c";

if ((typeof(img) != "undefined") && (img != null)) {

if (lineType == "l") {

img.src = data.images[14];

}

else if (lineType == "t") {

img.src = data.images[11];

}

else if (lineType == "-") {

img.src = data.images[17];

}

else {

img.src = data.images[4];

}

img.alt = data.expandToolTip.replace(//{0/}/, TreeView_GetNodeText(node));

}

}

}

catch(e) {}

data.expandState.value = data.expandState.value.substring(0, index) + newExpandState + data.expandState.value.slice(index + 1);

}

function

 

TreeView_UnhoverNode( node) {

if (!node.hoverClass) {

return;

}

WebForm_RemoveClassName(node, node.hoverClass);

if (__nonMSDOMBrowser) {

node = node.childNodes[node.childNodes.length - 1];

}

else {

node = node.children[node.children.length - 1];

}

WebForm_RemoveClassName(node, node.hoverHyperLinkClass);

}

if

 

( typeof( Sys)!== 'undefined') Sys. Application. notifyScriptLoaded();

 

 

这就是所有的treeview客户端方法，并且根据aspx页面生成的html页面，我们会看到，每个节点是个table，子节点在对应的div中，收缩和展开只要是通过div的显示和隐藏来实现的。所以我们在每添加一个节点的时候，就先添加一个table，然后添加一个div，作为他的子节点容器。

addItemToTreeView(){

..............

addTable(....);

 

var divID = "...";

addDiv(divID, containerId); //id,containerId

addSubTable(divID,...);

addSubTable(divID,...);

 

}

 

添加div

function

 

addDiv( id, containerID) {

var container = document.getElementById(containerID);

var div = document.createElement("div");

div.setAttribute("id", id);

div.setAttribute("style", "display=block");

container.appendChild(div);

}

 

添加table

function

addTable( containerId, index, name, color) {

var container = document.getElementById(containerId);

var table = document.createElement("table");

table.setAttribute("cellSpacing", "0");

table.setAttribute("cellPadding", "0");

table.setAttribute("border", "0");

var _tr = table.insertRow(-1);

var _td1 = _tr.insertCell(0);

_td1.innerHTML = "<div style=/"width: 20px; height: 1px/"></div>";

 

var _td2 = _tr.insertCell(1);

_td2.innerHTML = "<div style=/"width: 20px; height: 1px/"></div><img src=" + ModelTreeView_Data.images[6] + " alt=/"/" /></div>";

var _td3 = _tr.insertCell(2);

_td3.setAttribute("id", id);

_td3.innerHTML = "<a href=/"javascript:TreeView_ToggleNode1(TreeView_Data," + index + ",document.getElementById('nodeId'),'t',document.getElementById('divId'))/"><img src=" + TreeView_Data.images[5] + " alt=/"Collapse " + name + "/" style=/"border-width:0;/" /></a>";

 

var _td4 = _tr.insertCell(3);

_td4.innerHTML = "<a class=/"TreeView_0/" href=/"javascript:void(0);/" id=/"TreeViewt" + index + "/" style=/"color:" + color + "/">" + name + "</a>";

_td4.setAttribute("style", "color:"+color);

container.appendChild(table);

}

 

添加table时候有几个需要注意的地方，就是treeview会自动生成一个TreeView_Data（TreeView 是id）数据，其中包括了图片等信息，还有我们刚才看到scriptresource文件中有TreeView_ToggleNode方法，直接调用便可。还有就是treeview中的节点都是按序编号的。

 

至于点击节点的时候要求不刷新的话，可以添加节点属性href="javascript:void(0);", 还有展开收缩刷新问题，可以通过设置node.SelectAction = TreeNodeSelectAction.Expand;

由于系统中没有使用javascript框架，所以所有代码的都是纯javascript，如果能够对需要的朋友带来帮助。如果需要运行，需要修改其中对应的部分。

baihongmei
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
TreeView增加子节点父节点例子.rar
09-19
Delphi Treelist 动态增加父节点子节点demo. 以及点击获取 节点index 和是否第一个节点判断
Tkinter ttk.Treeview 清空所有内容
w392377436的博客
08-24 4247
Treeview 清空内容
原生js以及jQuery删除节点
LiuHu
05-09 1123
原生js中 原生js中想要删除一个元素节点，必须要找到它对应的父亲节点，这样才能够把子节点删除掉。利用的语法函数是: node.removeChild()方法。 当然每次寻找父元素可能会很麻烦需要借助属性parentNode属性来寻找父节点，childNode.parentNode.removeChild(childNode): <div class="father"> <ul class="uls"> <li>无序列表1</li>
我的treeview动态添加节点方法
weixin_40029679的博客
03-18 4507
调用方法 this.TreeView.Nodes.Clear(); TreeNode MainNode = new TreeNode(); MainNode.Text = "总分类"; MainNode.Name = "000"; SetTree(listProfe.ToList...
javascript实现TreeView 无刷新展开的实例代码
10-27
介绍了javascript实现TreeView 无刷新展开的实例代码，有需要的朋友可以参考一下
TreeView无刷新获取text及value实现代码
01-20
前台代码： 代码如下:<html xmlns=”http://www.w3.org/1999/xhtml”><head id=”Head1″ runat=”server”> <title></title> <style type=”text/css”> #middle{ top:0;... positi
C# treeView节点动态删除和添加示例，本源码演示了创建一个treeView父节点
最新发布
09-02
C# treeView节点动态删除和添加示例，本源码演示了创建一个treeView父节点，创建了三个子节点，然后演示了将这3个子节点添加到父节点中，最后演示了使用Remove方法移除指定的TreeView节点项，添加节点和删除节点定义...
【Javascript】【UI】纯原生代码实现树状控件：TreeView
命运之手
08-04 4728
此控件参考aimaraJS优化而来，由原生js实现，注释详细，代码最大幅度简化 不依赖任何库，只有一个js文件和一个css文件 效果展示 html代码 <html> <head> <title>TreeView</title> <link rel="icon" href="./image/tree.p...
关于Bootstrap-treeview动态添加和删除子节点问题
qq_37014541的博客
09-12 1579
1、首先用一个div存放下拉树 <div id ='itemtree'></div> 2、引用bootstrap的js文件和css文件 <script src="../bootstrap-treeview.js"></script> <link rel="stylesheet" href="../bootstrap-treeview....
Qt QTreeView简单使用
QtCompany的博客
03-07 4932
QTreeView: 用于显示树状结构数据，适用于树状结构数据的操作。
bootstrap-treeview
xiaoyushiying的专栏
07-28 5631
bootstrap-treeview 简要教程 bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap，以简单和优雅的方式来显示一些继承树结构，如视图树、列表树等等。  插件依赖 Bootstrap v3.0.3jQuery v2.0.3 以上两
QT中treeWidget组件动态添加节点，删除节点，
qq_45179361的博客
02-20 3173
QT中treeWidget组件动态添加节点，删除节点，QT中treeWidget实现tabWidget动态路由
javascript实现tree视图(一).简单静态树
小蜜蜂的专栏
03-06 3204
开始 经常看见一些javascript实现的treeview,很多人都觉得比较复杂,后面我将用javascript通过一些例子,从简到繁,从易到难,带大家实现一个完整,有应用价值的treeview. 我们开始吧下面是一个简单的例子: tree view test   body {font-size:12px} .{font-family:arial;font-size:12p
动态添加treeview的节点
keenweiwei的专栏
12-25 2430
,动态添加treeview的节点主要控件:treeview,imagelist,button注意:treeview1.imagelist=imagelist1     Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Clic
JavaScript Treeview
weixin_30568715的博客
07-07 690
　I had a second development project of OCS ，The main task is to development organization tree in tag page.But you kown,tag page is not support by treeview using c# ,so we must development treeview us...
TreeView动态创建节点
mmdev
06-23 442
/// &lt;summary&gt; /// TreeView展开事件创建子节点，折叠事件进入展开事件将：EnableClientScript设置为false /// &lt;/summary&gt; /// &lt;param name="sender"&gt;&lt;/param&gt; /// &lt;param na...
C# treeview添加删除
05-13
下面是TreeView控件添加删除节点的示例代码： 添加节点： ```csharp // 创建一个新节点 TreeNode newNode = new TreeNode("新节点"); // 添加新节点到TreeView中 treeView1.Nodes.Add(newNode); ``` 删除节点： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值