layui框架使用总结（一）

近期做的项目前端页面使用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