本文介绍了一种在WebGrid控件中实现数据树状显示的方法，并提供了详细的JavaScript代码示例。通过设置srLevel属性，可以区分不同层级的数据并实现递归遍历，从而达到树状展示的效果。
1.在WebGrid控件中这样设置可以把数据已树状形式显示
2下面是相应的JS代码
//选中子节点
function DoChildCheck(rootTable,CurrentRowElement,check,strFunc)
...{
var selectedIndex = CurrentRowElement.rowIndex;
var selectedSrLevelAttributes = CurrentRowElement.attributes["srLevel"];
var selectedSrLevel = parseInt(selectedSrLevelAttributes.value);
var tableElement = CurrentRowElement.parentElement;
for (var i = selectedIndex + 1 ; i < tableElement.childNodes.length ; i++)
...{
var rowElement = tableElement.childNodes[i];
var srLevelAttributes = rowElement.attributes["srLevel"];
var srLevel = parseInt(srLevelAttributes.value);
if (selectedSrLevel + 1 == srLevel)
...{
var row = rootTable.ToRowObject(rowElement);
doCheck = false;
if (check)
row.Check();
else
row.Uncheck();
doCheck = true;
strFunc = strFunc + GetRowCode(row,2) + ',';
strFunc = DoChildCheck(rootTable,rowElement,check,strFunc);
}
else
break;
}
return strFunc;
}
//选中父节点
function DoParentCheck(rootTable,CurrentRowElement,check,strFunc)
...{
var selectedIndex = CurrentRowElement.rowIndex;
var selectedSrLevelAttributes = CurrentRowElement.attributes["srLevel"]; // get self reference level
var selectedSrLevel = parseInt(selectedSrLevelAttributes.value);
var tableElement = CurrentRowElement.parentElement; // get table element that holds self reference rows
for (var i = selectedIndex ; i >= 0 ; i--)
...{
var rowElement = tableElement.childNodes[i];
var srLevelAttributes = rowElement.attributes["srLevel"]; // get self reference level
var srLevel = parseInt(srLevelAttributes.value);
if (selectedSrLevel - 1 == srLevel) // check the level of self reference level
// if true = parent row
...{
var row = rootTable.ToRowObject(rowElement);
doCheck = false;
if (check)
row.Check();
else
row.Uncheck();
doCheck = true;
strFunc = strFunc + GetRowCode(row,2) + ',';
strFunc = DoParentCheck(rootTable,rowElement,check,strFunc);
break;
}
}
return strFunc;
}
3.使用效果
2下面是相应的JS代码
//选中子节点 function DoChildCheck(rootTable,CurrentRowElement,check,strFunc) ...{ var selectedIndex = CurrentRowElement.rowIndex; var selectedSrLevelAttributes = CurrentRowElement.attributes["srLevel"]; var selectedSrLevel = parseInt(selectedSrLevelAttributes.value); var tableElement = CurrentRowElement.parentElement; for (var i = selectedIndex + 1 ; i < tableElement.childNodes.length ; i++) ...{ var rowElement = tableElement.childNodes[i]; var srLevelAttributes = rowElement.attributes["srLevel"]; var srLevel = parseInt(srLevelAttributes.value); if (selectedSrLevel + 1 == srLevel) ...{ var row = rootTable.ToRowObject(rowElement); doCheck = false; if (check) row.Check(); else row.Uncheck(); doCheck = true; strFunc = strFunc + GetRowCode(row,2) + ','; strFunc = DoChildCheck(rootTable,rowElement,check,strFunc); } else break; } return strFunc; } //选中父节点 function DoParentCheck(rootTable,CurrentRowElement,check,strFunc) ...{ var selectedIndex = CurrentRowElement.rowIndex; var selectedSrLevelAttributes = CurrentRowElement.attributes["srLevel"]; // get self reference level var selectedSrLevel = parseInt(selectedSrLevelAttributes.value); var tableElement = CurrentRowElement.parentElement; // get table element that holds self reference rows for (var i = selectedIndex ; i >= 0 ; i--) ...{ var rowElement = tableElement.childNodes[i]; var srLevelAttributes = rowElement.attributes["srLevel"]; // get self reference level var srLevel = parseInt(srLevelAttributes.value); if (selectedSrLevel - 1 == srLevel) // check the level of self reference level // if true = parent row ...{ var row = rootTable.ToRowObject(rowElement); doCheck = false; if (check) row.Check(); else row.Uncheck(); doCheck = true; strFunc = strFunc + GetRowCode(row,2) + ','; strFunc = DoParentCheck(rootTable,rowElement,check,strFunc); break; } } return strFunc; }
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
