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>
|
||||
Reference in New Issue
Block a user