shit layui & select & re-render & bug
shit layui
https://www.layui.com/doc/modules/form.html#onselect
https://www.layui.com/doc/element/form.html#select
select & re-render bug
form.render("select");
let jsonObj = {};
const editProject = () => {
let reset = document.querySelector(`button[type="reset"]`);
layui.use("form", function() {
let form = layui.form,
layer = layui.layer;
// init select
form.render("select");
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;
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`);
input_email.value = `${email}`;
input_role.value = `${role}`;
// update select
form.render("select");
});
};
shit layui & px
https://www.layui.com/doc/modules/layer.html#area
area: ["800px", "400px"],
const showAddFormModal = (addProject, title = "增加用户") => {
// DOM
layui.use("layer", function() {
let layer = layui.layer;
// 修改
// <option value="Admin">管理员</option>
modalIndex = layer.open({
title: `<h3>${title}</h3>`,
content: `
<section data-box="form-box">
<form class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label" title="用户名">用户名</label>
<div class="layui-input-block">
<input type="text" name="user_name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" title="角色类型">角色类型</label>
<div class="layui-input-block">
<select name="role" lay-verify="required" lay-filter="project-type" lay-search>
<option value="Developer">开发</option>
<option value="Operator">配管</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" title="密码">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" title="邮箱">邮箱</label>
<div class="layui-input-block">
<input type="email" name="email" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</section>
`,
area: ["800px", "400px"],
btn: [],
type: 1,
success: function(layero, index){
addProject();
},
});
});
};
async & delay bug
// async & delay bug
setTimeout(() => {
input_role.value = `${role}`;
// update select
console.log(`render select 3`);
form.render("select");
}, 100);
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);
});
};
shit layui & select & re-render & bug的更多相关文章
- vue h render function & render select with options bug
vue h render function & render select with options bug https://github.com/xgqfrms/vue/issues/41 ...
- layui之table.render使用(含后台详细代码实现)
效果图如下: 前端实现代码如图(完整代码): <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- iview render bug & vue namespace bug
iview render bug https://codepen.io/xgqfrms/pen/gyGjKP https://codepen.io/xgqfrms/full/gyGjKP bug &l ...
- macOS warning emoji render bug
macOS warning emoji render bug ️ macOS render bug Apple Color Emoji fonts install old version fonts ...
- taro list render bug
taro list render bug 列表渲染 https://taro-docs.jd.com/taro/docs/list.html not support jsx map 垃圾微信 cons ...
- layui select使用问题
1.需要引用form模板 layui.use(['form'], function () { var form = layui.form; }); 2.html代码 <div class=&qu ...
- layui select配合input实现动态模糊搜索
功能需求:select框可以自己输入,就是在下拉列表里找不到自己想要的选项就可以自己输入,同时还要支持模糊匹配功能 html代码: 样式: <style> .select-search-i ...
- layui select 禁止点击
$('select').attr('disabled', 'disabled'); form.render('select'); 注意事项: 1. 必须写 layui.use([form]) 2. 先 ...
随机推荐
- home键拦截
代码: public class HomeKeyReceiver extends BroadcastReceiver { private static final String LOG_TAG = & ...
- Normal equations 正规方程组
前面我们通过Gradient Descent的方法进行了线性回归,但是梯度下降有如下特点: (1)需要预先选定Learning rate: (2)需要多次iteration: (3)需要Feature ...
- D. Arpa's weak amphitheater and Mehrdad's valuable Hoses 分组背包模板题
http://codeforces.com/problemset/problem/742/D 并查集预处理出所有关系. 一开始的时候,我预处理所有关系后,然后选择全部的时候,另起了一个for,然后再判 ...
- 转】Spark SQL 之 DataFrame
原博文出自于: http://www.cnblogs.com/BYRans/p/5003029.html 感谢! Spark SQL 之 DataFrame 转载请注明出处:http://www.cn ...
- Codeforces Beta Round #98 (Div. 2)(A-E)
A #include <iostream> #include<cstdio> #include<cstring> #include<algorithm> ...
- 好用的SqlParamterList
public class SqlParameterList : List<SqlParameter> { #region Properties /// <summary> // ...
- git忽略文件权限的检查
在linux上配置了一个samba服务器,方便在linux上通过ide修改代码,然后发现一个很烦人的问题,就是没有修改权限,在使用命令 chmod 777 filename后可以修改了,然而使用git ...
- vue1.0生命周期
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 玩转CPU运行曲线
Leaf 是不是从来没有想过看看cpu运行曲线啊骚年?顶多也就仅仅是看看cpu利用率,吓自己一跳后感觉关闭几个不该打开的程序~ 然而问题来了,微软公司要让你绘制cpu运行曲线啊!!不仅是固定的直线,还 ...
- 使用Win7 64位旗舰版光盘映像安装Windows Home basic 64位操作系统
工作当中需要安装Windows home basic 64位操作系统,苦于手头没有该版本的安装光盘,也没时间下载其安装映像.因此,在现有资源“cn_windows_7_ultimate_with_sp ...