二级级联-多选

VUE + Jquery 菜鸟学习之路/

级联菜单,一级菜单选中或取消的时,选中或取消二级菜单. 选中二级同时选中一级, 取消二级选中时判断是否还有选中的,如果没有,也取消一级菜单的选中.

预览:

HTML:

 <div id="app-1">
        <form>
            <ul>
                <li v-for="d in data">
                    <input name="menuIds" type="checkbox" v-bind:value="d.id" 
						v-bind:menuSon="'menuSon'+d.id" @click="vue_selected_all(d.id)">
                    <a href="javascript:void(0)" @click="vue_nav($event)" 
					v-bind:id="d.id">{{ d.name }} </a>
                    <ul v-bind:id="'menuSon'+d.id" class="m-l-40">
                        <li v-for="s in d.subMenus">
                            <input name="menuIds" v-bind:menuSon="'menuSon'+d.id" 
							v-bind:menu="'menu'+(d.id+1)" type="checkbox" 
							v-bind:value="s.id" @click="vue_selected(d.id)">
                            <label> {{ s.name }} </label>
                        </li>
                    </ul>
                </li>
            </ul>
        </form>
        <button @click="editSelectAll()">全选</button>
        <button @click="editSelectNo()">清除</button>
    </div>

JS:

 var app1 = new Vue({
            el: '#app-1',
            data: {
                data: [
                    {
                        "id": 1,
                        "name": "目录管理",
                        "code": null,
                        "num": null,
                        "icon": "a",
                        "parentId": 0,
                        "url": "",
                        "subMenus": [
                            {
                                "id": 2,
                                "name": "药品分类管理",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 1,
                                "url": "/web/classify/index",
                                "subMenus": []
                            },
                            {
                                "id": 3,
                                "name": "通用名管理",
                                "code": null,
                                "num": null,
                                "icon": "b",
                                "parentId": 1,
                                "url": "/web/general/index",
                                "subMenus": []
                            }
                        ]
                    },
                    {
                        "id": 4,
                        "name": "药品管理",
                        "code": null,
                        "num": null,
                        "icon": "c",
                        "parentId": 0,
                        "url": "",
                        "subMenus": [
                            {
                                "id": 5,
                                "name": "基础信息",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 4,
                                "url": "/web/drug/index",
                                "subMenus": []
                            },
                            {
                                "id": 10,
                                "name": "厂家管理",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 4,
                                "url": "/web/manufacture/index",
                                "subMenus": []
                            }
                        ]
                    },
                    {
                        "id": 6,
                        "name": "系统管理",
                        "code": null,
                        "num": null,
                        "icon": "b",
                        "parentId": 0,
                        "url": "",
                        "subMenus": [
                            {
                                "id": 7,
                                "name": "用户管理",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 6,
                                "url": "/web/users/index",
                                "subMenus": []
                            },
                            {
                                "id": 8,
                                "name": "菜单管理",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 6,
                                "url": "/web/menu/index",
                                "subMenus": []
                            },
                            {
                                "id": 9,
                                "name": "角色管理",
                                "code": null,
                                "num": null,
                                "icon": null,
                                "parentId": 6,
                                "url": "/web/role/index",
                                "subMenus": []
                            }
                        ]
                    }
                ]
            },
            methods: {
                vue_nav: function (event) {
                    // console.log(event.currentTarget.href)
                    var id = event.currentTarget.id;
                    $("#menuSon" + id + "").toggle(); //点击切换隐藏显示
                },
                vue_selected: function (id) {
                    // console.log(event.currentTarget.value)
                    menuid = id + 1;
                    if ($("input:checkbox[value='" + event.currentTarget.value + "']").prop("checked")) {
                        $("input:checkbox[value='" + id + "']").prop("checked", true);
                    } else {
                        var qwe = $("input:checkbox[menu= 'menu" + menuid + "']:checked");
                        //console.log(qwe.length);
                        if (qwe.length === 0) {
                            $("input:checkbox[menuSon= 'menuSon" + id + "']").prop("checked", false);
                        } else { }
                    }
                },
                vue_selected_all: function (id) {
                    if ($("input:checkbox[value='" + event.currentTarget.value + "']").prop("checked")) {
                        $("input:checkbox[menuSon= 'menuSon" + id + "']").prop("checked", true);
                    } else {
                        $("input:checkbox[menuSon= 'menuSon" + id + "']").prop("checked", false);
                    }
                },
                editConfirm: function (pageNo) {
                    editDrug(pageNo);
                },
                editSelectAll: function () {
                    var checkbox = $("input[name='menuIds']");
                    checkbox.prop("checked", true);
                },
                editSelectNo: function () {
                    var checkbox = $("input[name='menuIds']");
                    checkbox.prop("checked", false);
                }

            }
        });