270 lines
9.5 KiB
PHP
270 lines
9.5 KiB
PHP
<?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>
|