asp多级菜单----数据库控制

阅读：483 添加日期：2021/3/22 16:07:19

asp多级菜单----数据库控制

根据网上一个静态的asp多级菜单更改,可扩展无限级别

其中数据库表menu字段分别为
id                               字段id
id1                             父id
menuname                字段名

例如            id      id1     menuname    其中0为第一级
                   1        0        文学殿堂
                   2        1        中国文学
                   3        1        外国文学
                   3        2        古典文学
                   4        0        人文社科
                 5        4        大讲堂
                   6      4        法律法规
...............

页面效果如http://www.onsrs.com/asplian/


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>asp多级菜单----数据库控制</title>
<%dim count
set rs=server.createobject("adodb.recordset")
rs.open "select * from menu ",conn,1,1%>

<script language="JavaScript" type="text/JavaScript" src="cs.js"></script>
<script language="JavaScript" type="text/JavaScript">

</script>
</head>
<body>
<form name="form1" method="post" action="">
   <select name="selP1" id="selP1" onChange="cs1.change(this)" subElement="selP2">
   </select>
   <select name="selP2" id="selP2" onChange="cs2.change(this)" subElement="selP3">
   </select>
   <select name="selP3" id="selP3" onChange="cs3.change(this)" subElement="selP4">
   </select>
   <select name="selP4" id="selP4" onChange="cs4.change(this)" subElement="selP5">
</select>
   <select name="selP5" id="selP5" onChange="cs5.change(this)" subElement="selP6">
   </select>
   <select name="selP6" id="selP6">   
   </select>
   <br>
</form>
<script language="JavaScript" type="text/javascript">

</script>
</body>
</html>

cs.js

<!--
/**
* CascadeSelect
* @version build 20050621 get lasted version from
* @author unkown [edited and optimized by Kim]
* @update 20051012 fixed some syntax errors
* @update 20060215 diplay it where select is multiple
*/

/**
* constructor
* @param object element as html element select
* @param array nodes that contains data in tree structure
* @param string parent as parent value
*/
function CascadeSelect(element, nodes, parent){
    this.form = element.form;
    this.tree = new Tree(nodes);

    this.subElement = "subElement";
    this.selectedValue = "selectedValue";
    this.defaultText = "defaultText";
    this.defaultValue = "defaultValue";

this.build(element, parent, false);
}

/**
* isHasDefault
* @param object element as html element select
* @return boolean true if succeed
* boolean false if failed
*/
CascadeSelect.prototype.isHasDefault = function(element){
return this.getUserCustomAttributeValue(element, this.defaultText) != null ? true : false;
}

/**
* isSubElementHasDefault
* @param object element as html element select
* @return boolean true if succeed
*         boolean false if failed
*/
CascadeSelect.prototype.isSubElementHasDefault = function(element){
    var subElement = this.getSubElement(element);
    if (subElement != "undefined"){//not typeof(subElement) != "undefined"
        return this.isHasDefault(subElement);
    }
}

/**
* setDefault
* @param object element as html element select
*/
CascadeSelect.prototype.setDefault = function(element){
    var defaultText = this.getUserCustomAttributeValue(element, this.defaultText);
    var defaultValue = this.getUserCustomAttributeValue(element, this.defaultValue);
    //defaultText = defaultText == null ? "" : defaultText
    defaultValue = defaultValue == null ? "" : defaultValue
    element.options[0] = new Option(defaultText, defaultValue);
}

/**
* build
* @param object element as html element select
* @param string parent as parent value
* @boolean buildSubOnly as if build sub element only
*/
CascadeSelect.prototype.build = function(element, parent, buildSubOnly){
    var tree = this.tree.filterTreeByParent(parent);
    var treeNodesLength = tree.nodes.length

    if(!buildSubOnly) {
        var blnIsHasDefault = this.isHasDefault(element);
        var selectedValue = this.getUserCustomAttributeValue(element, this.selectedValue);

        element.options.length = 0;
        //if (blnIsHasDefault && (treeNodesLength > 0 || this.isSubElementHasDefault(element))){
        if (blnIsHasDefault){
            this.setDefault(element);
        }
        for(var i = 0;i < treeNodesLength;i++) {
            //alert("text" + tree.nodes[i].option.text + "value:" + tree.nodes[i].option.value);
            if (blnIsHasDefault){
                element.options[i + 1] = new Option(tree.nodes[i].option.text,tree.nodes[i].option.value);
                if(selectedValue != null && tree.nodes[i].option.value == selectedValue) {
                    element.selectedIndex = i + 1;
                }
            } else {
                element.options[i] = new Option(tree.nodes[i].option.text,tree.nodes[i].option.value);
                if(selectedValue != null && tree.nodes[i].option.value == selectedValue) {
                    element.selectedIndex = i;
                }
            }

        }
    }
    if (element.options.length > 0){
        element.style.display = "";
        var subElement = this.getSubElement(element);
        //if (element.id == "selP4"){alert(subElement)}
        if (subElement != "undefined"){//not typeof(subElement) != "undefined"
            this.build(subElement, element.options[element.selectedIndex].value, false);
        }
    } else {
        this.setInvisible(element);
    }
}

/**
* getUserCustomAttributeValue
* @param object element as html element select
* @param string userCustomAttributeName as user custom attribute name
* @return string of attribute name if succeed
* null null if failed
*/
CascadeSelect.prototype.getUserCustomAttributeValue = function(element, userCustomAttributeName){
return element[userCustomAttributeName] ? element[userCustomAttributeName] : element.getAttribute(userCustomAttributeName);
}

/**
* getSubElement
* @param object element as html element select
* @return object as html element if succeed
*         string "undefined" if failed
*/
CascadeSelect.prototype.getSubElement = function(element){
    var subElementName = this.getUserCustomAttributeValue(element, this.subElement)
    if (subElementName == null){
        return "undefined"
    } else {
        return this.getElementByName(subElementName);
    }
}

/**
* setInvisible
* @param object element as html element select
*/
CascadeSelect.prototype.setInvisible = function (element){
if (!element.multiple){
    element.style.display = "none";
    }
    var subElement = this.getSubElement(element);
    if (subElement != "undefined"){//not typeof(subElement) != "undefined"
        this.setInvisible(subElement);
    }
}

/**
* get object by name - only return the first html element object
* @param string elementName as html element select name
* @return object as html element if succeed
*         string "undefined" if failed
*/
CascadeSelect.prototype.getElementByName = function(elementName) {
    for(var i = 0;i < this.form.elements.length;i++) {
        if(this.form.elements[i].name == elementName) {
            return this.form.elements[i];
        }
    }
    return "undefined";
}

/**
* handling event onchange
* @param object element as html element select
*/
CascadeSelect.prototype.change = function(element) {
this.build(element,element.options[element.selectedIndex].value,true);
}

/**
* Tree Constructor
* @param array nodes that contains data in TreeNode structure.
*/
function Tree(nodes) {
this.nodes = nodes;
}

/**
* filterTreeByParent
* @param string parent as parent value
* @return ata in Tree structure.
*/
Tree.prototype.filterTreeByParent = function(parent){
    var aryTree = new Array();
    var j = 0;
    for(var i = 0; i < this.nodes.length; i++){
        if (typeof(this.nodes[i]) == "undefined" || this.nodes[i] == null){
            continue;
        }
        if (this.nodes[i].parent == parent){
            aryTree[j] = this.nodes[i];
            j++;
        }
    }
    return new Tree(aryTree);
}

/**
* constructor
* @param string parent as parent value
* @param string node as Option text
* @param string node as Option value
*/
function TreeNode(parent, text, value){
this.parent = parent;
this.option = new Option (text, value); //Option is a HTML Element Object
}
-->