layui框架使用总结(一)
【摘要】 近期做的项目前端页面使用layui框架,做下总结。一、几个链接layui官网:www.layui.com API主要参考官网github下载使用的后台模板:iframe v2 版本 https://github.com/zhongshaofa/layuimini/tree/v2二、总结几点1、layui中 onclick事件写法function xxx(){...} //无效正确写法:wi...
近期做的项目前端页面使用layui框架,做下总结。
一、几个链接
layui官网:www.layui.com
API主要参考官网
github下载使用的后台模板:iframe v2 版本 https://github.com/zhongshaofa/layuimini/tree/v2
二、总结几点
1、layui中 onclick事件写法
function xxx(){...} //无效
正确写法:
window.delTr = function(o){
//......
}
或者给组件一个id
$(document).on('click','#add-batch-btn',function(){
//...
})
2、form表格动态添加的行获取每行字段值
form.on('submit(saveBtn)', function (data) {
var params = {'project': {}, 'chips': {}, 'pcb': []};
$.each($('.project td>input'), function(i, v) {
if (v.name != '') {
params['project'][v.name] = v.value;
}
});
// 组织动态添加的行信息
$.each($('.chips'), function(i, v) { //添加的行tr都有class为chips
var chip = {};
$.each($(v).find('td>input'), function(i,v) {
if (v.name != '') {
chip[v.name] = v.value;
}
});
params['chips'][batch_num] = chip;
});
return false;
});
3、layui有关下拉框
//初始化下拉框,获取数据
$.ajax({
url: "/projects/simple/",
type: "GET",
async: false,
dataType: "json",
success: function (res) {
if(res.code == 200){
for(var i=0;i<res.data.length;i++){
$(select).append('<option value="'+res.data[i].id+'">'+res.data[i].name+'</option>');
}
form.render('select');//重新渲染select!!!
}
}
});
// 拉框回显
$('select[name="project"]').each(function() {
// this代表的是<option></option>,对option再进行遍历
$(this).children("option").each(function() {
// 判断需要对那个选项进行回显
if (this.value == "***") {
// 进行回显
$(this).attr("selected","selected");
form.render('select');
}
});
})
4、根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择
//jQuery UI API - 自动完成部件(Autocomplete Widget) https://www.runoob.com/jqueryui/api-autocomplete.html#option-minLength
//根据用户输入值进行搜索和过滤,让用户快速找到并从预设值列表中选择
//demo:
<input class="complete-member" />
<script>
$(function() {
$( ".complete-member" ).autocomplete({
source: function(request, response) {
$.ajax({
url: "/employees/"+request.term+"/", //request.term输入值
dataType: "json",
success: function(data) {
response($.map(data.data, function(item) {
return {
label: item, //菜单显示的内容
value: item //对应内容的value值
}
}));
}
});
},
minLength: 2, //执行搜索前用户必须输入的最小字符数
position: { my : "left top", at: "left bottom" }//菜单位置
// select: function( event, ui ) {
// 选中值后的操作
// }
});
});
</script>
5、使用多选下拉框小插件
https://github.com/hnzzmsf/layui-formSelects
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)