You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

109 lines
2.7 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击单元格变色</title>
<link rel="stylesheet" href="../../../component/layui/css/layui.css" />
<link rel="stylesheet" href="../../../component/pear/css/module/toast.css" />
<style>
.layui-table-cell {
height: 50px;
line-height: 40px;
}
th {
color: #303133;
background-color: #f5f7fa;
}
</style>
</head>
<body>
<table class="layui-table" id="myTable">
</table>
<script src="../../../component/layui/layui.js"></script>
<script>
layui.extend({
toast: '../../../component/pear/module/toast' // {/}的意思即代表采用自有路径,即不跟随 base 路径
}).use(['toast'], function () {
var $ = layui.jquery;
var table = layui.table;
var toast = layui.toast
table.render({
elem: '#myTable',
url: './data.json',
where: {
page: 1,
limit: 100,
system_id: 0
},
height: 'full-60',
page: {
limit: 15
, layout: ['count', 'prev', 'page', 'next', 'skip']
, prev: "上一页"
, next: "下一页"
},
cols: [[
{ title: '序号', align: 'center', width: "10%", type: 'numbers' },
{ title: '操作人', field: 'czr', align: 'center', width: "35%" },
{ title: '操作时间', field: 'czsj', align: 'center', width: "35%" },
{ title: '小学', templet: '<input class="layui-input aabbxx">', align: 'center', width: "20%", style: 'cursor: pointer;' },
]],
// skin: 'line',
defaultToolbar: [],
done: function (res, curr, count) {
var tempVal = '';
var options = this;
// 获取当前行数据
table.getRowData = function (tableId, elem) {
var index = $(elem).closest('tr').data('index');
return table.cache[tableId][index] || {};
};
$(".aabbxx").focus(function () {
tempVal = this.value.trim();
});
$(".aabbxx").blur(function () {
var curVal = this.value.trim();
var data = table.getRowData(options.id, this);
console.log(JSON.stringify(data), curVal,options.id);
if (tempVal != curVal) {
toast.success({
// title: '提示',
message: '数据保存成功!',
position: 'topRight',
timeout: 1200,
close:false
});
}
});
}
});
});
</script>
</body>
</html>