根据层级渲染多级选择框

发表于 |
字数统计: 496 | 阅读时长 ≈ 3

根据层级渲染多级选择框

html

1
2
3
4
5
6
7
8
9
<ul>
    <li class="li-list active" ng-repeat="item in list track by $index" level="{{item.level}}">
        <label class="i-checks m-b-none" id="{{item.id}}" ng-click="compute($index, item.level, this);$event.stopPropagation()"> 
            <input type="checkbox" name="" id="" value="" ng-checked="true">
            <i></i>
            <span class="{{'space'+item.level}}">{{item.name}}</span>
        </label>
    </li>
</ul>

js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
function compute (index, level) {

    if (!$scope.clicked) {
        $scope.clicked = true
        return
    }

    var $li = $('.li-list').eq(index)



    var nextLi = $li.next()
    var prevLi = $li.prev()

    if ( isChecked($li) ) {
        $li.addClass('active')
        select()
    } else {
        $li.removeClass('active')
        unchecked()
    }

    $scope.clicked = false



    //选中执行函数
    function select () {

        var allChecked = true

        while (nextLi[0]) {
            if (nextLi.attr('level') == level && !isChecked(nextLi)) {
                allChecked = false
                return
            }
            if (nextLi.attr('level') > level){
                nextLi.addClass('active').find('[type=checkbox]').prop('checked', true)
                nextLi = nextLi.next()
                continue
            }
            break
        }


        while (prevLi[0]) {
            if(prevLi.attr('level') == level && !isChecked(prevLi)){
                allChecked = false
                return
            }
            if (prevLi.attr('level') < level) {
                break
            }
            prevLi = prevLi.prev()
        }

        if (allChecked && prevLi[0]) {
            prevLi.addClass('active').find('[type=checkbox]').prop('checked', true)

            $li = prevLi
            prevLi = $li.prev()
            nextLi = $li.next()
            level--
            select()
        }
    }

    //取消选中执行函数
    function unchecked (notFirst) {
        var inFlag = false
        while (prevLi[0]) {
            if (prevLi.attr('level') == level && !isChecked(prevLi) && !inFlag) {
                return
            }
            if (prevLi.attr('level') > level) {
                prevLi = prevLi.prev()
                inFlag = true
                continue
            }
            if (prevLi.attr('level') < level) {
                break
            }
            prevLi = prevLi.prev()
        }

        while (nextLi[0] && !notFirst) {
            if (nextLi.attr('level') == level && !isChecked(nextLi)) {
                return
            }
            if (nextLi.attr('level') > level) {
                nextLi.removeClass('active').find('[type=checkbox]').prop('checked', false)
                nextLi = nextLi.next()
                continue
            }
            break
        }

        if (prevLi[0]) {
            prevLi.removeClass('active').find('[type=checkbox]').prop('checked', false)
            $li = prevLi
            prevLi = $li.prev()
            nextLi = $li.next()
            level--
            unchecked(true)
        }
    }
}


//判断是否选中
function isChecked (ele) {
    return ele.find('[type=checkbox]').prop('checked')
}

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
ul {
    margin: 0;
    padding: 0;
    background-color: #27486b;
    li {
    height: 60px;
    line-height: 60px;
    padding-left: 20px;
    &.active {
        background-color: #335d8d;
    }
    span {
        margin: 0;
        color: #fff;
        font-size: 16px;
        &.space1 {
        padding-left: 1em;
        }
        &.space2 {
        padding-left: 2em;
        }
        &.space3 {
        padding-left: 3em;
        }
        &.space4 {
        padding-left: 4em;
        }
        &.space5 {
        padding-left: 5em;
        }
        &.space6 {
        padding-left: 6em;
        }
    }
    }
}
}
坚持原创技术分享，您的支持将鼓励我继续创作！