121 lines
3.6 KiB
PHP
121 lines
3.6 KiB
PHP
<?php
|
|
#
|
|
# @Author: fm453
|
|
# @Date: 2024/7/18
|
|
# @updated: 上午2:41
|
|
# @Email: 1280880631@qq.com
|
|
use yii\helpers\Html;use yii\helpers\Url;
|
|
?>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.css">
|
|
<?=Html::jsFile('@web/js/plugins/vue/vue-3.4.32.global.js')?>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table-vue.umd.js"></script>
|
|
|
|
<div class="wrapper wrapper-content">
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div id="app">
|
|
<div id="toolbar">
|
|
<button id="remove" class="btn btn-danger" disabled>
|
|
<i class="fa fa-trash"></i>
|
|
</button>
|
|
<button id="add" class="btn btn-primary" disabled>
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<bootstrap-table data-toolbar="#toolbar" :columns="columns" :data-url="url" :options="options"></bootstrap-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(function() {
|
|
const { createApp, ref } = Vue
|
|
const app = createApp({
|
|
setup () {
|
|
const columns = ref([
|
|
{
|
|
field: 'state',
|
|
checkbox: true
|
|
},
|
|
{
|
|
title: 'ID',
|
|
field: 'id'
|
|
},
|
|
{
|
|
field: 'title',
|
|
title: '标题'
|
|
},
|
|
{
|
|
field: 'des',
|
|
title: '代码'
|
|
},
|
|
{
|
|
field: 'action',
|
|
title: '操作',
|
|
align: 'center',
|
|
formatter () {
|
|
return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
|
|
},
|
|
events: {
|
|
'click .like' (e, value, row) {
|
|
alert(JSON.stringify(row))
|
|
}
|
|
}
|
|
}
|
|
])
|
|
const url = "<?=Url::toRoute(['json'])?>"
|
|
const test_data = ref([
|
|
{
|
|
id: 0,
|
|
name: 'Item 0',
|
|
price: '$0'
|
|
},
|
|
{
|
|
id: 1,
|
|
name: 'Item 1',
|
|
price: '$1'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'Item 2',
|
|
price: '$2'
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'Item 3',
|
|
price: '$3'
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'Item 4',
|
|
price: '$4'
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'Item 5',
|
|
price: '$5'
|
|
}
|
|
])
|
|
const options = ref({
|
|
search: true,
|
|
showColumns: true
|
|
})
|
|
|
|
return {
|
|
columns,
|
|
test_data,
|
|
url,
|
|
options
|
|
}
|
|
}
|
|
})
|
|
|
|
app.component('BootstrapTable', BootstrapTable)
|
|
app.mount('#app')
|
|
})
|
|
|
|
</script>
|