bab-icon/resources/views/bootstrap_table_tree.blade.php

@extends('layouts.admin.app')

@section('plug-css')
{{-- bootstrap-table --}}
<link href="{{ asset('js/bootstrap-table/dist/bootstrap-table.css') }}" rel="stylesheet">
@endsection

{{-- 后台导航栏 面包屑 --}}
@section('crumbs')
    <ol class="breadcrumb crumbs">
        <li><a href="{{ route('admin.index') }}#">后台导航</a></li>
        <li><a href="{{ route('admin.index') }}">后台首页</a></li>
        <li class="active">全局配置</li>
    </ol>
@endsection

{{-- 文本内容 --}}
@section('content')
<form id="searchForm" class="form-inline">
    <div class="">
        <div class="form-group">
            <label for="name" class="label-css">名称</label>
            <input class="form-control" type="text" id="name" name="key">
        </div>
        <div class="form-group">
            <label for="value" class="label-css">配置值</label>
            <input class="form-control" type="text" id="valueOne" name="value">
        </div>
        &ensp;&ensp;
        <button type="button" class="btn btn-primary">查询</button>
    </div>
</form>
<hr class="hr-css">
<div>
    <div id="toolbar">
        <div class="columns columns-left btn-group pull-left">
            <a href="javascript:;">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>&ensp;新增
                </button>
            </a>
            <a>
                <button id="deleteAll" data-url="{{ route('config.destroys') }}" class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&ensp;删除
                </button>
            </a>
        </div>
    </div>
    {{-- table --}}
    <table id="ContentTable"></table>
</div>
@endsection

{{-- 插件引入js --}}
@section('plug-js')
{{-- bootstrap-table插件 --}}
<script src="{{ asset('js/bootstrap-table/dist/bootstrap-table.js') }}"></script>
<script src="{{ asset('js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js') }}"></script>
<script src="{{ asset('js/bootstrap-table-treeView/src/bootstrap-table-treeview.js') }}"></script>
@endsection

{{-- javaScript --}}
@section('scripts')
<script>
    $(function(){
        BootStrapInit.init('tableView','ContentTable',{
            searchForm: 'searchForm',   //> 表单搜索id 省略默认 'searchForm'
            url: "{{ route('/tree/ajax') }}",
            method: 'post',
            toolbar: '#toolbar',
            idField: '',        //指定主键列
            uniqueId: "id",
            treeView: true,
            treeId: "id",
            treeField: "name",//展示树的字段
            columns: [
                {
                    checkbox: true,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'name',
                    title: '名称',
                    align: 'left',
                    valign: 'middle',
                    width: '185px'
                },
                {
                    pkId: 'id',         //> 当前主键id 兼容排序 field='id' 默认值id
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: '185px',
                    formatter:operateFormatter,
                    btn_group:[
                        {
                            'name'  : '编辑',
                            'class' : 'btn-primary',
                            'url'   : '{{ route('admin.index', ['key'=>'-val-'])}}'
                        },
                        {
                            'name'  : '删除',
                            'class' : 'btn-danger deleteBtn', //> class标签 deleteBtn删除 layer弹出框
                            'url'   : 'javascript:;',
                            'confirm_url': '{{ route('config.destroy', ['key'=>'-val-'])}}'   //> 选择按钮
                        }
                    ]
                }
        ]});
    });
</script>
@endsection