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 相关文章推荐
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
May 24 Javascript
javascript 原型继承介绍
Aug 30 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
Javascript中判断一个值是否为undefined的方法详解
Sep 28 Javascript
用vue封装插件并发布到npm的方法步骤
Oct 18 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
Vue CL3 配置路径别名详解
May 30 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
You might like
PHP几个数学计算的内部函数学习整理
2011/08/06 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
Yii2框架加载css和js文件的方法分析
2019/05/25 PHP
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
JS跨域总结
2012/08/30 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
Jquery 全选反选实例代码
2015/11/19 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
深入浅出讲解ES6的解构
2016/08/03 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
简单的三步vuex入门
2018/05/20 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
让python json encode datetime类型
2010/12/28 Python
使用python 获取进程pid号的方法
2014/03/10 Python
python 简单搭建阻塞式单进程,多进程,多线程服务的实例
2017/11/01 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
Python版中国省市经纬度
2020/02/11 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
高中军训感言600字
2014/03/11 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
2014年教师节活动总结
2014/08/29 职场文书
担保书范本
2015/01/20 职场文书
正能量励志演讲稿三分钟(范文)
2019/07/11 职场文书
Nginx 根据URL带的参数转发的实现
2021/04/01 Servers