标签：ParentTagId Title demo TagId 多级 ChildList Content js Type

//js-多级联动选择标签demo,页面：<div name="tagParentId0"></div>
//设置标签html，标签格式[{TagId,Title,Content,ParentTagId,ChildList}]
var TagsSet = function (data) {
    var rootSpan = $("[name='tagParentId0']");
    for (var i = 0; i < data.length; i++) {
        var x = data[i];
        var html = '<div class="form-group"><label class="control-label col-md-2 col-sm-2 col-xs-2">'+x.Title+'：</label><div>';
        html += TagGetHtml(x);
        html += "</div></div>";
        rootSpan.append(html);
    }
    //绑定下拉选择框改变事件
    $("[name='tagSelect']").bind("change", ShowTags);
}
//获取标签html内容
var TagGetHtml = function (e) {
    if (e && e.ChildList && e.ChildList.length > 0) {
        var html = '<span name="tag' + e.TagId + '" ' + (e.ParentTagId == 0 ? '' : 'style="display: none;"') + '>';
        html += '<select name="tagSelect" class="form-control addtag" onchange="ShowTags">';
        for (var i = 0; i < e.ChildList.length; i++) {
            var x = e.ChildList[i];
            //json中是双引号，所以value等号后为单引号才行
            html += "<option value='" + JSON.stringify(x) + "'>" + x.Title + "</option>";
        }
        html += "</select>";
        for (var i = 0; i < e.ChildList.length; i++) {
            var x = e.ChildList[i];
            html += TagGetHtml(x);
        }
        html += "</span>";
        return html;
    } else {
        return "";
    }
}
//选择框改变事件，显示子级或执行选中业务
var ShowTags = function () {
    console.log($(this));
    var e = $(this).children("option:selected").val();
    //值是对象字符串
    if (e.indexOf("{") == 0) {
        var v = JSON.parse(e);
        if (v.ChildList && v.ChildList.length > 0) {
            //显示子级
            $(this).parent().children("span").hide();
            $("[name='tag" + v.TagId + "']").show();
        } else {
            //执行选中业务
            AddCopy(v.Content);
        }
    } else {
        //执行选中业务
        AddCopy(v);
    }
}
//选择框选中后执行业务
var AddCopy = function (v) {
    if (v) {
        console.log(v);
    }
}
//test
var test=function(){
    var data=[{"ChildList":[{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":19,"Title":"c1c1c1c1","Content":"c1c1c1c1","Type":0,"Sort":1,"ParentTagId":13},{"ChildList":null,"TagId":20,"Title":"c1c1c1c2","Content":"c1c1c1c2","Type":0,"Sort":2,"ParentTagId":13}],"TagId":13,"Title":"c1c1c1","Content":"c1c1c1","Type":0,"Sort":1,"ParentTagId":2},{"ChildList":[{"ChildList":null,"TagId":21,"Title":"c1c1c2c1","Content":"c1c1c2c1","Type":0,"Sort":1,"ParentTagId":14}],"TagId":14,"Title":"c1c1c2","Content":"c1c1c2","Type":0,"Sort":2,"ParentTagId":2}],"TagId":2,"Title":"测试标签1子级1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":1},{"ChildList":[{"ChildList":[{"ChildList":null,"TagId":22,"Title":"c1c2c1c1","Content":"c1c2c1c1","Type":0,"Sort":1,"ParentTagId":15}],"TagId":15,"Title":"c1c2c1","Content":"c1c2c1","Type":0,"Sort":1,"ParentTagId":3},{"ChildList":[{"ChildList":null,"TagId":17,"Title":"c1c2c2c1","Content":"c1c2c2c1","Type":0,"Sort":1,"ParentTagId":16},{"ChildList":null,"TagId":18,"Title":"c1c2c2c2","Content":"c1c2c2c2","Type":0,"Sort":2,"ParentTagId":16}],"TagId":16,"Title":"c1c2c2","Content":"c1c2c2","Type":0,"Sort":2,"ParentTagId":3}],"TagId":3,"Title":"测试标签1的2","Content":"c1c2","Type":0,"Sort":2,"ParentTagId":1},{"ChildList":null,"TagId":4,"Title":"c1c3","Content":"c1c3d","Type":0,"Sort":3,"ParentTagId":1},{"ChildList":null,"TagId":5,"Title":"c1c4","Content":"c1c4d","Type":0,"Sort":4,"ParentTagId":1},{"ChildList":null,"TagId":12,"Title":"c1c5","Content":"c1c5","Type":0,"Sort":5,"ParentTagId":1}],"TagId":1,"Title":"检测标签1","Content":"c1c1","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":11,"Title":"123","Content":"","Type":0,"Sort":1,"ParentTagId":8},{"ChildList":null,"TagId":9,"Title":"ALEX测试","Content":"测试测试测试测试测试测试车测试测试菜市场","Type":0,"Sort":2,"ParentTagId":8}],"TagId":8,"Title":"标签做什么用","Content":"","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":null,"TagId":10,"Title":"信息新增","Content":"测试测试测试测试测试车","Type":0,"Sort":1,"ParentTagId":0},{"ChildList":[{"ChildList":null,"TagId":7,"Title":"c2c2","Content":"c2c2","Type":0,"Sort":1,"ParentTagId":6}],"TagId":6,"Title":"c2c0","Content":"c2c0d","Type":0,"Sort":2,"ParentTagId":0}];
    TagsSet(data);
}

标签：ParentTagId,Title,demo,TagId,多级,ChildList,Content,js,Type
来源： https://www.cnblogs.com/lanofsky/p/16689813.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。