如何在 laravel 5.6 中通过级联在下拉列表中显示项目?

Question

我有 3 个表，即菜单、子菜单和页面。

菜单表

Schema::create('menu', function (Blueprint $table) {
$table->increments('parent_id')->primary();
$table->string('name');
$table->timestamps();
});

子菜单表

Schema::create('submenu', function (Blueprint $table) {
$table->increments('submenu_id')->primary();
$table->integer('parent_id');
$table->foreign('parent_id')
->references('id')
->on('menu')
->onDelete('cascade');
$table->string('title');
$table->timestamps();
});

页表

Schema::create('page', function (Blueprint $table) {
$table->increments('page_id');
$table->integer('menu_id');
$table->integer('submenu_id');
$table->text('description');
$table->integer('status')->default('1');
$table->softDeletes();
$table->timestamps();
});

addpage.blade.php

<div class="control-group">
<label class="control-label">Menu Name</label>
<div class="controls">
<?php $menu = DB::table('menu')->where('status',1)->get(); ?>
<select name="parent_id" id="parent_id">
<option selected disabled>Select Menu Name</option>
@foreach($menu as $data)
<?php if($data->deleted_at==null) { ?>
<option value="{{ $data->parent_id }}">{{ strtoupper($data->name) }}</option>
<?php } ?>
@endforeach
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Submenu Title</label>
<div class="controls">
<?php //$menu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->get(); ?>
<select name="submenu_id" id="submenu_id">
<option selected disabled>Select Submenu Title</option>
<!-- @foreach($menu as $test)
<?php// $submenu = DB::table('submenu')->where('deleted_at',null)->where('status',1)->where('parent_id',$test->parent_id)->get(); ?>
<?php// print_r($submenu);die; ?>
@endforeach *-->
<?php $submenu = DB::table('submenu')->where('status',1)->get(); ?>
@foreach($submenu as $data)
<?php if($data->deleted_at==null) { ?>
<option value="{{ $data->submenu_id }}">{{ $data->title }}</option>
<?php } ?>
@endforeach
</select>
</div>
</div>

如何在 laravel 5.6 的下拉列表中级联值？ 当我添加新页面时，我想根据下拉菜单中的菜单显示子菜单... 所以，我想解决这个问题...

Answer 1

最好的方法是使用预先加载。使用此模型查询创建与两个模型的关系并获取值。

$menus= Menu::with('submenu')->get();
<select name="parent_id" id="parent_id">
<option selected disabled>Select Menu Name</option>
@foreach($menu as $key=>$value)
<option value="{{ $key }}">{{ strtoupper($value) }}</option>
@foreach($key->submenu as $subkey=>$subValue) { ?>
<option value="{{ $subkey->parent_id }}">{{ strtoupper($subValue->name) }}</option>
@endforeach   
@endforeach
</select>

Answer 2

这是我想到的。我稍微修改了迁移：

Schema::create('menus', function (Blueprint $table) {
$table->increments('id');
$table->tinyInteger('status')->default(1);
$table->string('name');
$table->timestamps();
});
Schema::create('sub_menus', function (Blueprint $table) {
$table->increments('id');
$table->tinyInteger('status')->default(1);
$table->unsignedInteger('menu_id');
$table->string('title');
$table->timestamps();
$table->foreign('menu_id')
->references('id')
->on('menus')
->onDelete('cascade');
});
Schema::create('pages', function (Blueprint $table) {
$table->increments('id');
$table->integer('menu_id');
$table->integer('submenu_id');
$table->integer('status')->default(1);
$table->text('description');
$table->softDeletes();
$table->timestamps();
});

然后从控制器内部

$menus = Menu::where('status', 1)->orderBy('name')->get()->map(function(Menu $menu) {
return [
'name' => $menu->name,
'value' => $menu->id,
];
});
$subMenus = SubMenu::where('status', 1)->orderBy('title')->get()->map(function(SubMenu $subMenu) {
return [
'name' => $subMenu->title,
'value' => $subMenu->id,
'menu_id' => $subMenu->menu_id,
];
})->groupBy('menu_id');
return view('menu.index')
->with('menus', $menus)
->with('subMenus', $subMenus);

您可以看到我使用menu_id字段对子菜单进行了分组，该字段将表示每个子菜单集合的索引 - 这样我们就可以轻松地在视图中替换它们。

我添加了 2 个简单的VueJs组件

Form.vue

<script>
export default {
props: {
inputs: {
type: Object,
required: true,
}
},
data() {
return {
fields: this.inputs
}
},
}
</script>

DependableMenu.vue

<template>
<div>
<slot :options="options"></slot>
</div>
</template>
<script>
export default {
props: {
parentValue: {
type: [Number, String],
default: null,
},
records: {
type: [Object, Array],
default: () => [],
}
},
data() {
return {
options: []
}
},
mounted() {
this.filterRecords(this.parentValue);
},
methods: {
filterRecords(parent_id) {
if (!parent_id) {
this.options = [];
}
this.options = this.records[parent_id] || [];
}
},
watch: {
parentValue(parent_id) {
this.filterRecords(parent_id);
}
}
}
</script>

在resources/assets/js/app.js内注册了它们

Vue.component('form-wrapper', require('./components/Form'));
Vue.component('dependable-menu', require('./components/DependableMenu'));

最后menu/index.blade.php表单视图

<form-wrapper :inputs="{ menu_id: '', submenu_id: '' }" inline-template>
<form action="/" method="post">
{{ csrf_field() }}
<select name="menu_id" v-model="fields.menu_id">
<option value="">Select menu</option>
@foreach($menus as $menu)
<option value="{{ $menu['value'] }}">{{ $menu['name'] }}</option>
@endforeach
</select>
<dependable-menu :parent-value="fields.menu_id" :records="{{ $subMenus }}">
<div slot-scope="props">
<select name="submenu_id">
<option value="">Select sub-menu</option>
<option v-for="option in props.options" :key="option.value" :value="option.value" v-text="option.name"></option>
</select>
</div>
</dependable-menu>
<button type="submit">SUBMIT</button>
</form>
</form-wrapper>

在本地测试 - 一切正常，但请尝试一下，看看效果如何。