标签：function index Layui tr module Tab Table td data
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>预览</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
</head>
<body>
<!--取消form的按下回车自动提交问题-->
<form class="layui-form" onsubmit="return false;">
<div class="layui-form-item">
<table class="layui-table" lay-filter="demo" id="idTest"></table>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="setting">配置</a>
</script>
</div>
<input type="hidden" id="useClick">
</form>
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script src="../../../js/jquery-3.6.0.min.js"></script>
<script src="../../../js/jquery_Extend.js"></script>
<script src="../../../js/base64.js"></script>
<script>
layui.use(['form', 'layer', 'table', 'upload'], function () {
let form = layui.form
, $ = layui.$
, table = layui.table
, layer = layui.layer
, upload = layui.upload; //得到 upload 对象
//监听提交
$(document).on('click', '#btn', function () {
layer.open({
type: 2,
area: ['800px', '640px'],
fixed: false, //不固定
maxmin: true,
content: '/FengHuang/zjb/PreviewDoc'
});
});
function bindTable() {
table.render({
elem: '#idTest'
, url: '/FengHuang/zjb/moduleList'
, cols: [[
{type: 'checkbox', fixed: 'left', align: 'center'}
, {field: '', title: '序号', align: 'center', type: 'numbers', width: 80, fixed: true}
, {field: 'module_name', title: '模板名称', align: 'center'}
, {field: 'page_count', title: '分块数量[点击数字直接修改]', align: 'center', edit: "text"}
, {
field: 'need_mulu',
width: 240,
title: '生成目录',
align: 'center',
templet: function (d) {
let state = "";
if (d.need_mulu === 1) {
state = "<input type='checkbox' value='" + d.module_id + "' id='mulu' lay-filter='mulu' " +
"checked='checked' name='mulu' lay-skin='switch' lay-text='是|否' >";
} else {
state = "<input type='checkbox' value='" + d.module_id + "' id='mulu' lay-filter='mulu' " +
"name='mulu' lay-skin='switch' lay-text='是|否' >";
}
return state;
}
}
, {fixed: 'right', title: '操作', toolbar: '#barDemo', align: 'center', width: 350, fixed: 'right'}
]]
, page: false
, height: 'full'
, done: function (res) {
}
});
}
bindTable();
table.on('tool(demo)', function (obj) {
let data = obj.data;
if (obj.event === 'setting') {
let module_name = Base64.encode(data.module_name);
LocalStorageSet("module_id", data.module_id);
LocalStorageSet("module_name", module_name);
window.location = 'listModulePageInfo.html';
}
})
form.on('switch(mulu)', function (data) {
let module_id = data.value;
let need_mulu = this.checked ? '1' : '0';
$.ajax({
type: 'POST',
url: '/FengHuang/zjb/SaveModuleNeedMulu',
data: {
"need_mulu": need_mulu,
"module_id": module_id
},
success: function (msg) {
bindTable();
layer.msg('操作成功!', {icon: 1, time: 2000});
},
dataType: 'JSON',
});
});
//判断是非数字
function isNumber(val) {
let regPos = /^\d+(\.\d+)?$/; //非负浮点数
let regNeg = /^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$/; //负浮点数
if (regPos.test(val) || regNeg.test(val)) {
return true;
} else {
return false;
}
}
/*
*编辑数据表格，键盘快捷键方法。
*可跳过无编辑属性的列
*tab 右边一个单元格
*shift + tab 左边一个单元格
*enter 下一行的单元格
*shift + enter 上一行的单元格
*/
//支持tab+enter 的切换
$(document).on('keydown keyup', '.layui-input',
function (event) {
var td = $(this).parent('td'),
index = td.index(),
tr = td.parent('tr'),
isShift = $(document).data('shift'),
isKeydown = (event.type == "keydown");
switch (event.key) {
case "Shift":
$(document).data('shift', isKeydown);
break;
case "Tab":
event.preventDefault();
isKeydown && td[isShift ? 'prevAll' : 'nextAll']('[data-edit="text"]:first').click();
break;
case "Enter":
isKeydown && tr[isShift ? 'prev' : 'next']().children('td').eq(index).click();
break;
}
});
//方向键的切换
$(document).on('keydown', '.layui-table-edit', function (e) {
let td = $(this).parent('td'),
tr = td.parent('tr'),
trs = tr.parent().parent().find("tr"),
tr_index = tr.index(),
td_index = td.index(),
td_last_index = tr.find('[data-edit="text"]:last').index(),
td_first_index = tr.find('[data-edit="text"]:first').index();
switch (e.keyCode) {
case 13:
case 39:
td.nextAll('[data-edit="text"]:first').click();
if (td_index == td_last_index) {
tr.next().find('td').eq(td_first_index).click();
if (tr_index == trs.length - 1) {
trs.eq(0).find('td').eq(td_first_index).click()
}
}
setTimeout(function () {
$('.last-table-edit').select()
}, 0)
break;
case 37:
td.prevAll('[data-edit="text"]:first').click();
setTimeout(function () {
$('.last-table-edit').select()
}, 0)
break;
case 38:
tr.prev().find('td').eq(td_index).click();
setTimeout(function () {
$('.last-table-edit').select()
}, 0)
break;
case 40:
tr.next().find('td').eq(td_index).click();
setTimeout(function () {
$('.last-table-edit').select()
}, 0)
break;
}
});
table.on('edit(demo)', function (obj) {
let module_id = obj.data.module_id;
let page_count = obj.value;
//获取编辑前的值
let selector = obj.tr.selector + ' td[data-field="' + obj.field + '"] div';
let oldtext = $(selector).text();
//判断数据类型
if (!isNumber(obj.value)) {
layer.msg('请输入数字!', {icon: 2, time: 1000, shade: [0.5, '#000', true]});
// 重点 赋值
$(obj.tr.selector + ' td[data-field="' + obj.field + '"] input').val(oldtext);
} else {
$.ajax({
type: "POST",
dataType: "json",
url: "/FengHuang/zjb/savePageCount",
data: {
module_id: module_id,
page_count: page_count,
},
success: function (data) {
}
})
}
})
});
</script>
</body>
</html>
标签：function,
index,
Layui,
tr,
module,
Tab,
Table,
td,
data
From： https://www.cnblogs.com/littlehb/p/17130794.html