256 lines
7.6 KiB
PHP
256 lines
7.6 KiB
PHP
<?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>
|