前端框架之前接触过不少，目前在用Layui比较顺手；不过也遇到不少雷和坑。这里就分享一下那些雷和坑。。首先说一下表格中有时候ID或NAME是无法取值，只能通过lay-filter指定一个name，然后获得。例如：
代码语言：javascript复制<select id="Device_Type" name="Device_Type" lay-filter='Device_Type'>
</select>
<script>
var postData = data.field;
var Device_Type =postData.Device_Type;//这样就获得select的值
</script>这个只是小菜一碟，我们还是直接上点主菜吧。
代码语言：javascript复制 layui.use(['jquery', 'form', 'table', 'commonTable', 'common'], function () {
var $ = layui.jquery,
form = layui.form,
table = layui.table, commonTable = layui.commonTable
common = layui.common;
var ids = new Array();
var table_data = new Array();
toolbarDemo.innerHTML = "<div>当前已经选：<input type='text' id='Cdata' style='width:500px;border:0;background-color:rgba(0,0,0,0);'/></div>";
commonTable.rendertable({
elem: '#currentTableId',
id: 'currentTableId',
url: '/QAManage/QAWX/GetGridJson',
defaultToolbar: [],
skin: 'line',
limit: 20,
search: false,
cols: [[
{ checkbox: true,width: 60, fixed: true },
{ field: 'Name', title: '姓名', width: 100, sort: true, filter: true },
{ field: 'Telnet', title: '电话', width: 160, sort: true, filter: true },
{ field: 'Memo', title: '备注', width: 180, sort: true, filter: true },
{ field: 'TypeName', title: '角色', width: 80, sort: true, filter: true
,templet: function (d) {
switch (d.TypeName) {
case "B":
return ("生产")
case "C":
return ("售后")
case "D":
return ("品管")
default:
return ("全能")
}
}
},
{
field: 'DataLevel', title: '当前状态', width: 80,
templet: function (d) {
return top.clients.dataItems["DataLevel"][d.DataLevel] == null ? "" : top.clients.dataItems["DataLevel"][d.DataLevel];
}
},
{ field: 'F_CreatorTime', title: '注册时间', width: 120, sort: true, filter: { type: 'date[yyyy/MM/dd HH:mm:ss]' } },
]],
done: function (res, curr, count) {
$('th[data-field=' 0 '] input[type="checkbox"]').prop('disabled',true);
for (var i = 0; i < res.data.length; i ) {
for (var j = 0; j < ids.length; j ) {
if (res.data[i].Id == ids[j].Id) {
res.data[i]["LAY_CHECKED"] = 'true';
var index = res.data[i]['LAY_TABLE_INDEX'];
$('.layui-table-fixed-l tr[data-index=' index '] input[type="checkbox"]').prop('checked', true);
$('.layui-table-fixed-l tr[data-index=' index '] input[type="checkbox"]').next().addClass('layui-form-checked');
}
}
}
var checkStatus = table.checkStatus('my-table');
if (checkStatus.isAll) {
$('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
$('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
}
//得到所有数据
console.log(res);
//得到当前页码
console.log(curr);
//得到数据总量
console.log(count);
}
});
table.on('checkbox(currentTableFilter)', function (obj) {
var Idata = obj.data;
console.log(obj.checked); //当前是否选中状态
console.log(obj.data); //选中行的相关数据
console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
//---------------------------------------
if (obj.checked == true) {
if (obj.type == 'one') {
ids.push(obj.data);
} else {
for (var i = 0; i < table_data.length; i ) {
ids.push(table_data[i]);
}
}
} else {
if (obj.type == 'one') {
for (var i = 0; i < ids.length; i ) {
if (ids[i].Id == obj.data.Id) {
ids.remove(i);
}
}
} else {
for (var i = 0; i < ids.length; i ) {
for (var j = 0; j < table_data.length; j ) {
if (ids[i].Id == table_data[j].Id) {
ids.remove(i);
}
}
}
}
}
var Name = "";
ids.forEach(function (item, index, arr) {
Name = item.Name "、"
});
$("#Cdata").val(Name);
//---------------------------------------
});
form.on('submit(CloseBtn)', function (data) {
var data = table.checkStatus('currentTableId').data;
if (data.length == 0) {
common.modalMsg("未选中数据", "warning");
return;
};
console.log(data)
var currentWindow = common.parentWindow();//定义父窗口
//currentWindow.Auto_STAFF(JSON.stringify(data));
currentWindow.Auto_STAFF(JSON.stringify(ids));
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);// 关闭子窗口
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
//执行搜索重载
commonTable.reloadtable({
elem: 'currentTableId',
curr: 1,
where: { keyword: data.field.txt_keyword }
});
return false;
});
wcLoading.close();
});
//------------------------------
Array.prototype.remove = function (dx) {
if (isNaN(dx) || dx > this.length) { return false; }
for (var i = 0, n = 0; i < this.length; i ) {
if (this[i] != this[dx]) {
this[n ] = this[i]
}
}
this.length -= 1
}这里就是一个Layui TABLE进行数据展示的代码片段，这里涉及到几个点：1、禁止全选。2、翻页记录。3、父子页数据传输。4、表格格式。这些你看明白没。。还有一个隐藏彩蛋。这里就不公开了。。
