layui框架使用总结(一)

举报
FeiLip 发表于 2020/06/04 17:25:01 2020/06/04
【摘要】 近期做的项目前端页面使用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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。