写完一个计算机信息录入的页面后，用户开始使用了。
为了方便用户快捷录入，用户如果选择某一类型的计算机比如联想ThinkCentre M7131z的计算机，那么程序应该将这个型号计算机的出厂类型、生产日期、生产商、CPU信息、显卡信息、声卡信息、内存大小、固态硬盘大小、机械硬盘大小等一起提取出来并填入。如果信息有变化（升级或者维修更换），可以修改。
想着很简单，以为和C#一样可以快快地实现，昨天晚上给用户说很快就可以让他们用上这个功能。他们觉得挺好，为他们着想了，这样他们省事多了。
结果整个白天都在折腾这个破玩意，唉！悲催，苦逼的低端！
踩坑⑴
建完字典表，打算使用数据测试一下，就在MS SQL Server里直接编辑了，在录入计算机型号的时候，图省事，直接在网页里拷贝了型号名称，黏贴到MS SQL Server的数据库表的编辑框中，结果数据死活不出来，仙人板板，明明数据都是对的，可就是不出结果，程序也不报错，折腾了半个多小时，后来直接提取原字段内容才发现，复制网页内容时有回车键，可是在MS SQL Server的数据库表的编辑框中看不见。
踩坑⑵
写程序我大部分都是复制与黏贴，把写过的代码复制过来，略微改一下，尽快完成工作，改进和提高是后面的事情。
我做过父窗体与子窗体的参数传递，比如在做数据修改的时候，需要将原始数据进行保留，在提交修改的时候，与原数据一一进行对比，改动了才提交修改，没有改动的就不用提交修改。
在《LayUI⑵：下拉列表的常用操作》中，我记录了这样的做法，是可以正常使用的。
今天也是这样做，结果初始化不成功。
想法：用户点击某一个标签，弹出相应的窗体选择框，从数据库中提取相应的数值进行选择。
我还是像以前那样，在子页面中建一个初始化函数init(selectName)，然后在父页面中调用这个函数进行参数传递，可是结果却不出来，参数传递是正常的，跟踪才发现原来这个函数是在最后才执行，所以导致了从数据库提取不到正确的参数。
即在子页面中声明了变量，比如：
let selectName;
function init(src){
selectName=src;
}你在父页面里调用：
window["layui-layer-iframe" + index].init('出厂类型');参数是传递进去了，可是后面的代码是先于这个函数执行的，也就没有得到selectName的传递值。
也不想换其他的参数传递方法了，就让从数据库提取数据延迟500ms，这样数据才提取成功。
踩坑⑶
界面想做得略微好看一点，就想做下拉框，没找到合适的LayUI下拉框，想用Input框和下拉框组合，有点麻烦，就想在录入框旁边放个按钮，结果界面乱了，无奈，只能使用标签点击，就是标签点击后出现一个窗口让用户选择，我以为还有List组件，没发现，时间紧就使用了表格。
后面仔细看一下拉框，是否有替换的方法。
实现效果：
蓝色标签可以响应点击事件。
点击【出厂类型】，出现选择框。
选择?ThinkCentre M720t-NO56，点击【确定】进行数据填充。
? 父页面代码：
//给标签出厂类型添加监听事件
var lbl_CCLX=document.getElementById("lbl_CCLX");
lbl_CCLX.addEventListener('click',function(e){
var index =layer.open({
type: 2, title: '选择-->出厂类型'
, closeBtn: 0
, area: ['600x', '500px']
, shade: 0.3
, id: 'Win_CCLX1'
// , btn: ['关闭']
, btnAlign: 'c'
, moveType: 1
, content: 'EisGetSelectSingleValue.html'
, success: function (layero,index) {
var iframe = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象
iframe.layui.form.render(); //页面渲染
window["layui-layer-iframe" + index].init('出厂类型');
}
});
}) 子页面代码：
初始化：
function init(src){
document.getElementById("selectName").value=src;
}页面的表格数据延迟加载：
setTimeout(function(){
table.render({
elem: '#currentTableId',
url: 'EisGetSelectSingleValue.php',
cols: [[
{type: "radio", width: 40},
{field: 'C02', width: 200, align:'left',title: '选项列表', sort: true}
]],
method:'POST',
where:{"C01":document.getElementById("selectName").value},
page: false,
skin: 'line',
done:function(data){
$(this.elem).next().find(".layui-table-header").attr('class',"layui-hide layui-table-header");
}
});
},500);监听响应，根据不同参数提取相应的数据进行填充。
form.on('submit(saveBtn)', function (data) {
if(document.getElementById("selectName").value=='出厂类型'){
//出厂类型
window.parent.layui.jquery('#C04').val(selectItem);
//CPU
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"CPU"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C06').val(data);
}
});
//显卡
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"显卡"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C10').val(data);
}
});
//声卡
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"声卡"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C11').val(data);
}
});
//内存大小
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"内存"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C07').val(parseInt(data));
}
});
//固态硬盘大小
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"固态硬盘"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C28').val(parseInt(data));
}
});
//机械硬盘大小
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"机械硬盘"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C08').val(parseInt(data));
}
});
//生产日期
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"生产日期"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C14').val(data);
window.parent.layui.form.render();
}
});
//生产商
$.ajax({
url:'EisGetUniqueValue.php',
data:{"C01":selectItem,"C02":"生产商"},
type:'POST',
dataType: 'text',
async:false,
success:function (data) {
window.parent.layui.jquery('#C15').val(data);
window.parent.layui.form.render();
}
});
}
if(document.getElementById("selectName").value=='CPU'){
window.parent.layui.jquery('#C06').val(selectItem);
}
if(document.getElementById("selectName").value=='显卡'){
window.parent.layui.jquery('#C10').val(selectItem);
}
if(document.getElementById("selectName").value=='声卡'){
window.parent.layui.jquery('#C11').val(selectItem);
}
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
})
PHP代码：
<?php
require 'DawnEisLinkConfig.php';
$C01=!empty($_POST['C01']) ? $_POST['C01'] : '';
$C02=!empty($_POST['C02']) ? $_POST['C02'] : '';
$sql = "select C03 from EisDict where C02='$C02' and C01='$C01'";
$res = $EisConn->query($sql);
$rows=$res->fetchAll(PDO::FETCH_ASSOC);
$return=$rows[0]['C03'];
echo $return;
?>