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


Posted in Javascript onMarch 19, 2013

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>  </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;}
Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(1)
Dec 23 Javascript
ASP.NET jQuery 实例9  通过控件hyperlink实现返回顶部效果
Feb 03 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
jQuery基于ID调用指定iframe页面内的方法
Jul 06 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
详解vue表单——小白速看
Apr 08 Javascript
seajs下require书写约定实例分析
May 16 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Javascript中valueOf与toString区别浅析
Mar 19 #Javascript
Javascript Throttle &amp; Debounce应用介绍
Mar 19 #Javascript
JS 实现获取打开一个界面中输入的值
Mar 19 #Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 #Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 #Javascript
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Mar 18 #Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 #Javascript
You might like
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
php递归法读取目录及文件的方法
2015/01/30 PHP
javascript 面向对象编程 聊聊对象的事
2009/09/17 Javascript
JS判定是否原生方法
2013/07/22 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
jQuery实现垂直半透明手风琴特效代码分享
2015/08/21 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
Vue 实现一个命令式弹窗组件功能
2019/09/25 Javascript
NestJs使用Mongoose对MongoDB操作的方法
2021/02/22 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python简单程序读取串口信息的方法
2015/03/13 Python
python关闭windows进程的方法
2015/04/18 Python
Python字符串详细介绍
2015/05/09 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python 实现UTC时间加减的方法
2018/12/31 Python
pytorch 模型可视化的例子
2019/08/17 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
加拿大在线眼镜零售商:SmartBuyGlasses加拿大
2019/05/25 全球购物
金额转换,阿拉伯数字的金额转换成中国传统的形式如:(¥1011)-> (一千零一拾一元整)输出
2015/05/29 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
2014年助理工程师工作总结
2014/11/14 职场文书
综合测评个人总结
2015/03/03 职场文书
学校办公室主任岗位职责
2015/04/01 职场文书
小学少先队活动总结
2015/05/08 职场文书
python之json文件转xml文件案例讲解
2021/08/07 Python