溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹如何使用layui加載表格，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
js方法
/**
* 頁面內彈出編輯窗口 //需要引入 layui.js layui.css文件
* @param {} title 標題 不顯示為false
* @param {} area 大小 ["400px","500px"] 或者 "400px"--->只設置寬度
* @param {} path 彈出頁面路徑
* @param {} sucFunName 執行保存操作后再彈出頁面中的保存方法名稱
* @param {} callBack 執行保存操作之后的其他操作
* @returns {}
*/
function openDetial(title, area, path, sucFunName, callBack) {
layer.open({
type: 2,
title: title, //不顯示標題欄
closeBtn: 2,
area: area,
shade: 0.8,
id: (new Date()).valueOf(), //設定一個id，防止重復彈出 時間戳1280977330748
btn: ['保存', '取消'],
btnAlign: 'r',
moveType: 1, //拖拽模式，0或者1
content: path,
yes: function (index, layero) {
var btn = layero.find('.layui-layer-btn').find('.layui-layer-btn0');
alert("-----");
try {
var _ifr = btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].contentWindow ||
btn[0].parentNode.parentNode.getElementsByClassName("layui-layer-content")[0].children[0].children[0].contentWindow;
var func = new Function('_ifr', "return _ifr." + sucFunName + "();");
var flg = func(_ifr);
if (flg == false) {
return false;
} else {
if (callBack != null) callBack();
window.location.reload();
}
} catch (ex) {
}
},
btn2: function (index, layero) {
}
});
}
//
/**
* 初始化表格及表格相關的簡單操作 //需要引入 layui.js layui.css文件
* @param {} t table參數形如 {id:'test',indexName:'ID',heigt:'full-30',url:'Account?GetTableJson|&',page:true,cols:[ { field: 'ID', title: 'ID', width: 80 },]}
* @param {} editor 編輯方法
* @param {} deltes 刪除方法
* @param {} read 查看方法
* @returns {}
*/
function createTable(t, editor, deltes, read) {
var bodys = document.getElementsByTagName("body")[0];
bodys.innerHTML += '<table class="layui-hide" id="test" lay-filter="demo"></' + 'table>' +
'<script type="text/html" id="barDemo">' +
' <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</' + 'a>' +
' <a class="layui-btn layui-btn-xs" lay-event="edit">編輯</' + 'a>' +
' <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</' + 'a>' +
'</' + 'script>';
layui.use(['laypage', 'table'], function () {
var laypage = layui.laypage, //分頁
table = layui.table; //表格
//執行一個 table 實例
table.render({
elem: '#' + (t.id || 'test'),
id: t.indexName || ID,
height: t.heigt || 'full-30',
url: t.url, //數據接口
page: t.page, //開啟分頁
cols: [
t.cols
]
});
table.on('tool(demo)', function (obj) { //注：tool是工具條事件名，test是table原始容器的屬性 lay-filter="對應的值"
var data = obj.data, //獲得當前行數據
layEvent = obj.event; //獲得 lay-event 對應的值
if (layEvent === 'detail') {
if (read != null) read(obj);
} else if (layEvent === 'del') {
layer.confirm('真的刪除行么', function (index) {
obj.del(obj); //刪除對應行（tr）的DOM結構
layer.close(index);
//向服務端發送刪除指令
if (deltes != null) deltes(obj);
});
} else if (layEvent === 'edit') {
editor(obj);
}
});
});
}調用頁面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title></title>
<link rel="stylesheet" href="../../../Publics/others/layui/css/layui.css" rel="external nofollow" media="all">
<script type="text/javascript" src="../../../FunctionJs.js"></script>
<style>
body {
margin: 10px;
}
.demo-carousel {
height: 200px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<script src="../../../Publics/others/layui/layui.js"></script>
<script src="../../../LayuiFunction.js"></script>
<script>
var addButton = '<button class=\"layui-btn layui-btn-xs\" οnclick=\'openDetial(\"新增編輯\", [\"600px\", \"550px\"], \"./editor.html\", \"ApplicationSave\", null)\'>新增</button>';
var tableObj = { id: 'test', indexName: 'ID', heigt: 'full-30', url: 'Account?action=GetTableJson', page: false,
cols: [ { field: 'ID', title: 'ID' },
{ field: 'Names', title: '名稱', width: 180 },
{ field: 'TypeName', title: '消費類型' },
{ field: 'PRICE', title: '價格' },
{ field: 'ISOUT', title: '賬目類型' },
{ field: 'Dates', title: '日期' },
{ field: 'Remark', title: '備注', width: 180 },
{ fixed: 'right', title: addButton, width: 180, align: 'center', toolbar: '#barDemo' }
] };
createTable(tableObj, function (obj) {
layer.alert('編輯行：<br>' + JSON.stringify(obj.data));
openDetial("賬單編輯", ['600px', '550px'], "./editor.html", "ApplicationSave", null);
},
function (obj) {
layer.alert('刪除行：<br>' + JSON.stringify(obj.data));
},
function(obj) {
layer.alert('查看行：<br>' + JSON.stringify(obj.data));
}
);
</script>
</body>
</html>layui是一款采用自身模塊規范編寫的前端UI框架，它遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，適合新手，并且它還提供了豐富的內置模塊，他們皆可通過模塊化的方式按需加載，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發，能夠作為PC網頁端后臺系統與前臺界面的速成開發方案。
關于如何使用layui加載表格就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
