js多级树形弹出一个小窗口层(非常好用)实例代码

 更新时间:2013年03月19日 11:21:37   作者:  
js多级树形弹出一个小窗口层(非常好用)实例代码,需要的朋友可以参考一下

复制代码 代码如下:

// JScript 文件
 var inputID, inputName;
function ExpandSubCategory(iCategoryID, FahterID) {

    var li_father = document.getElementById("li_" + iCategoryID);
    if (li_father.getElementsByTagName("li").length > 0) //如果已经加载了下级节点则直接展开,不必在去读取数据
    {
        ChangeStatus(iCategoryID);
        return;
    }

      //打开时显示稍等
    switchNote(iCategoryID, true);
    //AJAX回调函数,加载节点    
    used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);
}
function ExpandSubCategoryAgain(iCategoryID, FahterID) {

    var li_father = document.getElementById("li_" + iCategoryID);
    li_father.className = "Opened";
    //打开时显示稍等
    switchNote(iCategoryID, true);
    //AJAX回调函数,加载节点
    used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + iCategoryID, GetSubCategory_callback);
}
function GetSubCategory_callback(response) {
    var dt = response.value.Tables[0];
    if (dt.Rows.length > 0) {
        var iCategoryID = dt.Rows[0].fID; //父ID
    }
    var li_father = document.getElementById("li_" + iCategoryID);
    var ul_sub = document.getElementById("ulTree_" + iCategoryID);
    if (ul_sub != null) {
        li_father.removeChild(ul_sub)
    }
    var ul = document.createElement("ul");
    ul.id = "ulTree_" + iCategoryID
    for (var i = 0; i < dt.Rows.length; i++) {
        if (used_car.BLL.T_BrandBaby.GetList("dm='品牌' and fID=" + dt.Rows[i].id).value.Tables[0].Rows.length<1)
//       {
//        if (dt.Rows[i].ProductStyle_IsChild == 1) //如果已没有下一级节点
        {
            var li = document.createElement("li");
            li.className = "Child";
            li.id = "li_" + dt.Rows[i].id;

            var img = document.createElement("img");
            img.id = dt.Rows[i].id;
            img.className = "s";
            img.src = "../../css/s.gif";

            var a = document.createElement("a");
            var id = dt.Rows[i].id;

            a.href = "javascript:OpenDocument('" + dt.Rows[i].id + "','" + dt.Rows[i].name + "');";
            a.innerHTML = dt.Rows[i].name.sub(14);
            a.title = dt.Rows[i].name;
        }
        else    //如果还有下级节点
        {
            var li = document.createElement("li");
            li.className = "Closed";
            li.id = "li_" + dt.Rows[i].id;

            var img = document.createElement("img");
            img.id = dt.Rows[i].id;
            img.className = "s";
            img.src = "../../css/s.gif";
            img.onclick = function () {
                ExpandSubCategory(this.id);
            };
            img.alt = "展开/折叠";

            var a = document.createElement("a");
            a.href = "javascript:ExpandSubCategory(" + dt.Rows[i].id + ",'editCate');";
            a.innerHTML = dt.Rows[i].name.sub(14);
            a.title = dt.Rows[i].name;
        }
        li.appendChild(img);
        li.appendChild(a);
        ul.appendChild(li);
    }
    li_father.appendChild(ul);
    //先显示稍等。。。
    switchNote(iCategoryID, false);
}

// 叶子节点的单击响应函数
function OpenDocument(iCategoryID, Action) {

    shut();   
   // inputName.Value = "asddsafdf";  //修改之前
   $(inputName).attr('value', Action); //新添 
    var thisID = inputName.getAttribute("id");
   // alert(inputName.value +":"+ thisID + "--" + Action + "--" + iCategoryID);
    inputID.value = iCategoryID;
    clienkButton1();

}
function ChangeStatus(iCategoryID) {
    var li_father = document.getElementById("li_" + iCategoryID);

    if (li_father.className == "Opened") {
        li_father.className = "Closed";
    }
    else {
        li_father.className = "Opened";
    }
}
function ChangeStatus2(iCategoryID) {
    var li_father = document.getElementById("li_" + iCategoryID);
    if (li_father.className == "Closed") {
        li_father.className = "Opened";
    }  
}
function switchNote(iCategoryID, show) {
    var li_father = document.getElementById("li_" + iCategoryID);
    if (show) {
        var ul = document.createElement("ul");
        ul.id = "ul_note_" + iCategoryID;

        var note = document.createElement("li");
        note.className = "Child";

        var img = document.createElement("img");
        img.className = "s";
        img.src = "../../css/s.gif";

        var a = document.createElement("a");
        a.href = "javascript:void(0);";
        a.innerHTML = "请稍候...";

        note.appendChild(img);
        note.appendChild(a);
        //ul.appendChild(note);
        li_father.appendChild(ul);
    }
    else {
        var ul = document.getElementById("ul_note_" + iCategoryID);
        if (ul) {
            li_father.removeChild(ul);
        }
    }
}

function InitTree(obj, idObj, FatherID) {

    // 加载根节点
    // writeDiv();
    //alert(obj.value + "--" + idObj.value);  
    inputName=obj;
    inputID = idObj;
    var pos = getPosition(inputName);
    var tree = document.getElementById("cateDivTree");
    var root = document.createElement("li");
    var objshow = document.getElementById("opencateDiv");
    objshow.style.top = pos[1] + pos[3] + "px";
    objshow.style.left = pos[0] + "px";
    objshow.style.display = "block";
    tree.style.display = "block";
    root.id = "li_" + FatherID;
    tree.appendChild(root);  
    // 加载页面时显示第一级分类
    ExpandSubCategory(FatherID);
    ChangeStatus2(FatherID);
}
writeDiv();
function writeDiv() {
    document.write("<div id='opencateDiv' style='position:absolute;display:none;z-index:1000;width:200px;height:250px;'>");
    document.write("<div class='divClose'>请选择分类 <a href=\"#\" title=\"关闭\" onclick=\"shut()\">×</a>&nbsp;&nbsp;</div>");
    document.write("<div id='cateDivTree' class='TreeMenu' style='display:block;height:250px;overflow :auto;' >");
    document.write("</div></div>");

}
function getPosition(obj) {
    if (obj) {
        var w = obj.offsetWidth;
        var h = obj.offsetHeight;
        if (obj.offsetParent) {
            for (var posX = 0, posY = 0; obj.offsetParent; obj = obj.offsetParent) {
                posX += obj.offsetLeft;
                posY += obj.offsetTop;
            }
            return [posX, posY, w, h];
        } else {
            return [obj.x, obj.y, w, h];
        }
    } else {
        return [0, 0, 0, 0];
    }
}
function shut() {
    close11();
}
function close11() {
    var objshow = document.getElementById("opencateDiv");
    objshow.style.display = "none"
    objshow.style.top = 0;
    objshow.style.left = 0;
}
function Opent11() {
    var objshow = document.getElementById("opencateDiv");
    objshow.style.display = "block";
}
String.prototype.sub = function (n) {
    var r = /[^\x00-\xff]/g;
    if (this.replace(r, "mm").length <= n) return this;
    n = n - 3;
    var m = Math.floor(n / 2);
    for (var i = m; i < this.length; i++) {
        if (this.substr(0, i).replace(r, "mm").length >= n) {
            return this.substr(0, i) + "...";
        }
    }
    return this;
};

 2//样式

.TreeMenu{border:#006600 solid 1px; background-color:#ffffff; height :350px; overflow :auto ; }
.TreeMenu img.s
{
 cursor:hand;
 vertical-align:middle;
}
.TreeMenu .s_1
{
 cursor:pointer;
 vertical-align:middle;
 padding-left:5px;
}
.TreeMenu ul
{
 padding:0;
}
.TreeMenu li
{
 list-style:none;
 padding:0;
}
.Closed ul
{
 display:none;
}
.Child img.s
{
 background:none;
 cursor:default;
}

.TreeMenu ul
{
 margin:0 0 0 8px;
}
.TreeMenu img.s
{
 width:34px;
 height:18px;
}
.TreeMenu .Opened img.s
{
 background:url(../images/skin3/opened.gif) no-repeat 0 1px;
}
.TreeMenu .Closed img.s
{
 background:url(../images/skin3/closed.gif) no-repeat 0 1px;
}
.TreeMenu .Child img.s
{
 background:url(../images/skin3/child.gif) no-repeat 15px;
}
.divClose{ background-color:#fff;height:21px; text-align:right; border:#006600 solid 1px; border-bottom:#006600 none 1px; background-color:#ECF6E9;}
#RightCate{ height:350px; border:#006600 solid 1px; margin-left:10px;}
.allopStyle{ background-color:#fafafa; border-top:#e1e1e1 solid 1px;border-left:#e1e1e1 solid 1px;border-right:#e1e1e1 solid 1px;width:99%;
padding:2px; margin-top:5px; margin-left:2px;  text-align:left;line-height:23px;
}
.pageStyle{ background-color:#fafafa; border:#e1e1e1 solid 1px;width:98%; padding:2px; margin-left:2px; text-align:center;}


.divFile { margin:2px 2px 2px 2px; height:138px; width:120px; border: #e1e1e1 solid 1px; float:left; position:relative; overflow:hidden;}
.divImage { margin:2px 2px 2px 2px; height:100px; width:116px; border: #000 solid 1px;}
.divImage img { cursor:hand; width:134px; height:100px;}


.divPage { border: #e1e1e1 solid 1px; margin:10px 10px 10px 10px; }
.divPage span {padding: 4px 4px 4px 4px;}
.divPage span a{}

.on a{ color:#f00; }
.CheckedTab { background-image:url(../images/partyCurrent.gif); width:105px; height:28px; cursor:hand; text-align:center; font-size:small; border: 1px solid #e1e1e1;}
.NoCheckTab { width:105px; height:28px; cursor:hand; text-align:center; font-size:small; border: 1px solid #e1e1e1;}


.divCheckItem{float:left; width:119px; height:104px; border:#C8D3C4 3px solid; position:relative;}
.divCheckImg{width:119px; height:104px;}
.divRemove{display:none; position:absolute; top:3px; right:3px;}

.divAdd{display:none; position:absolute; top:3px; right:3px;}

相关文章

  • uniapp小程序的图片(视频)上传的组件封装方法

    uniapp小程序的图片(视频)上传的组件封装方法

    这篇文章主要介绍了uniapp做小程序的图片(视频)上传的组件封装,要求实现多张图片的上传 ,可以限制图片上传的数量,图片预览,多次使用对图片的上传顺序排序,需要的朋友可以参考下
    2024-02-02
  • javascript一些实用技巧小结

    javascript一些实用技巧小结

    javascript一些实用技巧小结,学习js的朋友可以看下。
    2011-03-03
  • jquery实现瀑布流效果 jquery下拉加载新数据

    jquery实现瀑布流效果 jquery下拉加载新数据

    这篇文章主要为大家详细介绍了jquery实现瀑布流效果,下拉加载新数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js is_valid_filename验证文件名的函数

    js is_valid_filename验证文件名的函数

    有时候我们需要对文件名进行控制,包括一些特殊命名的文件与特殊符号的文件名进程替换,那么就可以使用下面的函数
    2017-07-07
  • JS匀速运动演示示例代码

    JS匀速运动演示示例代码

    匀速运动的效果想必大家都有见到过吧,在本文为大家介绍下使用JS是如何实现的,感兴趣的朋友不要错过
    2013-11-11
  • JavaScript实现的一个计算数字步数的算法分享

    JavaScript实现的一个计算数字步数的算法分享

    这篇文章主要介绍了JavaScript实现的一个计算数字步数的算法分享,本文先是讲解了算法描述与实现原理,然后给出实现代码,需要的朋友可以参考下
    2014-12-12
  • javascript验证内容为数字以及长度为10的简单实例

    javascript验证内容为数字以及长度为10的简单实例

    下面小编就为大家带来一篇javascript验证内容为数字以及长度为10的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • swiper Scrollbar滚动条组件详解

    swiper Scrollbar滚动条组件详解

    这篇文章主要为大家详细介绍了swiper Scrollbar滚动条组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • 浅析js预加载/延迟加载

    浅析js预加载/延迟加载

    本文主要介绍了js预加载和延时加载2种技术,简单分析了他们的实现方式和优缺点,非常的实用,有需要的朋友参考下
    2014-09-09
  • 细说webpack源码之compile流程-入口函数run

    细说webpack源码之compile流程-入口函数run

    Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。这篇文章主要介绍了webpack源码之compile流程-入口函数run,需要的朋友可以参考下
    2017-12-12

最新评论