Initial commit，修正
This commit is contained in:
@@ -0,0 +1,268 @@
|
||||
<?php
|
||||
#
|
||||
# @Author: fm453
|
||||
# @Date: 2024/7/17
|
||||
# @updated: 上午3:31
|
||||
# @Email: 1280880631@qq.com
|
||||
use yii\helpers\Html;use yii\helpers\Url;
|
||||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<!--基础样式-->
|
||||
<?=Html::cssFile('@web/css/plugins/dataTables/dataTables.bootstrap.css')?>
|
||||
<?=Html::cssFile('@web/js/plugins/dataTables-V2.1.0/datatables.css')?>
|
||||
<!--基础样式-->
|
||||
|
||||
<!--表格编辑需要引入该插件-->
|
||||
<?=Html::jsFile('@web/js/plugins/jeditable/jquery.jeditable.js')?>
|
||||
<!--表格编辑需要引入该插件-->
|
||||
<!-- 基础JS-->
|
||||
|
||||
<?=Html::jsFile('@web/js/plugins/dataTables-V2.1.0/datatables.js')?>
|
||||
|
||||
<!-- 基础JS-->
|
||||
|
||||
<div class="">
|
||||
<a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">添加行</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* 单元格连续纯字母数字强制换行显示 */
|
||||
.wordwrap{
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 超长文字单元格省略号显示 */
|
||||
.ellipsis{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<div id="toolbar"></div>
|
||||
<table class="table table-striped table-bordered table-hover " id="table">
|
||||
|
||||
|
||||
</table>
|
||||
<script>
|
||||
let $table = $('#table')
|
||||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||||
const dataSaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||||
let columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
// 覆写列标题
|
||||
data: 'id',
|
||||
width:'40',
|
||||
visible:true,
|
||||
//显示或隐藏列
|
||||
// type:'string',
|
||||
// 如果不设置则自动检测数据类型 date,num,num-fmt,html-num,html-num-fmt,html,string
|
||||
searchable:false,
|
||||
//是否允许搜索
|
||||
// render:{"_": "plain",
|
||||
// "filter": "filter",
|
||||
// "display": "display",
|
||||
// },
|
||||
// 数据格式化渲染处理
|
||||
defaultContent: '<i>未设置</i>',
|
||||
//空值默认
|
||||
className: "wordwrap ellipsis",
|
||||
//设置样式
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
data: 'title',
|
||||
editable: editorFormatter,
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
data: 'des',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
data: 'orderby',
|
||||
}
|
||||
]
|
||||
function editorFormatter(){
|
||||
return {
|
||||
"url": dataSaveUrl,
|
||||
"callback": function(sValue, y) {
|
||||
let aPos = DTable.fnGetPosition(this);
|
||||
DTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
},
|
||||
"submitdata": function(value, settings) {
|
||||
return {
|
||||
"row_id": this.parentNode.getAttribute("id"),
|
||||
"column": DTable.fnGetPosition(this)[2]
|
||||
}
|
||||
},
|
||||
"width": "90%",
|
||||
"height": "100%"
|
||||
}
|
||||
}
|
||||
//数据格式化
|
||||
function textFormatter( data, type, full, meta ){
|
||||
return type === 'display' && data.length > 40 ?
|
||||
'<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
|
||||
data;
|
||||
// 当字符串太长的时候显示点点
|
||||
}
|
||||
function hrefFormatter( data, type, full, meta ) {
|
||||
return '<a href="'+data+'">跳转链接</a>';
|
||||
// 转换超链接
|
||||
}
|
||||
|
||||
// 定义表格操作
|
||||
const options = {
|
||||
columns:columns,
|
||||
//列标题数据
|
||||
ordering:true,
|
||||
//是否允许表格排序
|
||||
autoWidth:true,
|
||||
// 自动宽度
|
||||
paging:false,
|
||||
// 是否开启本地分页
|
||||
processing:true,
|
||||
// 是否显示处理状态
|
||||
// scrollX:true,
|
||||
// scrollY:true,
|
||||
//水平、垂直滚动,有问题，暂不开启
|
||||
serverSide:false,
|
||||
// 是否开启服务器模式
|
||||
deferRender:true,
|
||||
// 控制延迟渲染，提高初始化速度
|
||||
searching:true,
|
||||
// 是否开启本地搜索
|
||||
autoFill: {alwaysAsk: true},
|
||||
// 自动填充
|
||||
ajax:dataUrl
|
||||
|
||||
}
|
||||
function initTable(){
|
||||
Object.assign(DataTable.defaults, options);
|
||||
let DTable = new DataTable('#table')
|
||||
console.log(DTable.select().$("td"));
|
||||
// DTable.select("td").editable(dataSaveUrl,{
|
||||
// "callback": function(sValue, y) {
|
||||
// let aPos = DTable.fnGetPosition(this);
|
||||
// DTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
// },
|
||||
// "submitdata": function(value, settings) {
|
||||
// return {
|
||||
// "row_id": this.parentNode.getAttribute("id"),
|
||||
// "column": DTable.fnGetPosition(this)[2]
|
||||
// }
|
||||
// },
|
||||
// "width": "90%",
|
||||
// "height": "100%"
|
||||
// })
|
||||
return DTable;
|
||||
}
|
||||
|
||||
// 表格之外的方法 S
|
||||
// 网络获取数据
|
||||
function getData(url){
|
||||
let _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));
|
||||
}
|
||||
//保存数据
|
||||
function saveData(url,data){
|
||||
data['_csrf-backend'] = "<?=$_csrf_backend ;?>";
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
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));
|
||||
}
|
||||
|
||||
// 表格之外的方法 E
|
||||
|
||||
let table;
|
||||
// 启动时页面加载
|
||||
$(function() {
|
||||
table = initTable()
|
||||
|
||||
getData(dataUrl).then(
|
||||
function(data){
|
||||
let a = {
|
||||
id:1,
|
||||
title:'曾经沧海 ',
|
||||
des:'难为水',
|
||||
orderby:9,
|
||||
en:'fsfasfl'
|
||||
}
|
||||
let b = [a,a]
|
||||
table.row.add(b).draw(false)
|
||||
//向表格追加数据
|
||||
|
||||
// table.$("td").editable(dataSaveUrl,{
|
||||
// "callback": function(sValue, y) {
|
||||
// let aPos = table.fnGetPosition(this);
|
||||
// console.log(aPos)
|
||||
// table.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
// },
|
||||
// "submitdata": function(value, settings) {
|
||||
// return {
|
||||
// "row_id": this.parentNode.getAttribute("id"),
|
||||
// "column": table.fnGetPosition(this)[2]
|
||||
// }
|
||||
// },
|
||||
// "width": "90%",
|
||||
// "height": "100%"
|
||||
// })
|
||||
//为新添加的数据增加可编辑函数
|
||||
// table.draw()
|
||||
//表格重绘
|
||||
}
|
||||
)
|
||||
})
|
||||
function fnClickAddRow(){
|
||||
table.row.add([1,9,8,0]).draw(false)
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,255 @@
|
||||
<?php
|
||||
#
|
||||
# @Author: fm453
|
||||
# @Date: 2024/7/17
|
||||
# @updated: 上午3:31
|
||||
# @Email: 1280880631@qq.com
|
||||
use yii\helpers\Html;use yii\helpers\Url;
|
||||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||||
?>
|
||||
|
||||
|
||||
|
||||
<!--基础样式-->
|
||||
<?=Html::cssFile('@web/css/plugins/dataTables/dataTables.bootstrap.css')?>
|
||||
<!--基础样式-->
|
||||
|
||||
<!--表格编辑需要引入该插件-->
|
||||
<?=Html::jsFile('@web/js/plugins/jeditable/jquery.jeditable.js')?>
|
||||
<!--表格编辑需要引入该插件-->
|
||||
<!-- 基础JS-->
|
||||
<?=Html::jsFile('@web/js/plugins/dataTables/jquery.dataTables.js')?>
|
||||
<?=Html::jsFile('@web/js/plugins/dataTables/dataTables.bootstrap.js')?>
|
||||
<!-- 基础JS-->
|
||||
|
||||
<div class="">
|
||||
<a onclick="fnClickAddRow();" href="javascript:void(0);" class="btn btn-primary ">添加行</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// $(document).ready(function() {
|
||||
// var oTable = $("#editable").dataTable();
|
||||
// oTable.$("td").editable("http://www.zi-han.net/theme/example_ajax.php", {
|
||||
// "callback": function(sValue, y) {
|
||||
// var aPos = oTable.fnGetPosition(this);
|
||||
// oTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
// },
|
||||
// "submitdata": function(value, settings) {
|
||||
// return {
|
||||
// "row_id": this.parentNode.getAttribute("id"),
|
||||
// "column": oTable.fnGetPosition(this)[2]
|
||||
// }
|
||||
// },
|
||||
// "width": "90%",
|
||||
// "height": "100%"
|
||||
// })
|
||||
// });
|
||||
|
||||
// function fnClickAddRow() {
|
||||
// $("#editable").dataTable().fnAddData(["Custom row", "New row", "New row", "New row", "New row"])
|
||||
// }
|
||||
</script>
|
||||
<style>
|
||||
/* 单元格连续纯字母数字强制换行显示 */
|
||||
.wordwrap{
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
}
|
||||
/* 超长文字单元格省略号显示 */
|
||||
.ellipsis{
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
<div id="toolbar"></div>
|
||||
<table class="table table-striped table-bordered table-hover " id="table">
|
||||
|
||||
<tbody>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<script>
|
||||
var $table = $('#table')
|
||||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||||
const dataSaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||||
var columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
// 覆写列标题
|
||||
data: 'id',
|
||||
width:'40',
|
||||
visible:true,
|
||||
//显示或隐藏列
|
||||
// type:'string',
|
||||
// 如果不设置则自动检测数据类型 date,num,num-fmt,html-num,html-num-fmt,html,string
|
||||
searchable:false,
|
||||
//是否允许搜索
|
||||
// render:{"_": "plain",
|
||||
// "filter": "filter",
|
||||
// "display": "display",
|
||||
// },
|
||||
// 数据格式化渲染处理
|
||||
defaultContent: '<i>未设置</i>',
|
||||
//空值默认
|
||||
className: "wordwrap ellipsis",
|
||||
//设置样式
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
data: 'title',
|
||||
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
data: 'des',
|
||||
}
|
||||
]
|
||||
//数据格式化
|
||||
function textFormatter( data, type, full, meta ){
|
||||
return type === 'display' && data.length > 40 ?
|
||||
'<span title="'+data+'">'+data.substr( 0, 38 )+'...</span>' :
|
||||
data;
|
||||
// 当字符串太长的时候显示点点
|
||||
}
|
||||
function hrefFormatter( data, type, full, meta ) {
|
||||
return '<a href="'+data+'">跳转链接</a>';
|
||||
// 转换超链接
|
||||
}
|
||||
|
||||
// 定义表格操作
|
||||
const options = {
|
||||
columns:columns,
|
||||
//列标题数据
|
||||
ordering:true,
|
||||
//是否允许表格排序
|
||||
autoWidth:true,
|
||||
// 自动宽度
|
||||
paging:false,
|
||||
// 是否开启本地分页
|
||||
processing:true,
|
||||
// 是否显示处理状态
|
||||
// scrollX:true,
|
||||
// scrollY:true,
|
||||
//水平、垂直滚动,有问题，暂不开启
|
||||
serverSide:false,
|
||||
// 是否开启服务器模式
|
||||
deferRender:true,
|
||||
// 控制延迟渲染，提高初始化速度
|
||||
searching:true,
|
||||
// 是否开启本地搜索
|
||||
autoFill: {alwaysAsk: true},
|
||||
// 自动填充
|
||||
|
||||
}
|
||||
function initTable(){
|
||||
let DTable = $table.dataTable(options)
|
||||
DTable.$("td").editable(dataSaveUrl,{
|
||||
"callback": function(sValue, y) {
|
||||
let aPos = DTable.fnGetPosition(this);
|
||||
DTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
},
|
||||
"submitdata": function(value, settings) {
|
||||
return {
|
||||
"row_id": this.parentNode.getAttribute("id"),
|
||||
"column": DTable.fnGetPosition(this)[2]
|
||||
}
|
||||
},
|
||||
"width": "90%",
|
||||
"height": "100%"
|
||||
})
|
||||
return DTable;
|
||||
}
|
||||
|
||||
// 表格之外的方法 S
|
||||
// 网络获取数据
|
||||
function getData(url){
|
||||
let _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));
|
||||
}
|
||||
//保存数据
|
||||
function saveData(url,data){
|
||||
data['_csrf-backend'] = "<?=$_csrf_backend ;?>";
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
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));
|
||||
}
|
||||
|
||||
// 表格之外的方法 E
|
||||
|
||||
// 启动时页面加载
|
||||
$(function() {
|
||||
let table = initTable()
|
||||
|
||||
getData(dataUrl).then(
|
||||
function(data){
|
||||
table.fnAddData(data.rows)
|
||||
//向表格追加数据
|
||||
|
||||
table.$("td").editable(dataSaveUrl,{
|
||||
"callback": function(sValue, y) {
|
||||
let aPos = table.fnGetPosition(this);
|
||||
console.log(aPos)
|
||||
table.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
},
|
||||
"submitdata": function(value, settings) {
|
||||
return {
|
||||
"row_id": this.parentNode.getAttribute("id"),
|
||||
"column": table.fnGetPosition(this)[2]
|
||||
}
|
||||
},
|
||||
"width": "90%",
|
||||
"height": "100%"
|
||||
})
|
||||
//为新添加的数据增加可编辑函数
|
||||
table.fnDraw()
|
||||
//表格重绘
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,270 @@
|
||||
<?php
|
||||
#
|
||||
# @Author: fm453
|
||||
# @Date: 2024/7/16
|
||||
# @updated: 下午4:40
|
||||
# @Email: 1280880631@qq.com
|
||||
|
||||
use yii\helpers\Html;use yii\helpers\Url;
|
||||
?>
|
||||
|
||||
<!--树形显示-->
|
||||
<?=Html::cssFile('@web/css/plugins/treeview/bootstrap-treeview.css')?>
|
||||
<?=Html::jsFile('@web/js/plugins/treeview/bootstrap-treeview.js')?>
|
||||
|
||||
<!--数据表格-->
|
||||
<?php //=Html::cssFile('@web/css/plugins/bootstrap-table/bootstrap-table.min.css')?>
|
||||
<?php //=Html::jsFile('@web/js/plugins/bootstrap-table/bootstrap-table.min.js')?>
|
||||
<?php //=Html::jsFile('@web/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js')?>
|
||||
<?php //=Html::jsFile('@web/js/plugins/bootstrap-table/extensions/export/bootstrap-table-export.min.js')?>
|
||||
|
||||
<?=Html::cssFile('@web/css/plugins/bootstrap-table/bootstrap-table.min.css')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table/bootstrap-table.min.js')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js')?>
|
||||
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>展开</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div id="treeview" class="test"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="example-wrap">
|
||||
<div class="example">
|
||||
<div id="toolbar">
|
||||
<button id="remove" class="btn btn-danger" disabled>
|
||||
<i class="fa fa-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
<table
|
||||
id="table"
|
||||
data-toolbar="#toolbar"
|
||||
data-search="true"
|
||||
data-show-refresh="true"
|
||||
data-show-toggle="true"
|
||||
data-show-columns="true"
|
||||
data-show-columns-toggle-all="true"
|
||||
data-show-export="true"
|
||||
data-detail-view="true"
|
||||
data-click-to-select="true"
|
||||
data-detail-formatter="detailFormatter"
|
||||
data-minimum-count-columns="2"
|
||||
data-show-pagination-switch="true"
|
||||
data-pagination="true"
|
||||
data-id-field="id"
|
||||
data-page-list="[10, 25, 50, 100, all]"
|
||||
data-show-footer="true"
|
||||
data-side-pagination="server"
|
||||
data-url="<?=Url::toRoute(['json'])?>"
|
||||
data-query-params="queryParams"
|
||||
data-row-style="rowStyle"
|
||||
data-response-handler="responseHandler">
|
||||
<thead>
|
||||
<tr>
|
||||
<th data-radio="true"></th>
|
||||
<th data-field="id" data-halign="left">ID</th>
|
||||
<th data-field="title" data-cell-style="cellStyle" data-halign="right">标题</th>
|
||||
<th data-field="des" data-halign="center">代码</th>
|
||||
</tr>
|
||||
</thead>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--树形结构处理-->
|
||||
<script>
|
||||
var e = t = '[{"text": "父节点 DD","nodes": [{"text": "子节点 1","nodes": [{"text": "孙子节点 1"},{"text": "孙子节点 2"}]},{"text": "子节点 2"}]},{"text": "父节点 2"},{"text": "父节点 3"},{"text": "父节点 4"},{"text": "父节点 5"}]';
|
||||
|
||||
$("#treeview").treeview({
|
||||
levels: 99,
|
||||
data: e,
|
||||
onNodeSelected: function(e, o) {
|
||||
console.log("<p>您单击了 " + o.text + "</p>")
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<!--数据表格处理-->
|
||||
<script>
|
||||
function cellStyle(e, t, o) {
|
||||
var n = ["active", "success", "info", "warning", "danger"];
|
||||
return o % 2 === 0 && o / 2 < n.length ? {
|
||||
classes: n[o / 2]
|
||||
} : {}
|
||||
}
|
||||
function rowStyle(e, t) {
|
||||
var o = ["active", "success", "info", "warning", "danger"];
|
||||
return t % 2 === 0 && t / 2 < o.length ? {
|
||||
classes: o[t / 2]
|
||||
} : {}
|
||||
}
|
||||
function queryParams() {
|
||||
return {
|
||||
type: "owner",
|
||||
sort: "updated",
|
||||
direction: "desc",
|
||||
per_page: 100,
|
||||
page: 1
|
||||
}
|
||||
}
|
||||
// _____
|
||||
var $table = $('#table')
|
||||
var $remove = $('#remove')
|
||||
var selections = []
|
||||
|
||||
function getIdSelections() {
|
||||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||||
return row.id
|
||||
})
|
||||
}
|
||||
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.state = $.inArray(row.id, selections) !== -1
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
function detailFormatter(index, row) {
|
||||
var html = []
|
||||
$.each(row, function (key, value) {
|
||||
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
|
||||
})
|
||||
return html.join('')
|
||||
}
|
||||
|
||||
function operateFormatter(value, row, index) {
|
||||
return [
|
||||
'<a class="like" href="javascript:void(0)" title="Like">',
|
||||
'<i class="fa fa-heart"></i>',
|
||||
'</a> ',
|
||||
'<a class="remove" href="javascript:void(0)" title="Remove">',
|
||||
'<i class="fa fa-trash"></i>',
|
||||
'</a>'
|
||||
].join('')
|
||||
}
|
||||
|
||||
window.operateEvents = {
|
||||
'click .like': function (e, value, row, index) {
|
||||
alert('You click like action, row: ' + JSON.stringify(row))
|
||||
},
|
||||
'click .remove': function (e, value, row, index) {
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: [row.id]
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function totalTextFormatter(data) {
|
||||
return 'Total'
|
||||
}
|
||||
|
||||
function totalNameFormatter(data) {
|
||||
console.log(data);
|
||||
return data.length
|
||||
}
|
||||
|
||||
function totalPriceFormatter(data) {
|
||||
var field = this.field
|
||||
return '$' + data.map(function (row) {
|
||||
return +row[field].substring(1)
|
||||
}).reduce(function (sum, i) {
|
||||
return sum + i
|
||||
}, 0)
|
||||
}
|
||||
|
||||
function initTable() {
|
||||
$table.bootstrapTable('destroy').bootstrapTable(
|
||||
// {
|
||||
// columns: [
|
||||
// [
|
||||
// {
|
||||
// field: 'state',
|
||||
// checkbox: true,
|
||||
// rowspan: 2,
|
||||
// align: 'center',
|
||||
// valign: 'middle'
|
||||
// },
|
||||
// {
|
||||
// title: 'Item ID',
|
||||
// field: 'id',
|
||||
// rowspan: 2,
|
||||
// align: 'center',
|
||||
// valign: 'middle',
|
||||
// sortable: true,
|
||||
// footerFormatter: totalTextFormatter
|
||||
// },
|
||||
// {
|
||||
// title: 'Item Detail',
|
||||
// colspan: 3,
|
||||
// align: 'center'
|
||||
// }
|
||||
// ],
|
||||
// [
|
||||
// {
|
||||
// field: 'name',
|
||||
// title: 'Item Name',
|
||||
// sortable: true,
|
||||
// footerFormatter: totalNameFormatter,
|
||||
// align: 'center'
|
||||
// },
|
||||
// {
|
||||
// field: 'price',
|
||||
// title: 'Item Price',
|
||||
// sortable: true,
|
||||
// align: 'center',
|
||||
// footerFormatter: totalPriceFormatter
|
||||
// },
|
||||
// {
|
||||
// field: 'operate',
|
||||
// title: 'Item Operate',
|
||||
// align: 'center',
|
||||
// clickToSelect: false,
|
||||
// events: window.operateEvents,
|
||||
// formatter: operateFormatter
|
||||
// }
|
||||
// ]
|
||||
// ]
|
||||
// }
|
||||
)
|
||||
$table.on('check.bs.table uncheck.bs.table ' +
|
||||
'check-all.bs.table uncheck-all.bs.table',
|
||||
function () {
|
||||
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
|
||||
|
||||
// save your data, here just save the current page
|
||||
selections = getIdSelections()
|
||||
// push or splice the selections if you want to save all data selections
|
||||
})
|
||||
$table.on('all.bs.table', function (e, name, args) {
|
||||
console.log(name, args)
|
||||
})
|
||||
$remove.click(function () {
|
||||
var ids = getIdSelections()
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: ids
|
||||
})
|
||||
$remove.prop('disabled', true)
|
||||
})
|
||||
}
|
||||
|
||||
$(function() {
|
||||
initTable()
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,835 @@
|
||||
<?php
|
||||
#
|
||||
# @Author: fm453
|
||||
# @Date: 2024/7/17
|
||||
# @updated: 上午3:31
|
||||
# @Email: 1280880631@qq.com
|
||||
use yii\helpers\Url;
|
||||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||||
?>
|
||||
|
||||
|
||||
<!--列排序-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/akottr/dragtable@master/dragtable.css">
|
||||
<!--列排序-->
|
||||
<!--列宽调整-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.css">
|
||||
<!--列宽调整-->
|
||||
<!--树形表-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/css/jquery.treegrid.css">
|
||||
<!--树形表-->
|
||||
|
||||
<!--基础样式-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.css">
|
||||
<!--基础样式-->
|
||||
|
||||
<!--行排序-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.css">
|
||||
<!--行排序-->
|
||||
<!--表头固定-->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/sticky-header/bootstrap-table-sticky-header.css">
|
||||
<!--表头固定-->
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
|
||||
<!--数据导出-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/tableExport.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/tableexport.jquery.plugin@1.29.0/libs/jsPDF/jspdf.umd.min.js"></script>
|
||||
<!--数据导出-->
|
||||
<!--列排序-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jqueryui@1.11.1/jquery-ui.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/gh/akottr/dragtable@master/jquery.dragtable.js"></script>
|
||||
<!--列排序-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/tablednd@1.0.5/dist/jquery.tablednd.min.js"></script>
|
||||
<!--列宽调整-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery-resizable-columns@0.2.3/dist/jquery.resizableColumns.min.js"></script>
|
||||
<!--列宽调整-->
|
||||
<!--树形表-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/jquery-treegrid@0.3.0/js/jquery.treegrid.min.js"></script>
|
||||
<!--树形表-->
|
||||
|
||||
<!-- 基础JS-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/bootstrap-table.min.js"></script>
|
||||
<!--cookie缓存数据-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/cookie/bootstrap-table-cookie.min.js"></script>
|
||||
<!--cookie缓存数据-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/locale/bootstrap-table-zh-CN.min.js"></script>
|
||||
<!-- 基础JS-->
|
||||
|
||||
<!--表数据导出-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/export/bootstrap-table-export.min.js"></script>
|
||||
<!--表数据导出-->
|
||||
<!--列筛选过滤-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
|
||||
<!--列筛选过滤-->
|
||||
<!--行分组-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/group-by-v2/bootstrap-table-group-by.min.js"></script>
|
||||
<!--行分组-->
|
||||
<!--复合排序-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/multiple-sort/bootstrap-table-multiple-sort.js"></script>
|
||||
<!--复合排序-->
|
||||
<!--表格打印-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/print/bootstrap-table-print.min.js"></script>
|
||||
<!--表格打印-->
|
||||
<!--列排序-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/reorder-columns/bootstrap-table-reorder-columns.min.js"></script>
|
||||
<!--列排序-->
|
||||
<!--行排序-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js"></script>
|
||||
<!--行排序-->
|
||||
<!--列宽调整-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
|
||||
<!--列宽调整-->
|
||||
<!--表头固定-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
|
||||
<!--表头固定-->
|
||||
<!--高级搜索-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>
|
||||
<!--高级搜索-->
|
||||
<!--树形表-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
|
||||
<!--树形表-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/addrbar/bootstrap-table-addrbar.min.js"></script>
|
||||
<!--表格可编辑-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/editable/bootstrap-table-editable.min.js"></script>
|
||||
<!--表格可编辑-->
|
||||
<!--绑定键盘事件监听-->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@1.23.1/dist/extensions/key-events/bootstrap-table-key-events.min.js"></script>
|
||||
<!--绑定键盘事件监听-->
|
||||
|
||||
<style>
|
||||
.select{
|
||||
width: 100%;
|
||||
}
|
||||
.operateIcon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
td.success {
|
||||
background: green;
|
||||
color: white;
|
||||
}
|
||||
#forTable {
|
||||
width:98%;
|
||||
padding-left:1%;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
|
||||
<div class="col-sm-12" id="forTable">
|
||||
<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 class="btn-group">
|
||||
<select id="select" class="form-control" name="filterAlgorithm">
|
||||
<option value="and" selected>全部符合</option>
|
||||
<option value="or">满足任一</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" id="filterBy" style="width:80px;">筛选</button>
|
||||
</div>
|
||||
</div>
|
||||
<table id="table">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $table = $('#table')
|
||||
var $remove = $('#remove')
|
||||
var $add = $('#add')
|
||||
var selections = []
|
||||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||||
const datasaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||||
var icons = {
|
||||
detailOpen:"bi-toggle-on",
|
||||
detailClose:"bi-toggle-off",
|
||||
advancedSearchIcon: 'bi-search',
|
||||
//bi-*或fa-*，取决于图标前缀配置
|
||||
}
|
||||
var sortPriority = [{"sortName": "title","sortOrder":"desc"},{"sortName":"des","sortOrder":"desc"}]
|
||||
|
||||
var columns2 = [
|
||||
[
|
||||
{
|
||||
colspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
title: '选择'
|
||||
},
|
||||
{
|
||||
colspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
title: '详情'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'options',
|
||||
rowspan: 2,
|
||||
class: 'success',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
clickToSelect:false,
|
||||
formatter: operateFormatter,
|
||||
footerFormatter: TextCountFormatter,
|
||||
events: 'operateEvents',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
field: 'state',
|
||||
checkbox: true,
|
||||
rowspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:stateFormatter,
|
||||
footerFormatter:"CountTitleFormatter",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
field: 'id',
|
||||
rowspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:20,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: NumCountFormatter,
|
||||
searchable:false
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: '标题',
|
||||
field: 'title',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:120,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
editable: {
|
||||
type: 'text',
|
||||
title: 'Enter Name',
|
||||
validate: function(value) {
|
||||
if (!value) {
|
||||
return 'The name is required';
|
||||
}
|
||||
}
|
||||
},
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"input",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
field: 'des',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
var columns = [
|
||||
{
|
||||
align: 'left',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
style:'width:15px',
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:indexFormatter,
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
checkbox: true,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:stateFormatter,
|
||||
footerFormatter:"CountTitleFormatter",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
field: 'id',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:20,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: NumCountFormatter,
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
field: 'title',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:120,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
editable:titleEditor,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"input",
|
||||
searchable:true
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
field: 'des',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
// editable:titleEditor,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'options',
|
||||
// class: 'success',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: false,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
clickToSelect:false,
|
||||
formatter: operateFormatter,
|
||||
footerFormatter: TextCountFormatter,
|
||||
events: 'operateEvents',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
]
|
||||
|
||||
// 定义表格操作
|
||||
const options = {
|
||||
// locale:"zh-CN",
|
||||
//中文(直接JS添加了中文引用时可以不用设置
|
||||
toolbar:"#toolbar",
|
||||
//指定工具栏
|
||||
columns:columns,
|
||||
//定义表列标题
|
||||
showColumns: true,
|
||||
//列标题筛选
|
||||
showColumnsToggleAll:true,
|
||||
//一键筛选全部列
|
||||
showColumnsSearch:true,
|
||||
//筛选列时可搜索列名
|
||||
showRefresh: true,
|
||||
//刷新
|
||||
showToggle: true,
|
||||
//切换卡片视图
|
||||
showExport:true,
|
||||
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
|
||||
//导出(TBD PDF导出时中文乱码，待修正）
|
||||
search: true,
|
||||
//搜索
|
||||
showSearchClearButton:true,
|
||||
//搜索框可清空
|
||||
showSearchButton:false,
|
||||
// 显示搜索图标
|
||||
searchHighlight:true,
|
||||
//高亮搜索结果
|
||||
visibleSearch:true,
|
||||
//只在可视单元格内搜索
|
||||
advancedSearch:true,
|
||||
idTable:"advancedTable",
|
||||
//高级搜索
|
||||
showFullscreen:true,
|
||||
// 全屏
|
||||
addrbar: true,
|
||||
//地址栏 TBD 未调试
|
||||
// showHeader:false,
|
||||
//关闭表头列标题
|
||||
headerStyle:"headerStyle",
|
||||
//表头样式定义函数
|
||||
showFooter:true,
|
||||
//显示表格底部
|
||||
footerStyle:"footerStyle",
|
||||
//表格底部风格定义函数
|
||||
pagination:false,
|
||||
//分页
|
||||
showPaginationSwitch:true,
|
||||
//分页切换
|
||||
clickToSelect:false,
|
||||
//行点击即选中
|
||||
|
||||
responseHandler:"responseHandler",
|
||||
//获取数据的后续响应操作
|
||||
buttonsClass:"secondary",
|
||||
//按钮样式（secondary，default,primary,warning,danger,success……）
|
||||
detailView:true,
|
||||
detailViewIcon:false,
|
||||
showDetail:false,
|
||||
//行首添加显示详情按钮（图标必须false,否则会在表首添加1列；开启列拖动排序时，需要禁用该项）
|
||||
detailFormatter:"detailFormatter",
|
||||
//卡片视图格式化操作
|
||||
|
||||
idField: 'id',
|
||||
//指定ID列
|
||||
buttons:'Buttons',
|
||||
// 添加自定义按钮
|
||||
showButtonText:false,
|
||||
//显示按钮文字
|
||||
// singleSelect:true,
|
||||
//设置仅单选
|
||||
theadClasses:"thead-dark",
|
||||
//表头样式(thead-light,thead-dark) TBD 未调试
|
||||
sortClass:"table-active",
|
||||
//排序列的样式
|
||||
sortReset:true,
|
||||
// 在第三次点击的时候重置排序
|
||||
totalField:"total",
|
||||
dataField:"rows",
|
||||
//仅在设置了直接从URL取数据时有效，总数变量、数据集变量
|
||||
iconSize:"undefined",
|
||||
// 图标大小 undefined，lg,sm
|
||||
icons:"icons",
|
||||
//自定义图标
|
||||
filterControl:false,
|
||||
//开启列筛选( TBD 选择式筛选不能正确显示 ，且与搜索功能有些冲突，暂不开启）
|
||||
groupBy:false,
|
||||
//分组
|
||||
groupByField: "des",
|
||||
// groupByField: ["des","id"],
|
||||
// 按指定字段分组
|
||||
showMultiSort:true,
|
||||
// sortPriority:"sortPriority",
|
||||
//高级筛选（默认筛选条件设置项有问题，暂不设置）
|
||||
showPrint:true,
|
||||
// printStyles:['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css'],
|
||||
//打印及配置
|
||||
reorderableColumns:true,
|
||||
//列排序
|
||||
useRowAttrFunc:true,
|
||||
reorderableRows:true,
|
||||
//行排序
|
||||
resizable:true,
|
||||
// 列宽调整
|
||||
stickyHeader: true,
|
||||
stickyHeaderOffsetLeft: parseInt($('body').css('padding-left'), 10),
|
||||
stickyHeaderOffsetRight: parseInt($('body').css('padding-right'), 10),
|
||||
// 固定表头
|
||||
rememberOrder:false,
|
||||
//记住排序 TBD 仅列标题记录了，暂不开启
|
||||
|
||||
// treeShowField: 'title',
|
||||
// parentIdField: 'pcat_id',
|
||||
//树形表 TBD 未调试完成
|
||||
editable:true,
|
||||
//表格可编辑
|
||||
cookie:true,
|
||||
cookieIdTable:'NewsCatListTable',
|
||||
// COOKIE缓存
|
||||
keyEvents: true,
|
||||
}
|
||||
|
||||
function getIdSelections() {
|
||||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||||
return row.id
|
||||
})
|
||||
}
|
||||
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.state = $.inArray(row.id, selections) !== -1
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
function test(index) {
|
||||
$table.bootstrapTable('toggleDetailView', index);
|
||||
}
|
||||
|
||||
window.operateEvents = {
|
||||
'click .like': function (e, value, row, index) {
|
||||
console.log(e)
|
||||
console.log(value)
|
||||
console.log(row)
|
||||
console.log(index)
|
||||
alert('You click like action, row: ' + JSON.stringify(row))
|
||||
},
|
||||
'click .remove': function (e, value, row, index) {
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: [row.id]
|
||||
})
|
||||
},
|
||||
'click .save': function (e, value, row, index) {
|
||||
saveData(datasaveUrl,row)
|
||||
},
|
||||
'click .editable-click':function (e, value, row, index) {
|
||||
console.log('要编辑')
|
||||
},
|
||||
}
|
||||
|
||||
//单元格编辑操作
|
||||
function titleEditor(value,row,index){
|
||||
return [
|
||||
'<a class="operateIcon like" onclick="test(this)" title="Like">',
|
||||
'<i class="fa fa-heart"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon view" onclick="test('+index+')" title="浏览">',
|
||||
'<i class="fa fa-eye"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon save" href="javascript:void(0)" title="Save">',
|
||||
'<i class="fa fa-save"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon remove" href="javascript:void(0)" title="Remove">',
|
||||
'<i class="fa fa-trash"></i>',
|
||||
'</a>'
|
||||
].join('')
|
||||
}
|
||||
|
||||
// 各种格式化操作
|
||||
//操作动作列
|
||||
function operateFormatter(value, row, index) {
|
||||
return [
|
||||
'<a class="operateIcon like" onclick="test(this)" title="Like">',
|
||||
'<i class="fa fa-heart"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon view" onclick="test('+index+')" title="浏览">',
|
||||
'<i class="fa fa-eye"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon save" href="javascript:void(0)" title="Save">',
|
||||
'<i class="fa fa-save"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon remove" href="javascript:void(0)" title="Remove">',
|
||||
'<i class="fa fa-trash"></i>',
|
||||
'</a>'
|
||||
].join('')
|
||||
}
|
||||
//搜索匹配项高亮
|
||||
function customSearchFormatter(value, searchText){
|
||||
console.log(searchText)
|
||||
return value.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>')
|
||||
}
|
||||
// 行内容格式化 卡片视图（仅对当前行生效）
|
||||
function detailFormatter(index, row) {
|
||||
var html = []
|
||||
$.each(row, function (key, value) {
|
||||
html.push('<p><kbd>' + key + ':</kbd> ' + value + '</p>')
|
||||
})
|
||||
return html.join('')
|
||||
}
|
||||
|
||||
// 单元格格式化操作 TBD，根据具体业务需要再作更改
|
||||
function indexFormatter(value, row, index) {
|
||||
return index+1;
|
||||
}
|
||||
function stateFormatter(value, row, index) {
|
||||
if (index === 2) {
|
||||
return {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
if (index === 1) {
|
||||
return {
|
||||
disabled: true,
|
||||
checked: true
|
||||
//指定选中
|
||||
}
|
||||
}
|
||||
return value
|
||||
}
|
||||
function titleFormatter(value, row) {
|
||||
var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-star-and-crescent'
|
||||
return '<i class="fa ' + icon + '"></i> ' + value
|
||||
}
|
||||
|
||||
function priceFormatter(value) {
|
||||
// 16777215 == ffffff in decimal
|
||||
var color = '#' + Math.floor(Math.random() * 6777215).toString(16)
|
||||
return '<div style="color: ' + color + '">' +
|
||||
'<i class="fa fa-dollar-sign"></i>' +
|
||||
value.substring(1) +
|
||||
'</div>'
|
||||
}
|
||||
|
||||
//表格底统计格式化操作
|
||||
function CountTitleFormatter(){
|
||||
return '总计'
|
||||
}
|
||||
function TextCountFormatter() {
|
||||
return ''
|
||||
}
|
||||
function PriceCountFormatter(data) {
|
||||
var field = this.field
|
||||
return '$' + data.map(function (row) {
|
||||
return +row[field].substring(1)
|
||||
}).reduce(function (sum, i) {
|
||||
return sum + i
|
||||
}, 0)
|
||||
}
|
||||
function NumCountFormatter(data) {
|
||||
return data.length
|
||||
}
|
||||
|
||||
//表格样式
|
||||
function cellStyle(value, row, index) {
|
||||
var classes = [
|
||||
'bg-blue',
|
||||
'bg-green',
|
||||
'bg-orange',
|
||||
'bg-yellow',
|
||||
'bg-red'
|
||||
]
|
||||
|
||||
if (index % 2 === 0 && index / 2 < classes.length) {
|
||||
return {
|
||||
classes: classes[index / 2]
|
||||
}
|
||||
}
|
||||
return {
|
||||
css: {
|
||||
color: 'blue'
|
||||
}
|
||||
}
|
||||
}
|
||||
function footerStyle(column) {
|
||||
return {
|
||||
id: {
|
||||
classes: 'uppercase'
|
||||
},
|
||||
name: {
|
||||
css: {'font-weight': 'normal'}
|
||||
},
|
||||
price: {
|
||||
css: {color: 'red'}
|
||||
}
|
||||
}[column.field]
|
||||
}
|
||||
function headerStyle(column) {
|
||||
return {
|
||||
id: {
|
||||
classes: 'uppercase'
|
||||
},
|
||||
title: {
|
||||
css: {background: 'yellow'}
|
||||
},
|
||||
des: {
|
||||
css: {color: 'red'}
|
||||
}
|
||||
}[column.field]
|
||||
}
|
||||
|
||||
//toolbar按钮操作
|
||||
//注入自定义按钮
|
||||
function Buttons () {
|
||||
return {
|
||||
btnAdd: {
|
||||
text: '新增一行',
|
||||
icon: 'bi-plus',
|
||||
event: function () {
|
||||
alert('将添加新一行数据')
|
||||
},
|
||||
attributes: {
|
||||
title: '新增一行数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 复合筛选
|
||||
$('#filterBy').click(function () {
|
||||
var filterAlgorithm = $('[name="filterAlgorithm"]').val()
|
||||
|
||||
$table.bootstrapTable('refreshOptions', {
|
||||
filterOptions: {
|
||||
filterAlgorithm: filterAlgorithm
|
||||
}
|
||||
})
|
||||
|
||||
$table.bootstrapTable('filterBy', {
|
||||
id: 3,
|
||||
title: '价格'
|
||||
})
|
||||
})
|
||||
// 保存编辑后的数据 TBD
|
||||
$table.on('editable-save.bs.table', function(e, field, row, oldValue, $el) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "your_update_url",
|
||||
data: {name: row.name, price: row.price, id: row.id},
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
// 处理服务器响应
|
||||
},
|
||||
error: function(response) {
|
||||
// 处理错误情况
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 更新表格参数 TBD 未调试
|
||||
function refreshTable(key,value){
|
||||
$table.bootstrapTable('refreshOptions', {
|
||||
key: value
|
||||
})
|
||||
}
|
||||
// 表格初始化
|
||||
function initTable() {
|
||||
$table.bootstrapTable('destroy').bootstrapTable(options)
|
||||
$table.on('check.bs.table uncheck.bs.table ' +
|
||||
'check-all.bs.table uncheck-all.bs.table',
|
||||
function () {
|
||||
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
|
||||
|
||||
// save your data, here just save the current page
|
||||
selections = getIdSelections()
|
||||
// push or splice the selections if you want to save all data selections
|
||||
})
|
||||
$table.on('all.bs.table', function (e, name, args) {
|
||||
// console.log(name, args)
|
||||
})
|
||||
$remove.click(function () {
|
||||
var ids = getIdSelections()
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: ids
|
||||
})
|
||||
$remove.prop('disabled', true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格之外的方法 S
|
||||
// 网络获取数据
|
||||
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));
|
||||
}
|
||||
//保存数据
|
||||
function saveData(url,data){
|
||||
data['_csrf-backend'] = "<?=$_csrf_backend ;?>";
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
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));
|
||||
}
|
||||
|
||||
// 表格之外的方法 E
|
||||
|
||||
// 启动时页面加载
|
||||
$(function() {
|
||||
initTable()
|
||||
getData(dataUrl).then(
|
||||
function(data){
|
||||
var _emptyRow = {id:''}
|
||||
$table.bootstrapTable('append',data.rows) //向表格追加数据
|
||||
$table.bootstrapTable('append',_emptyRow) //添加空白行
|
||||
$table.bootstrapTable('scrollTo','bottom') //添加完数据转至表格底
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,845 @@
|
||||
<?php
|
||||
#
|
||||
# @Author: fm453
|
||||
# @Date: 2024/7/17
|
||||
# @updated: 上午3:31
|
||||
# @Email: 1280880631@qq.com
|
||||
use yii\helpers\Html;use yii\helpers\Url;
|
||||
$_csrf_backend = Yii::$app->request->csrfToken;
|
||||
?>
|
||||
|
||||
|
||||
<!--列排序-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/dragtable/dragtable.css?v=2.0.15')?>
|
||||
<!--列排序-->
|
||||
<!--列宽调整-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-resizable-columns/jquery.resizableColumns.min.css?v=0.2.3')?>
|
||||
<!--列宽调整-->
|
||||
<!--树形表-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-treegrid/jquery.treegrid.css?v=0.3.0')?>
|
||||
<!--树形表-->
|
||||
|
||||
<!--基础样式-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap/bootstrap.min.css?v=5.3.3')?>
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap-icons/bootstrap-icons.css?v=1.11.3')?>
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/bootstrap-table.min.css?v=1.23.1')?>
|
||||
<!--基础样式-->
|
||||
|
||||
<!--行排序-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-rows/bootstrap-table-reorder-rows.css?v=1.23.1')?>
|
||||
<!--行排序-->
|
||||
<!--表头固定-->
|
||||
<?=Html::cssFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/sticky-header/bootstrap-table-sticky-header.css?v=1.23.1')?>
|
||||
<!--表头固定-->
|
||||
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery/jquery.min.js?v=3.7.1')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-ui/jquery-ui.min.js?v=1.11.1')?>
|
||||
<!--数据导出-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/tableExport/tableExport.min.js?v=1.29.0')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/tableExport/jspdf.umd.min.js?v=1.29.0')?>
|
||||
<!--数据导出-->
|
||||
<!--列排序-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/dragtable/dragtable.js?v=2.0.15')?>
|
||||
<!--列排序-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery/jquery.tablednd.min.js?v=1.0.5')?>
|
||||
<!--列宽调整-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-resizable-columns/jquery.resizableColumns.min.js?v=0.1.0')?>
|
||||
<!--列宽调整-->
|
||||
<!--树形表-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/jquery-treegrid/jquery.treegrid.min.js?v=0.3.0')?>
|
||||
<!--树形表-->
|
||||
|
||||
|
||||
<!-- 基础JS-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/dependence/bootstrap/bootstrap.bundle.min.js?v=5.3.3')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/bootstrap-table.min.js?v=1.23.1')?>
|
||||
|
||||
|
||||
<!--cookie缓存数据-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/cookie/bootstrap-table-cookie.min.js?v=1.23.1')?>
|
||||
<!--cookie缓存数据-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js?v=1.23.1')?>
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/locale/bootstrap-table-zh-CN.min.js?v=1.23.1')?>
|
||||
|
||||
<!-- 基础JS-->
|
||||
|
||||
|
||||
|
||||
<!--表数据导出-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/export/bootstrap-table-export.min.js?v=1.23.1')?>
|
||||
<!--表数据导出-->
|
||||
<!--列筛选过滤-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/filter-control/bootstrap-table-filter-control.min.js?v=1.23.1')?>
|
||||
<!--列筛选过滤-->
|
||||
<!--行分组-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/group-by-v2/bootstrap-table-group-by.min.js?v=1.23.1')?>
|
||||
<!--行分组-->
|
||||
<!--复合排序-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/multiple-sort/bootstrap-table-multiple-sort.js?v=1.23.1')?>
|
||||
<!--复合排序-->
|
||||
<!--表格打印-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/print/bootstrap-table-print.min.js?v=1.23.1')?>
|
||||
<!--表格打印-->
|
||||
<!--列排序-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-columns/bootstrap-table-reorder-columns.min.js?v=1.23.1')?>
|
||||
<!--列排序-->
|
||||
<!--行排序-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/reorder-rows/bootstrap-table-reorder-rows.min.js?v=1.23.1')?>
|
||||
<!--行排序-->
|
||||
<!--列宽调整-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/resizable/bootstrap-table-resizable.min.js?v=1.23.1')?>
|
||||
<!--列宽调整-->
|
||||
<!--表头固定-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/sticky-header/bootstrap-table-sticky-header.min.js?v=1.23.1')?>
|
||||
<!--表头固定-->
|
||||
<!--高级搜索-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/toolbar/bootstrap-table-toolbar.min.js?v=1.23.1')?>
|
||||
<!--高级搜索-->
|
||||
<!--树形表-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/treegrid/bootstrap-table-treegrid.min.js?v=1.23.1')?>
|
||||
<!--树形表-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/addrbar/bootstrap-table-addrbar.min.js?v=1.23.1')?>
|
||||
<!--表格可编辑-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/editable/bootstrap-table-editable.js?v=1.23.1')?>
|
||||
<!--表格可编辑-->
|
||||
<!--绑定键盘事件监听-->
|
||||
<?=Html::jsFile('@web/js/plugins/bootstrap-table-V1.23.1/extensions/key-events/bootstrap-table-key-events.min.js?v=1.23.1')?>
|
||||
<!--绑定键盘事件监听-->
|
||||
|
||||
<style>
|
||||
.select{
|
||||
width: 100%;
|
||||
}
|
||||
.operateIcon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
td.success {
|
||||
background: green;
|
||||
color: white;
|
||||
}
|
||||
#forTable {
|
||||
width:98%;
|
||||
padding-left:1%;
|
||||
}
|
||||
</style>
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
|
||||
<div class="col-sm-12" id="forTable">
|
||||
<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 class="btn-group">
|
||||
<select id="select" class="form-control" name="filterAlgorithm">
|
||||
<option value="and" selected>全部符合</option>
|
||||
<option value="or">满足任一</option>
|
||||
</select>
|
||||
<button class="btn btn-secondary" id="filterBy" style="width:80px;">筛选</button>
|
||||
</div>
|
||||
</div>
|
||||
<table id="table">
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var $table = $('#table')
|
||||
var $remove = $('#remove')
|
||||
var $add = $('#add')
|
||||
var selections = []
|
||||
const dataUrl = "<?=Url::toRoute(['json'])?>" //获取数据的链接
|
||||
const dataSaveUrl = "<?=Url::toRoute(['save'])?>" //保存数据的链接
|
||||
var icons = {
|
||||
detailOpen:"bi-toggle-on",
|
||||
detailClose:"bi-toggle-off",
|
||||
advancedSearchIcon: 'bi-search',
|
||||
//bi-*或fa-*，取决于图标前缀配置
|
||||
}
|
||||
var sortPriority = [{"sortName": "title","sortOrder":"desc"},{"sortName":"des","sortOrder":"desc"}]
|
||||
|
||||
var columns2 = [
|
||||
[
|
||||
{
|
||||
colspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
title: '选择'
|
||||
},
|
||||
{
|
||||
colspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
title: '详情'
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'options',
|
||||
rowspan: 2,
|
||||
class: 'success',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
clickToSelect:false,
|
||||
formatter: operateFormatter,
|
||||
footerFormatter: TextCountFormatter,
|
||||
events: 'operateEvents',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
field: 'state',
|
||||
checkbox: true,
|
||||
rowspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:stateFormatter,
|
||||
footerFormatter:"CountTitleFormatter",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
field: 'id',
|
||||
rowspan: 2,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:20,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: NumCountFormatter,
|
||||
searchable:false
|
||||
}
|
||||
],
|
||||
[
|
||||
{
|
||||
title: '标题',
|
||||
field: 'title',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:120,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
editable: {
|
||||
type: 'text',
|
||||
title: 'Enter Name',
|
||||
validate: function(value) {
|
||||
if (!value) {
|
||||
return 'The name is required';
|
||||
}
|
||||
}
|
||||
},
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"input",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
field: 'des',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
]
|
||||
]
|
||||
|
||||
var columns = [
|
||||
{
|
||||
align: 'left',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
style:'width:15px',
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:indexFormatter,
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
field: 'state',
|
||||
checkbox: true,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
width:10,
|
||||
widthUnit:"px",
|
||||
escape:true,
|
||||
//忽略该列的传值
|
||||
formatter:stateFormatter,
|
||||
footerFormatter:"CountTitleFormatter",
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: 'ID',
|
||||
field: 'id',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:20,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: NumCountFormatter,
|
||||
searchable:false
|
||||
},
|
||||
{
|
||||
title: '标题',
|
||||
field: 'title',
|
||||
rowspan: 1,
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
width:120,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
editable:titleEditor,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"input",
|
||||
searchable:true
|
||||
},
|
||||
{
|
||||
title: '代码',
|
||||
field: 'des',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: true,
|
||||
editable:$.fn.editableTable,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
footerFormatter: TextCountFormatter,
|
||||
searchHighlightFormatter:customSearchFormatter,
|
||||
titleTooltip:'英文简写的代码，后期用于权限判断等场景',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:true
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
field: 'options',
|
||||
// class: 'success',
|
||||
align: 'center',
|
||||
valign: 'middle',
|
||||
sortable: false,
|
||||
width:80,
|
||||
widthUnit:"px",
|
||||
halign: 'left',
|
||||
clickToSelect:false,
|
||||
formatter: operateFormatter,
|
||||
footerFormatter: TextCountFormatter,
|
||||
events: 'operateEvents',
|
||||
visible:true,
|
||||
cellStyle:'cellStyle',
|
||||
filterControl:"select",
|
||||
searchable:false
|
||||
}
|
||||
]
|
||||
|
||||
// 定义表格操作
|
||||
const options = {
|
||||
// locale:"zh-CN",
|
||||
//中文(直接JS添加了中文引用时可以不用设置
|
||||
toolbar:"#toolbar",
|
||||
//指定工具栏
|
||||
autoRefresh:true,
|
||||
//自动刷新
|
||||
columns:columns,
|
||||
//定义表列标题
|
||||
showColumns: true,
|
||||
//列标题筛选
|
||||
showColumnsToggleAll:true,
|
||||
//一键筛选全部列
|
||||
showColumnsSearch:true,
|
||||
//筛选列时可搜索列名
|
||||
showRefresh: true,
|
||||
//刷新
|
||||
showToggle: true,
|
||||
//切换卡片视图
|
||||
showExport:true,
|
||||
exportTypes:['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'pdf'],
|
||||
//导出(TBD PDF导出时中文乱码，待修正）
|
||||
search: true,
|
||||
//搜索
|
||||
showSearchClearButton:true,
|
||||
//搜索框可清空
|
||||
showSearchButton:false,
|
||||
// 显示搜索图标
|
||||
searchHighlight:true,
|
||||
//高亮搜索结果
|
||||
visibleSearch:true,
|
||||
//只在可视单元格内搜索
|
||||
advancedSearch:true,
|
||||
idTable:"advancedTable",
|
||||
//高级搜索
|
||||
showFullscreen:true,
|
||||
// 全屏
|
||||
addrbar: true,
|
||||
//地址栏 TBD 未调试
|
||||
// showHeader:false,
|
||||
//关闭表头列标题
|
||||
headerStyle:"headerStyle",
|
||||
//表头样式定义函数
|
||||
showFooter:true,
|
||||
//显示表格底部
|
||||
footerStyle:"footerStyle",
|
||||
//表格底部风格定义函数
|
||||
pagination:false,
|
||||
//分页
|
||||
showPaginationSwitch:true,
|
||||
//分页切换
|
||||
clickToSelect:false,
|
||||
//行点击即选中
|
||||
|
||||
responseHandler:"responseHandler",
|
||||
//获取数据的后续响应操作
|
||||
buttonsClass:"secondary",
|
||||
//按钮样式（secondary，default,primary,warning,danger,success……）
|
||||
detailView:true,
|
||||
detailViewIcon:false,
|
||||
showDetail:false,
|
||||
//行首添加显示详情按钮（图标必须false,否则会在表首添加1列；开启列拖动排序时，需要禁用该项）
|
||||
detailFormatter:"detailFormatter",
|
||||
//卡片视图格式化操作
|
||||
|
||||
idField: 'id',
|
||||
//指定ID列
|
||||
buttons:'Buttons',
|
||||
// 添加自定义按钮
|
||||
showButtonText:false,
|
||||
//显示按钮文字
|
||||
// singleSelect:true,
|
||||
//设置仅单选
|
||||
theadClasses:"thead-dark",
|
||||
//表头样式(thead-light,thead-dark) TBD 未调试
|
||||
sortClass:"table-active",
|
||||
//排序列的样式
|
||||
sortReset:true,
|
||||
// 在第三次点击的时候重置排序
|
||||
totalField:"total",
|
||||
dataField:"rows",
|
||||
//仅在设置了直接从URL取数据时有效，总数变量、数据集变量
|
||||
iconSize:"undefined",
|
||||
// 图标大小 undefined，lg,sm
|
||||
icons:"icons",
|
||||
//自定义图标
|
||||
filterControl:false,
|
||||
//开启列筛选( TBD 选择式筛选不能正确显示 ，且与搜索功能有些冲突，暂不开启）
|
||||
groupBy:false,
|
||||
//分组
|
||||
groupByField: "des",
|
||||
// groupByField: ["des","id"],
|
||||
// 按指定字段分组
|
||||
showMultiSort:true,
|
||||
// sortPriority:"sortPriority",
|
||||
//高级筛选（默认筛选条件设置项有问题，暂不设置）
|
||||
showPrint:true,
|
||||
// printStyles:['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css'],
|
||||
//打印及配置
|
||||
reorderableColumns:true,
|
||||
//列排序
|
||||
useRowAttrFunc:true,
|
||||
reorderableRows:true,
|
||||
//行排序
|
||||
resizable:true,
|
||||
// 列宽调整
|
||||
stickyHeader: true,
|
||||
stickyHeaderOffsetLeft: parseInt($('body').css('padding-left'), 10),
|
||||
stickyHeaderOffsetRight: parseInt($('body').css('padding-right'), 10),
|
||||
// 固定表头
|
||||
rememberOrder:false,
|
||||
//记住排序 TBD 仅列标题记录了，暂不开启
|
||||
|
||||
// treeShowField: 'title',
|
||||
// parentIdField: 'pcat_id',
|
||||
//树形表 TBD 未调试完成
|
||||
editable:true,
|
||||
//表格可编辑
|
||||
cookie:true,
|
||||
cookieIdTable:'NewsCatListTable',
|
||||
// COOKIE缓存
|
||||
keyEvents: true,
|
||||
}
|
||||
|
||||
function getIdSelections() {
|
||||
return $.map($table.bootstrapTable('getSelections'), function (row) {
|
||||
return row.id
|
||||
})
|
||||
}
|
||||
|
||||
function responseHandler(res) {
|
||||
$.each(res.rows, function (i, row) {
|
||||
row.state = $.inArray(row.id, selections) !== -1
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
function test(index) {
|
||||
$table.bootstrapTable('toggleDetailView', index);
|
||||
}
|
||||
|
||||
window.operateEvents = {
|
||||
'click .like': function (e, value, row, index) {
|
||||
console.log(e)
|
||||
console.log(value)
|
||||
console.log(row)
|
||||
console.log(index)
|
||||
alert('You click like action, row: ' + JSON.stringify(row))
|
||||
},
|
||||
'click .remove': function (e, value, row, index) {
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: [row.id]
|
||||
})
|
||||
},
|
||||
'click .save': function (e, value, row, index) {
|
||||
saveData(datasaveUrl,row)
|
||||
},
|
||||
'click .editable-click':function (e, value, row, index) {
|
||||
console.log('要编辑')
|
||||
},
|
||||
}
|
||||
|
||||
//单元格编辑操作
|
||||
function titleEditor(value,row,index){
|
||||
let options = {
|
||||
"url": dataSaveUrl,
|
||||
"callback": function(sValue, y) {
|
||||
let aPos = DTable.fnGetPosition(this);
|
||||
DTable.fnUpdate(sValue, aPos[0], aPos[1])
|
||||
},
|
||||
"submitdata": function(value, settings) {
|
||||
return {
|
||||
"row_id": this.parentNode.getAttribute("id"),
|
||||
"column": DTable.fnGetPosition(this)[2]
|
||||
}
|
||||
},
|
||||
"width": "90%",
|
||||
"height": "100%"
|
||||
}
|
||||
return $.fn.editableTable(options);
|
||||
}
|
||||
|
||||
// 各种格式化操作
|
||||
//操作动作列
|
||||
function operateFormatter(value, row, index) {
|
||||
return [
|
||||
'<a class="operateIcon like" onclick="test(this)" title="Like">',
|
||||
'<i class="fa fa-heart"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon view" onclick="test('+index+')" title="浏览">',
|
||||
'<i class="fa fa-eye"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon save" href="javascript:void(0)" title="Save">',
|
||||
'<i class="fa fa-save"></i>',
|
||||
'</a> ',
|
||||
'<a class="operateIcon remove" href="javascript:void(0)" title="Remove">',
|
||||
'<i class="fa fa-trash"></i>',
|
||||
'</a>'
|
||||
].join('')
|
||||
}
|
||||
//搜索匹配项高亮
|
||||
function customSearchFormatter(value, searchText){
|
||||
console.log(searchText)
|
||||
return value.toString().replace(new RegExp('(' + searchText + ')', 'gim'), '<span style="background-color: pink;border: 1px solid red;border-radius:90px;padding:4px">$1</span>')
|
||||
}
|
||||
// 行内容格式化 卡片视图（仅对当前行生效）
|
||||
function detailFormatter(index, row) {
|
||||
var html = []
|
||||
$.each(row, function (key, value) {
|
||||
html.push('<p><kbd>' + key + ':</kbd> ' + value + '</p>')
|
||||
})
|
||||
return html.join('')
|
||||
}
|
||||
|
||||
// 单元格格式化操作 TBD，根据具体业务需要再作更改
|
||||
function indexFormatter(value, row, index) {
|
||||
return index+1;
|
||||
}
|
||||
function stateFormatter(value, row, index) {
|
||||
if (index === 2) {
|
||||
return {
|
||||
disabled: true
|
||||
}
|
||||
}
|
||||
if (index === 1) {
|
||||
return {
|
||||
disabled: true,
|
||||
checked: true
|
||||
//指定选中
|
||||
}
|
||||
}
|
||||
return value
|
||||
}
|
||||
function titleFormatter(value, row) {
|
||||
var icon = row.id % 2 === 0 ? 'fa-star' : 'fa-star-and-crescent'
|
||||
return '<i class="fa ' + icon + '"></i> ' + value
|
||||
}
|
||||
|
||||
function priceFormatter(value) {
|
||||
// 16777215 == ffffff in decimal
|
||||
var color = '#' + Math.floor(Math.random() * 6777215).toString(16)
|
||||
return '<div style="color: ' + color + '">' +
|
||||
'<i class="fa fa-dollar-sign"></i>' +
|
||||
value.substring(1) +
|
||||
'</div>'
|
||||
}
|
||||
|
||||
//表格底统计格式化操作
|
||||
function CountTitleFormatter(){
|
||||
return '总计'
|
||||
}
|
||||
function TextCountFormatter() {
|
||||
return ''
|
||||
}
|
||||
function PriceCountFormatter(data) {
|
||||
var field = this.field
|
||||
return '$' + data.map(function (row) {
|
||||
return +row[field].substring(1)
|
||||
}).reduce(function (sum, i) {
|
||||
return sum + i
|
||||
}, 0)
|
||||
}
|
||||
function NumCountFormatter(data) {
|
||||
return data.length
|
||||
}
|
||||
|
||||
//表格样式
|
||||
function cellStyle(value, row, index) {
|
||||
var classes = [
|
||||
'bg-blue',
|
||||
'bg-green',
|
||||
'bg-orange',
|
||||
'bg-yellow',
|
||||
'bg-red'
|
||||
]
|
||||
|
||||
if (index % 2 === 0 && index / 2 < classes.length) {
|
||||
return {
|
||||
classes: classes[index / 2]
|
||||
}
|
||||
}
|
||||
return {
|
||||
css: {
|
||||
color: 'blue'
|
||||
}
|
||||
}
|
||||
}
|
||||
function footerStyle(column) {
|
||||
return {
|
||||
id: {
|
||||
classes: 'uppercase'
|
||||
},
|
||||
name: {
|
||||
css: {'font-weight': 'normal'}
|
||||
},
|
||||
price: {
|
||||
css: {color: 'red'}
|
||||
}
|
||||
}[column.field]
|
||||
}
|
||||
function headerStyle(column) {
|
||||
return {
|
||||
id: {
|
||||
classes: 'uppercase'
|
||||
},
|
||||
title: {
|
||||
css: {background: 'yellow'}
|
||||
},
|
||||
des: {
|
||||
css: {color: 'red'}
|
||||
}
|
||||
}[column.field]
|
||||
}
|
||||
|
||||
//toolbar按钮操作
|
||||
//注入自定义按钮
|
||||
function Buttons () {
|
||||
return {
|
||||
btnAdd: {
|
||||
text: '新增一行',
|
||||
icon: 'bi-plus',
|
||||
event: function () {
|
||||
alert('将添加新一行数据')
|
||||
},
|
||||
attributes: {
|
||||
title: '新增一行数据'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 复合筛选
|
||||
$('#filterBy').click(function () {
|
||||
var filterAlgorithm = $('[name="filterAlgorithm"]').val()
|
||||
|
||||
$table.bootstrapTable('refreshOptions', {
|
||||
filterOptions: {
|
||||
filterAlgorithm: filterAlgorithm
|
||||
}
|
||||
})
|
||||
|
||||
$table.bootstrapTable('filterBy', {
|
||||
id: 3,
|
||||
title: '价格'
|
||||
})
|
||||
})
|
||||
// 保存编辑后的数据 TBD
|
||||
$table.on('editable-save.bs.table', function(e, field, row, oldValue, $el) {
|
||||
$.ajax({
|
||||
type: "POST",
|
||||
url: "your_update_url",
|
||||
data: {name: row.name, price: row.price, id: row.id},
|
||||
dataType: "json",
|
||||
success: function(response) {
|
||||
// 处理服务器响应
|
||||
},
|
||||
error: function(response) {
|
||||
// 处理错误情况
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 更新表格参数 TBD 未调试
|
||||
function refreshTable(key,value){
|
||||
$table.bootstrapTable('refreshOptions', {
|
||||
key: value
|
||||
})
|
||||
}
|
||||
// 表格初始化
|
||||
function initTable() {
|
||||
$table.bootstrapTable('destroy').bootstrapTable(options)
|
||||
$table.on('check.bs.table uncheck.bs.table ' +
|
||||
'check-all.bs.table uncheck-all.bs.table',
|
||||
function () {
|
||||
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
|
||||
|
||||
// save your data, here just save the current page
|
||||
selections = getIdSelections()
|
||||
// push or splice the selections if you want to save all data selections
|
||||
})
|
||||
$table.on('all.bs.table', function (e, name, args) {
|
||||
// console.log(name, args)
|
||||
})
|
||||
$remove.click(function () {
|
||||
var ids = getIdSelections()
|
||||
$table.bootstrapTable('remove', {
|
||||
field: 'id',
|
||||
values: ids
|
||||
})
|
||||
$remove.prop('disabled', true)
|
||||
})
|
||||
}
|
||||
|
||||
// 表格之外的方法 S
|
||||
// 网络获取数据
|
||||
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));
|
||||
}
|
||||
//保存数据
|
||||
function saveData(url,data){
|
||||
data['_csrf-backend'] = "<?=$_csrf_backend ;?>";
|
||||
|
||||
return fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
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));
|
||||
}
|
||||
|
||||
// 表格之外的方法 E
|
||||
|
||||
// 启动时页面加载
|
||||
$(function() {
|
||||
initTable()
|
||||
getData(dataUrl).then(
|
||||
function(data){
|
||||
var _emptyRow = {id:''}
|
||||
$table.bootstrapTable('append',data.rows) //向表格追加数据
|
||||
$table.bootstrapTable('append',_emptyRow) //添加空白行
|
||||
$table.bootstrapTable('scrollTo','bottom') //添加完数据转至表格底
|
||||
}
|
||||
)
|
||||
})
|
||||
</script>
|
||||
@@ -0,0 +1,193 @@
|
||||
<?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>
|
||||
@@ -0,0 +1,120 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user