您好,欢迎访问一九零五行业门户网

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

复制代码 代码如下:
// 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         if (used_car.bll.t_brandbaby.getlist(dm='品牌' and fid= + dt.rows[i].id).value.tables[0].rows.length//       {
//        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(
);
    document.write(请选择分类 ×  
);
    document.write();
    document.write(
);}
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 = n - 3;
    var m = math.floor(n / 2);
    for (var i = m; 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;}
其它类似信息

推荐信息