194 lines
5.2 KiB
PHP
194 lines
5.2 KiB
PHP
<?php
|
|
#
|
|
# @Author: fm453
|
|
# @Date: 2024/7/18
|
|
# @updated: 上午2:41
|
|
# @Email: 1280880631@qq.com
|
|
use yii\helpers\Html;use yii\helpers\Url;
|
|
|
|
$_csrf_backend = Yii::$app->request->csrfToken;
|
|
//Yii::$app->getRequest()->getCsrfToken();
|
|
?>
|
|
<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>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/export/bootstrap-table-export.min.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">
|
|
<i class="fa fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
<bootstrap-table
|
|
data-toolbar="#toolbar" data-locale="zh-CN"
|
|
|
|
:columns="columns" :data="datas" :options="options">
|
|
</bootstrap-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function getData(url){
|
|
var _data = {
|
|
'_csrf-backend': "<?=$_csrf_backend ;?>"
|
|
}
|
|
return fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
// 'Content-Type': 'application/x-www-form-urlencoded'
|
|
},
|
|
body: JSON.stringify(_data)
|
|
})
|
|
.then(
|
|
function(res){
|
|
if(res.ok) {
|
|
return res.json();
|
|
}else{
|
|
throw new Error('网络连接出现问题.');
|
|
}
|
|
}
|
|
)
|
|
.then(
|
|
function(data){
|
|
return data;
|
|
}
|
|
)
|
|
.catch(error => console.error('Error:', error));
|
|
}
|
|
|
|
const { createApp, ref } = Vue
|
|
function _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 = [
|
|
{
|
|
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,
|
|
//列标题
|
|
showColumnsToggleAll:true,
|
|
//一键筛选全部列
|
|
showColumnsSearch:true,
|
|
//筛选列时可搜索列名
|
|
showRefresh: true,
|
|
//刷新
|
|
showToggle: true,
|
|
//切换卡片视图
|
|
showExport:true,
|
|
//导出
|
|
showSearchClearButton:true,
|
|
//搜索框可清空
|
|
showFullscreen:true,
|
|
// 全屏
|
|
showFooter:true,
|
|
|
|
})
|
|
|
|
var datas = [];
|
|
datas = test_data
|
|
|
|
return {
|
|
columns,
|
|
test_data,
|
|
url,
|
|
options,
|
|
datas,
|
|
}
|
|
}
|
|
const app = createApp({
|
|
setup () {
|
|
return _setUp();
|
|
},
|
|
mounted(){
|
|
//此处可以使用this.来获取上面setup处理的一些数据
|
|
console.log(BootstrapTable.methods);
|
|
var _t = this;
|
|
getData(_t.url).then(
|
|
function(data){
|
|
console.log(_t.datas);
|
|
_t.datas = data.rows;
|
|
console.log(_t.datas);
|
|
}
|
|
)
|
|
}
|
|
})
|
|
|
|
app.component('BootstrapTable', BootstrapTable)
|
|
app.mount('#app')
|
|
var a = app.config;
|
|
// console.log(a);
|
|
</script>
|