实用的Javascript函数库

function Node(parentId, id, openStatus, text, url, color){
this.parentId = parentId; // 父节点的id
this.id     = id;    // 自身id
this.href   = url;
this.color  = color;
this.openStatus = openStatus; // 当前的打开状态
this.haveChild = false;  // 为了便于显示，增加了该属性，判断该节点是否有子节点，默认为没有
this.text  = text; // 显示的文本信息
}
// 定义一个数组用来保存所有的节点(Node)包括根节点(RootNode), 也可以用其他的方式来保存
var arrTree = new Array();
//为了在使得创建节点更方便点，定义了下面的函数：
function createNode(parentId, id, openStatus, text, url, color){
// 这里检验一下输入的parentId是否存在，不存在则提示错误
// checkParent(parentId);
// 检验输入的id是否已经存在,如果存在做相应的处理， 这里我就不写了
// checkId(id);
// 设置该parentId有子节点
if( parentId > -1 ){
if(!arrTree[parentId].hasChild)
arrTree[parentId].hasChild = true;
}
var node = new Node(parentId, id, openStatus, text, url, color);
arrTree[arrTree.length] = node;
}
/*-1这里定义为根节点的父节点，不存在这样的节点，所以，判断节点的父节点为-1时，标识当前节点时父节点*/
createNode(-1/*上面的注释*/, 0/*节点id*/, true/*关闭*/, "实用的Javascript函数库", '','green');
createNode(0, 1,  true, "trim函数:                         trim() lTrim() rTrim()", "#1");
createNode(0, 2,  true, "校验字符串是否为空:                 checkIsNotEmpty(str)", "#2");
createNode(0, 3,  true, "校验字符串是否为整型:               checkIsInteger(str)", "#3");
createNode(0, 4,  true, "校验整型最小值:                    checkIntegerMinValue(str,val)", "#5");
createNode(0, 5,  true, "校验整型最大值:                    checkIntegerMaxValue(str,val) ", "#6");
createNode(0, 6,  true, "校验整型是否为非负数:               isNotNegativeInteger(str)", "#4");
createNode(0, 7,  true, "校验字符串是否为浮点型:             checkIsDouble(str) ", "#7", "blue");
createNode(0, 8,  true, "校验浮点型最小值:                  checkDoubleMinValue(str,val)", "#8");
createNode(0, 9,  true, "校验浮点型最大值:                  checkDoubleMaxValue(str,val)", "#9");
createNode(0, 10, true, "校验浮点型是否为非负数:             isNotNegativeDouble(str)", "#10");
createNode(0, 11, true, "校验字符串是否为日期型:             checkIsValidDate(str)", "#11");
createNode(0, 12, true, "校验两个日期的先后:                checkDateEarlier(strStart,strEnd)", "#12");
createNode(0, 13, true, "校验字符串是否为email型:           checkEmail(str) ", "#13", "blue");
createNode(0, 14, true, "校验字符串是否为中文:               checkIsChinese(str)", "#14");
createNode(0, 15, true, "计算字符串的长度，一个汉字两个字符:   realLength()", "#15");
createNode(0, 16, true, "校验字符串是否符合自定义正则表达式:   checkMask(str,pat)", "#16");
createNode(0, 17, true, "得到文件的后缀名:                   getFilePostfix(oFile)  ", "#17");
/*
这里简单的创建了一棵树，但是还没有显示，下面要做的就是怎么显示:
可能方法是有点笨拙，不要见怪
…. 显示树
// 这个思路很容易理解，就是从根节点开始， 在arrTree数组超找该根节点的子节点并显示，
这里用的是递归方式去遍历每棵树， 由于简单的结构很简单的想法，所以没有考虑算法的效率问题
*/
function doRender(){
var r = appendNode(0)
treeArea.appendChild(r);
}
// AppendNode(node), 将该节点的子节点加载到container里面， 就是div对象
function appendNode(id){
node = arrTree[id]
var id = node.id;
var area = document.createElement("div");
var expand = document.createElement("span");
var textNode = document.createElement("span");
var subarea = document.createElement("div");
var str = ''
if( node.href ){

str += ''+ node.text + ' ';
} else {
if( node.color )
str += ''+ node.text+'';
else
str = node.text;
}
textNode.innerHTML = str;

expand.style.fontFamily = 'Fixedsys';
expand.style.cursor = 'hand';
expand.style.color = 'red';
expand.style.padding = '5px';
expand.innerText = '-';
subarea.style.paddingLeft = '30px';
subarea.style.lineHeight = '2';
if( !node.openStatus ){
subarea.style.display = 'none';
}
area.style.padding = '4px';
area.appendChild(expand);
area.appendChild(textNode);
area.appendChild(subarea);
if(node.hasChild){
expand.innerText = '+';
if( node.openStatus ) {expand.innerText = '-'; }

expand.onclick = function(){
if( subarea.style.display == '' ){
node.openStatus = false;
this.innerHTML = '+';
subarea.style.display = 'none';
} else {
node.openStatus = true;
this.innerHTML = '-';
subarea.style.display = '';
}
}
for(var i=1/*因为根节点在0位置，所以从1开始查找*/; i < arrTree.length; i++ ){
if( arrTree[i].parentId == id ){
var c = appendNode(i);
subarea.appendChild(c);
}
}
}
return area; // 返回div对象，里面包含了子树的信息
}
doRender();