layui数据表格添加删除行

{% 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">&#xe615;</i>
</button>
<button class="layui-btn add-btn" type="button"><i class="iconfont">&#xe6b9;</i>添加
</button>

<button class="layui-btn del-btn" type="button">删除
</button>

<button class="layui-btn save-btn" type="button"><i class="iconfont">&#xe655;</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 %}
posted @ 2020-11-27 15:48  程序员小艺  阅读(1302)  评论(0编辑  收藏  举报