博客

整体效果图




具体的js代码

layui.use(['form', 'jquery'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        
		//第一级下拉列表框数据的获取
        $.ajax({
            url: '第一级下拉列表框对应的url',
            dataType: 'json',
            type: 'post',
            success: function (data) {
                $.each(data, function (index, item) {
                	// 对应数据的属性
                    $('#school').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                });
                layui.form.render();//重新渲染 固定写法
            }
        });

		// 绑定事件当选定school的时候，获取选中的内容，并且绘制第二个下拉列表框
        form.on('select(school)', function (data) {
            //获取第一个下拉列表框选中的内容
            var params = {
                school: data.value
            };
            //检查项目添加到下拉框中
            $.ajax({
                url: '第二个下拉列表框所对应的url',
                dataType: 'json',
                data: JSON.stringify(params), //传输对应的数据--JSON序列化
                contentType: "application/json",
                type: 'post',
                success: function (data) {
                    $("#major").empty();//清空下拉框的值
                    $.each(data, function (index, item) {
                        $('#major').append(new Option(item.name, item.id));// 下拉菜单里添加元素
                    });
                    layui.form.render();//重新渲染 固定写法
                }
            });
        });

		//绑定第二个下拉表的点击事件
        form.on('select(major)', function (data) {
        	//获取两个下拉列表的内容
            var major = data.value; 
            var school = $("[name='school']").val();
            studentList(school, major); //将获取的内容交给studentList
        });
    });

    // 第二个表--便于上面的下拉列表不刷新
    function studentList(school, major) {
        layui.use(['table', 'jquery'], function () {
            var table = layui.table;
            var $ = layui.jquery;
            table.render({
                elem: '#studentList'
                , url: '对应表的内容请求URL?school=' + school + "&major=" + major
                ,toolbar: '#test-table-toolbar-toolbarDemo'
                , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , title: '学生列表'
                , cols: [[{
                    type: 'checkbox',
                    fixed: 'left'
                }, {
                    field: '属性',
                    title: '别名'
                }, {
                    field: '属性',
                    title: '别名'
                }, {
                    field: '属性',
                    title: '别名'
                }, {
                    field: '属性',
                    title: '别名'
                }, {
                    fixed: 'right',
                    title: '操作',
                    toolbar: '#barDemo'
                }]],
                page: true
            });

            //头工具栏事件--是table中的lay-filter而不是id
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                if (obj.event === 'getCheckData'){
                    var arr = [];
                    var data = checkStatus.data;
                    for (var i = 0; i < data.length; i++) { //循环筛选出id
                        arr.push(data[i].id);
                    }
                    console.log(arr) ;
                    $.ajax({
                        type: "POST",
                        url: "头部工具栏的URL",
                        data:{"ids":arr},
                        dataType:"json",
                        traditional:true,
                        success: function (result) {
                            if (result.status === 200) {
                                layer.msg(result.msg);
                            }
                        }
                    });
                }

            });

            //监听行工具事件   是table中的lay-filter而不是id
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'delete') {
                    layer.confirm('真的删除么？', function (index) {
                        obj.del();
                        $.ajax({
                            type: "GET",
                            url: "对应行事件的URL?id=" + data.id,
                            success: function (result) {
                                if (result.status == 200) {
                                    layer.close(index);
                                }
                            }
                        });

                    });
                }
            });
        });
    }