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 toFixed() 方法
Apr 15 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
sails框架的学习指南
Dec 22 Javascript
javascript实现确定和取消提示框效果
Jul 10 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
微信小程序开发之自定义tabBar的实现
Sep 06 Javascript
jquery添加div实现消息聊天框
Feb 08 jQuery
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
Protoss建筑一览
2020/03/14 星际争霸
聊天室php&amp;mysql(六)
2006/10/09 PHP
php self,$this,const,static,-&amp;gt;的使用
2009/10/22 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
js不完美解决click和dblclick事件冲突问题
2012/07/16 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jquery制作select列表双向选择示例代码
2014/09/02 Javascript
JavaScript将XML转成JSON的方法
2015/03/12 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS中的JSON对象的定义和取值实现代码
2018/05/09 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
vue多次循环操作示例
2019/02/08 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
vue-cli —— 如何局部修改Element样式
2020/10/22 Javascript
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python下的Mysql模块MySQLdb安装详解
2014/04/09 Python
Python MD5加密实例详解
2017/08/02 Python
Python paramiko模块的使用示例
2018/04/11 Python
Python 旋转打印各种矩形的方法
2019/07/09 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
倡议书范文格式
2014/05/12 职场文书
2014年防汛工作总结
2014/12/08 职场文书
爱国教育主题班会
2015/08/14 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript