首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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;}

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
java script编程起步（第三课）
Jan 10 Javascript
js切换光标示例代码
Oct 10 Javascript
JS模拟按钮点击功能的方法
Dec 22 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
javascript图片预览和上传（兼容IE）
Mar 15 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 Javascript
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
电磁辐射(1) 调幅(1) 发报机(1) SWL(1) GWEN(1) 电台(1) LW(1) SW(1) ad hoc(1) FM(4)
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
浅谈PHP中静态方法和非静态方法的相互调用
2016/10/04 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
JQuery Tips(2) 关于$()包装集你不知道的
2009/12/14 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
JQuery从头学起第一讲
2010/07/04 Javascript
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
深入理解Javascript箭头函数中的this
2017/02/13 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
2020/02/01 jQuery
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访：我会打到Ti20
2014/07/13 DOTA
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python Selenium 库的使用技巧
2020/10/16 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
加拿大在线隐形眼镜专家：PerfectLens.ca
2016/11/19 全球购物
加拿大著名的奢侈品购物网站：SSENSE（支持中文）
2020/06/25 全球购物
电子信息工程自荐信
2014/05/26 职场文书
授权委托书
2014/09/17 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
应聘教师自荐信
2015/03/26 职场文书
离婚被告代理词
2015/05/23 职场文书
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python