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 相关文章推荐
一个选择最快的服务器转向代码
Apr 27 Javascript
js Function类型
Dec 04 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
Bootstrap树形菜单插件TreeView.js使用方法详解
Nov 01 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
Mar 22 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
node 标准输入流和输出流代码实例
Sep 19 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实现paypal整合方法
2010/11/28 PHP
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
php封装的连接Mysql类及用法分析
2015/12/10 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
jquery分隔Url的param方法(推荐)
2016/05/25 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
关于Vue实现组件信息的缓存问题
2017/08/23 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
vue-router命名路由和编程式路由传参讲解
2019/01/19 Javascript
JavaScript使用Math.random()生成简单的验证码
2019/01/21 Javascript
vue使用keep-alive保持滚动条位置的实现方法
2019/04/09 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
2019/04/24 Javascript
详解vue-cli3多页应用改造
2019/06/04 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
python实现音乐下载器
2018/04/15 Python
详解django.contirb.auth-认证
2018/07/16 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python中wx模块的具体使用方法
2020/05/15 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
2016/01/11 HTML / CSS
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
酒店员工职业生涯规划
2014/02/25 职场文书
投标服务承诺书
2014/05/28 职场文书
环保志愿者活动方案
2014/08/14 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
Pycharm 如何设置HTML文件自动补全代码或标签
2021/05/21 Python