shit layui & bugs
shit layui & bugs
useis not useful at all!
http://www.layui.com/demo/form.html
layui.use(["form", "layer"], function() {
let form = layui.form,
layer = layui.layer;
});
layui.use([], function() {
let form = layui.form,
layer = layui.layer;
});
layui.use("form", function() {
let form = layui.form,
layer = layui.layer;
});
layui.use("", function() {
let form = layui.form,
layer = layui.layer;
});
async & delay bug
const editProject = () => {
let reset = document.querySelector(`button[type="reset"]`);
layui.use("form", function() {
let form = layui.form,
layer = layui.layer;
// init select
console.log(`render select 1`);
form.render("select");
fetchJSON(`${FetchIP}/http/sign/roles`).then(json => {
let select = document.querySelector(`[lay-filter="project-type"]`);
let html = ``;
if (json.success) {
const obj = json.data;
let keys = Object.keys(obj);
let newObj = {};
keys.forEach(
(key, i) => {
if (key !== "Admin") {
let value = obj[key].name;
newObj[key] = value;
html += `<option value="${key}">${value}</option>`;
// html += `<option value="Complex">综合</option>`;
} else {
// no need Admin
}
}
);
// console.log(`new options =`, JSON.stringify(newObj, null, 4));
select.innerHTML = "";
select.insertAdjacentHTML(`beforeend`, html);
console.log(`render select 2`);
form.render("select");
} else {
html += `
<option value="Developer">开发</option>
<option value="Operator">配管</option>
<option value="Complex">综合</option>
`;
select.innerHTML = "";
select.insertAdjacentHTML(`beforeend`, html);
console.log(`render select 4`);
form.render("select");
}
}).catch(err => console.log(`error`, err));
form.on('submit(formDemo)', function(data) {
let {
user_name,
role,
password,
email,
} = data.field;
let query_obj = {
user_name,
role,
password
};
// filter
if (email) {
query_obj.email = email;
}
let url = `${fetchIP}/http/sign/updateuser?${encodeURIComponent(JSON.stringify(query_obj))}`;
getDatas(url).then(json => {
// loading
let loadingIndex = layer.load(1, {
time: 1*1000,
});
let resetButton = document.querySelector(`button[type="reset"]`);
setTimeout(() => {
layer.close(loadingIndex);
if (json.success) {
layer.close(modalIndex);
swal({
title: "修改服务成功!",
text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
icon: "success",
// button: "关闭",
buttons: false,
timer: 3000,
});
resetButton.click();
loadList();
} else {
swal({
title: "修改服务失败!",
text: `${json.message !== null ? json.message : "3 秒后自动关闭!"}`,
icon: "error",
// button: "关闭",
buttons: false,
timer: 3000,
});
}
}, 1000);
// reset
reset.click();
}).catch(err => console.log(`error`, err));
return false;
});
let {
user_name,
role,
// password,
email,
// role_desc,
} = jsonObj;
console.log(`user infos =`, JSON.stringify(jsonObj, null, 4));
let input_name = document.querySelector(`input[name="user_name"]`),
input_role = document.querySelector(`select[name="role"]`),
input_email = document.querySelector(`input[name="email"]`);
input_name.value = `${user_name}`;
input_name.setAttribute(`disabled`, `disabled`);
// input_name.setAttribute(`readonly`, `readonly`);
if (email) {
input_email.value = `${email}`;
}
// async & delay bug
setTimeout(() => {
input_role.value = `${role}`;
// update select
console.log(`render select 3`);
form.render("select");
}, 100);
});
};
table reload & table search
搜索
https://www.layui.com/demo/table/reload.html
https://www.layui.com/doc/modules/table.html#reload
reload: function () {
let searchValue = document.querySelector(`#demoReload`).value,
newDatas = [];
// TableDatas
// console.log(`search value =`, searchValue);
newDatas = TableDatas.filter(
(obj, i) => {
if (searchValue === obj["pro_name"]) {
return obj;
}
}
);
// console.log(`new datas =`, JSON.stringify(newDatas, null, 4));
// clear
sharpedDatas = [];
newDatas.forEach(
(obj, i) => {
let {
upgrade_id,
pro_name,
pro_type,
// send_time,
// upgrade_time,
server_name,
dep_path,
current_version,
upgradeable,
module_children,
} = obj,
operaions = "",
temp_obj = {};
// array
window.upgrade_id.push(upgrade_id);
current_version = current_version ? current_version : `--`;
let project_name = pro_name;
pro_name = `
<span title="${pro_name}" data-name="${pro_name}">${pro_name}</span>
`;
server_name = `
<span title="${server_name}">${server_name}</span>
`;
dep_path = `
<span title="${dep_path}">${dep_path}</span>
`;
operaions = `
<a href="./config-tree.html#${upgrade_id}" lay-event="config" data-uid="config" class="layui-btn layui-btn-normal layui-btn-sm" title="配置文件">
<svg class="icon" style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1029 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12292"><path d="M605.872994 924.471193 198.803835 924.471193c-62.327534 0-113.078405-50.750871-113.078405-113.077382L85.72543 313.865407c0-62.322417 50.750871-113.074312 113.078405-113.074312l407.068136 0c54.54836 0 100.221586 38.845727 110.779036 90.325192 14.616906-4.107551 29.374004-7.375991 44.301995-9.185196-14.839986-71.997778-78.710666-126.369106-155.081031-126.369106L365.855502 155.561985c10.509355-51.571562 56.183604-90.463338 110.778013-90.463338l219.657792 0c62.321394 0 113.073288 50.750871 113.073288 113.078405l0 102.164844c15.239076 0.681522 30.342052 2.62785 45.229111 5.650697l0-107.815541c0-87.302345-71.02359-158.307516-158.301376-158.307516L476.629421 19.869536c-79.504752 0-144.877645 59.21259-156.00917 135.688355L198.803835 155.557892c-87.282902 0-158.307516 71.006194-158.307516 158.307516l0 497.52738c0 87.282902 71.024613 158.306492 158.307516 158.306492l407.068136 0c68.595284 0 126.546138-44.171012 148.497079-105.256252-14.97404-2.164293-29.639041-5.567809-44.032866-9.981329C693.374884 895.495254 652.957359 924.471193 605.872994 924.471193L605.872994 924.471193zM605.872994 924.471193M176.184675 319.516104l301.065893 0 0 33.926694L176.184675 353.442798 176.184675 319.516104 176.184675 319.516104zM176.184675 319.516104M176.184675 470.272643l231.80853 0 0 33.921577L176.184675 504.19422 176.184675 470.272643 176.184675 470.272643zM176.184675 470.272643M176.184675 621.068068l231.80853 0 0 33.923624L176.184675 654.991692 176.184675 621.068068 176.184675 621.068068zM176.184675 621.068068M176.184675 771.81949l301.065893 0 0 33.921577L176.184675 805.741068 176.184675 771.81949 176.184675 771.81949zM176.184675 771.81949M963.999464 561.393967l41.478693-15.280008c5.697769-2.077312 8.655124-8.483208 6.53688-14.222933l-34.542724-93.421716c-2.073218-5.697769-8.480138-8.677637-14.223956-6.559393l-41.339524 15.261589c-5.743818 2.118244-12.678764 1.167592-15.461133-2.052752-2.78237-3.291976-8.526187-15.836687-6.008854-21.288862l18.46556-40.040948c2.558265-5.522784 0.128937-12.170181-5.3918-14.687514l-90.459245-41.720194c-5.562692-2.517333-12.145621-0.088004-14.662955 5.434779l-18.461467 40.040948c-2.563382 5.545296-8.132214 9.852392-12.368702 9.541307-4.195555-0.287549-17.226337-4.970198-19.346627-10.69048l-15.238053-41.473577c-2.166339-5.697769-8.526187-8.637728-14.270005-6.560416l-93.462648 34.474163c-5.739724 2.12336-8.655124 8.502651-6.53688 14.246469l15.285125 41.432645c2.118244 5.697769 1.191128 12.675694-2.077312 15.416108-3.227508 2.804882-15.684214 8.566096-21.246907 6.031367l-40.018436-18.46556c-5.474688-2.582825-12.104689-0.088004-14.662955 5.433756l-41.74373 90.459245c-2.558265 5.498224-0.088004 12.123109 5.3918 14.686491l40.017412 18.46556c5.563716 2.558265 9.847276 8.126075 9.537214 12.275581-0.217964 4.242627-4.988618 17.274432-10.686387 19.392676l-41.432645 15.239076c-5.697769 2.118244-8.66024 8.480138-6.53688 14.222933l34.450626 93.508697c2.077312 5.693676 8.526187 8.655124 14.180977 6.578836l41.428551-15.284101c5.742794-2.119267 12.720719-1.191128 15.461133 2.034333 2.828418 3.180436 8.568143 15.725146 6.007831 21.289885l-18.464537 39.929408c-2.559289 5.522784-0.088004 12.193717 5.3918 14.71105l90.500177 41.738613c5.567809 2.563382 12.145621 0.088004 14.710027-5.433756l18.46556-39.972387c2.517333-5.567809 8.080026-9.80532 12.276604-9.587356 4.241604 0.26913 17.22736 4.992711 19.345604 10.737552l15.285125 41.339524c2.030239 5.743818 8.480138 8.702196 14.177907 6.624884l93.50972-34.450626c5.650697-2.119267 8.655124-8.526187 6.535857-14.265912l-15.238053-41.436738c-2.12336-5.693676-1.191128-12.675694 2.030239-15.409968 3.267417-2.828418 15.767102-8.572236 21.334911-6.008854l40.018436 18.461467c5.474688 2.52245 12.104689 0.088004 14.662955-5.433756l41.696658-90.459245c2.563382-5.520737 0.088004-12.1886-5.474688-14.71105l-39.930431-18.460444c-5.567809-2.563382-9.276271-15.902178-9.276271-20.055778C953.624163 568.728002 958.25974 563.512211 963.999464 561.393967L963.999464 561.393967zM804.591895 673.364131c-57.374732 21.112853-121.023354-8.257058-142.228305-65.591881-21.112853-57.3338 8.215102-121.023354 65.594951-142.205792 57.375755-21.177322 121.024377 8.191566 142.18328 65.526389C891.254673 588.514651 861.926718 652.209322 804.591895 673.364131L804.591895 673.364131zM804.591895 673.364131" p-id="12293"></path></svg>
查看配置
</a>
<a href="./logs-tree.html#${upgrade_id}" lay-event="logs" data-uid="logs" class="layui-btn layui-btn-normal layui-btn-sm" title="查看日志">
<svg class="icon" style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="537"><path d="M831.618032 393.581714h-19.902984V297.528889c0-0.601397-0.097524-1.202794-0.170667-1.812318a15.969524 15.969524 0 0 0-3.860318-10.524444L647.858794 102.627556c-0.048762-0.048762-0.097524-0.065016-0.130032-0.113778a16.075175 16.075175 0 0 0-4.299175-3.348318 16.879746 16.879746 0 0 0-3.210158-1.349079c-0.300698-0.08127-0.568889-0.203175-0.869588-0.284444a16.278349 16.278349 0 0 0-3.730285-0.463239H242.826159c-17.936254 0-32.507937 14.587937-32.507937 32.507937v263.996952H190.415238a46.461968 46.461968 0 0 0-46.461968 46.461969v241.615238a46.470095 46.470095 0 0 0 46.461968 46.461968h19.902984v165.400381c0 17.92 14.571683 32.507937 32.507937 32.507936h536.380952c17.92 0 32.507937-14.587937 32.507937-32.507936V728.120889h19.902984a46.470095 46.470095 0 0 0 46.461968-46.461968v-241.615238a46.453841 46.453841 0 0 0-46.461968-46.461969zM242.826159 129.576635h376.539428v166.31873a16.253968 16.253968 0 0 0 16.253969 16.253968h143.587555v81.432381h-536.380952V129.576635z m334.214095 426.235936c0 72.224508-43.796317 116.028952-108.186413 116.028953-65.365333 0-103.610921-49.347048-103.61092-112.111746 0-66.031746 42.162794-115.378794 107.203047-115.378794 67.66527 0 104.594286 50.663619 104.594286 111.461587zM220.745143 668.24127V447.951238h50.005333v178.460445h87.600762v41.82146H220.745143z m558.461968 216.462222h-536.380952V728.120889h536.380952v156.582603z m14.57981-226.588444c-15.368127 5.225651-44.454603 12.409905-73.54108 12.409904-40.196063 0-69.290667-10.126222-89.559365-29.728508-20.260571-18.952127-31.378286-47.729778-31.045079-80.083301 0.325079-73.224127 53.59746-115.061841 125.838222-115.061841 28.436317 0 50.330413 5.575111 61.123048 10.792635l-10.459429 39.870984c-12.092952-5.225651-27.127873-9.476063-51.313778-9.476064-41.504508 0-72.890921 23.535746-72.89092 71.257397 0 45.429841 28.436317 72.224508 69.290666 72.224508 11.442794 0 20.593778-1.284063 24.510984-3.250794v-46.096254h-33.987047v-38.887619h82.033778v116.028953z" fill="#fff" p-id="538"></path><path d="M417.865143 558.746413c0 43.146159 20.268698 73.541079 53.59746 73.541079 33.670095 0 52.955429-32.028444 52.955429-74.841397 0-39.537778-18.960254-73.557333-53.280508-73.557333-33.661968 0-53.272381 32.044698-53.272381 74.857651z" fill="#1e9fff" p-id="539"></path></svg>
日志
</a>
<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="upgrade-special-version" title="升级到指定版本">
<svg class="icon" style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9378"><path d="M511.771291 959.407889c-60.370972 0-118.943996-11.833513-174.10941-35.168987-53.267181-22.521946-101.097536-54.768371-142.160767-95.842859-41.069371-41.058115-73.316819-88.890516-95.842859-142.156674-23.331381-55.159274-35.164894-113.738437-35.164894-174.104293 0-60.369949 11.830443-118.952182 35.164894-174.108387 22.526039-53.265134 54.773488-101.096513 95.842859-142.166907 41.063231-41.069371 88.894609-73.309656 142.160767-95.837742 55.154157-23.329335 113.733321-35.159778 174.10941-35.159778 60.358693 0 118.937856 11.830443 174.098153 35.159778 53.266158 22.528086 101.096513 54.773488 142.165884 95.837742 41.065278 41.070394 73.311703 88.905866 95.843882 142.166907 23.325241 55.151088 35.158754 113.733321 35.158754 174.108387 0 60.364833-11.824303 118.943996-35.158754 174.104293-22.533202 53.266158-54.778604 101.098559-95.843882 142.156674-41.069371 41.074487-88.899726 73.320912-142.165884 95.842859C630.709147 947.573353 572.131007 959.407889 511.771291 959.407889L511.771291 959.407889zM511.771291 115.89966c-218.489176 0-396.240533 177.751357-396.240533 396.234393 0 218.47792 177.751357 396.234393 396.240533 396.234393 218.482013 0 396.228253-177.756473 396.228253-396.234393C907.999544 293.651017 730.253304 115.89966 511.771291 115.89966L511.771291 115.89966zM511.771291 115.89966M692.508655 477.239312c-10.531867 10.561543-27.585265 10.561543-38.062897 0l-115.716488-115.6336 0 366.089839c0 14.845103-12.084223 26.942629-26.952862 26.942629-14.846126 0-26.948769-12.097526-26.948769-26.942629L484.827639 361.600595 369.12957 477.239312c-10.497075 10.561543-27.554566 10.561543-38.062897 0-5.26798-5.26798-7.918343-12.137435-7.918343-19.031449 0-6.903224 2.650363-13.797237 7.918343-19.031449l161.677263-161.67624c10.497075-10.498098 27.560706-10.498098 38.057781 0l161.702845 161.67624C703.00573 449.674513 703.00573 466.733027 692.508655 477.239312L692.508655 477.239312 692.508655 477.239312zM692.508655 477.239312" p-id="9379"></path></svg>
升级
</a>
<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="restore" title="还原">
<svg class="icon" style="width: 1.5em; height: 1.5em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1205"><path d="M314.1754 387.823179l160.906076 160.906076-40.226519 40.226519-160.906076-160.906076 40.226519-40.226519ZM274.025586 428.418253l160.906076-160.906076 40.226519 40.226519-160.906076 160.906076-40.226519-40.226519ZM341.333333 398.222222 625.810631 398.222222C720.049084 398.222222 796.444444 474.824085 796.444444 568.888889 796.444444 663.145483 719.965827 739.555556 625.810631 739.555556L365.791667 739.555556 365.791667 682.666667 625.810631 682.666667C688.577553 682.666667 739.555556 631.696031 739.555556 568.888889 739.555556 506.164384 688.551703 455.111111 625.810631 455.111111L341.333333 455.111111 341.333333 398.222222ZM369.777778 711.111111m-28.444444 0a0.5 0.5 0 1 0 56.888889 0 0.5 0.5 0 1 0-56.888889 0Z" p-id="1206"></path></svg>
还原
</a>
`;
// loading...
let status = `
<span data-status="UID-${upgrade_id}" class="badge-status-loading">
<i class="fa fa-spinner fa-spin fa-1x" aria-hidden="true"></i>
</span>
`;
Object.assign(temp_obj, {
upgrade_id,
status,
pro_name,
project_name,// source name
pro_type,
// send_time,
// upgrade_time,
server_name,
dep_path,
current_version,
upgradeable,
operaions,
});
sharpedDatas.push(temp_obj);
// no children
options.data = sharpedDatas;
// new_options
// console.log(`re-render table =`, JSON.stringify(options.data, null, 4));
table.render(options);
}
);
// tableIns.reload({
// page: {
// curr: 1 //重新从第 1 页开始
// },
// });
// var demoReload = $('#demoReload');
// //执行重载
// // table.reload('testReload', {
// tableIns.reload({
// page: {
// curr: 1 //重新从第 1 页开始
// },
// where: {
// key: {
// pro_name: demoReload.val()
// }
// }
// });
}
};
https://www.layui.com/demo/table/reload.html
https://www.layui.com/doc/modules/table.html#reload
https://www.layui.com/doc/modules/table.html#options
re-render
options.data = sharpedDatas;
// new_options
// console.log(`re-render table =`, JSON.stringify(options.data, null, 4));
table.render(options);
shit layui & re-render
https://www.layui.com/demo/form.html
-
为什么select/checkbox/radio没显示？
https://www.layui.com/doc/base/faq.html#form -
动态添加的表单元素如何更新？
https://www.layui.com/doc/modules/form.html#render
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/9243643.html
未经授权禁止转载，违者必究！
