layui資料表格新增刪除行
阿新 • • 發佈：2020-11-27
{% extends '../../base.html' %}
{% block title %}學生列表{% endblock %}
{% block content %}
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首頁</a>
<a href="">課程管理</a>
<a>
<cite>課程列表</cite></a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
onclick="location.reload()" title="重新整理">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-body ">
<form class="layui-form layui-col-space5">
<div class="layui-inline layui-show-xs-block">
<input type="text" name="keywords" placeholder="請輸入課程名稱" autocomplete="off"
class="layui-input">
</div>
<div class="layui-inline layui-show-xs-block">
<button class="layui-btn search" type="button" data-type="reload"><i class="layui-icon"></i>
</button>
<button class="layui-btn add-btn" type="button"><i class="iconfont"></i>新增
</button>
<button class="layui-btn del-btn" type="button">刪除
</button>
<button class="layui-btn save-btn" type="button"><i class="iconfont"></i>儲存
</button>
</div>
</form>
</div>
<div class="layui-card-body ">
<table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</div>
</div>
</div>
</div>
</body>
{% verbatim %}
<script type="text/html" id="statusTpl">
{{# if(d.status == 1){ }}
正常
{{# } else { }}
禁用
{{# } }}
</script>
<script type="text/html" id="actionsTpl">
<button type="button" class="layui-btn layui-btn-xs" onclick="choicecourse('{{d.id}}')">選課</button>
</script>
{% endverbatim %}
<script>
layui.use('table', function () {
var table = layui.table;
table.render({
elem: '#test'
{#, url: '/student/course/index.html?ajax=1'#}
, data: [{}, {}, {}, {}]
{#,width: 892#}
, height: 'full'
, cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', minWidth: 80, title: 'ID', sort: true, fixed: 'left', edit: 'text'}
, {field: 'name', minWidth: 80, title: '課程名稱', edit: 'text'}
, {field: 'status', minWidth: 80, title: '狀態', edit: 'text'}
, {field: 'addtime', minWidth: 80, title: '新增時間', edit: 'text'}
, {width: 140, title: '操作', fixed: 'right', templet: '#actionsTpl', edit: 'text'}
]]
, id: 'testReload'
, limit: 30//顯示的數量
, page: false
});
var $ = layui.$, active = {
reload: function () {
var keywords = $('input[name=keywords]').val();
//執行過載
table.reload('testReload', {
page: {
curr: 1 //重新從第 1 頁開始
}
, where: {
keywords: keywords
}
});
}
};
// 搜尋
$('.search').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
$(".add-btn").click(function () {
var oldData = table.cache.testReload;
console.log(oldData);
var data1 = {};
oldData.push(data1);
console.log(oldData);
table.reload('testReload', {data: oldData});
});
$(".del-btn").click(function () {
var checkStatus = table.checkStatus('testReload');
console.log(checkStatus);
if (checkStatus.data.length < 1) {
layer.alert("請選擇一條資料操作");
return false;
} else {
cbList = table.cache.testReload;
for (var k = 0; k < checkStatus.data.length; k++) {
var _delId = checkStatus.data[k].id;
for (var i = 0; i < cbList.length; i++) {
var _id = cbList[i].id;
if (_id == _delId) {
cbList.splice(i, 1);
break;
}
}
}
table.reload("testReload", {
data: cbList,
})
}
});
$(".save-btn").click(function () {
var oldData = table.cache.testReload;
console.log(oldData);
});
//監聽單元格編輯
table.on('edit(test)', function (obj) {
var value = obj.value //得到修改後的值
, data = obj.data //得到所在行所有鍵值
, field = obj.field; //得到欄位
console.log(data);
});
});
function choicecourse(id) {
layer.confirm('確定要選此課程？', {
btn: ['確定', '取消'] //按鈕
, title: '系統提示'
}, function () {
$.post("/student/course/choicecourse.html", {id: id}, function (res) {
res = JSON.parse(res);
if (res.state == 1) {
layer.msg(res.msg, {icon: 1, time: 1000}, function () {
location.reload();
});
} else {
layer.msg(res.msg, {icon: 5, time: 1000});
}
})
}, function () {
});
}
</script>
</html>
{% endblock %}