javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > layui使用技巧

layui使用技巧和常见问题汇总

作者：zhang.kaigang

layui技巧：下拉框未展示问题;下拉框的onchange事件处理;关闭弹出层,重新加载父页面;父页面如何传递参数给弹出层的iframe页面;表单元素处于禁用状态;表单提交如何获取表单元素值集合;数据表格固定列;带搜索的下拉框;表单提交阻止页面跳转;父页面和子窗口传递值

1.表单重新渲染(处理下拉框未展示问题)

有时候我们在js中进行下拉框的动态初始化，或者我们做联动下拉的时候发现已经查询出数据但是下拉框并没有展示出来，这个时候就需要我们在初始化完成之后或者联动数据查询之后对表单进行重新渲染，这样就能加载出来了。

layui.use('form', function(){
	// 高版本建议把括号去掉，有的低版本，需要加()
	var form = layui.form;
	// 也可以单单初始化下拉框form.render('select');
	 form.render();
});

可以将方法都封装在一个变量中，调用的时候更方便，例如要调用方法直接写
commonFuns.renderForm();

// 封装方法
var commonFuns = {
	 //重新渲染表单
	 renderForm : function(){
		  layui.use('form', function(){
			   //高版本建议把括号去掉，有的低版本，需要加()
			   var form = layui.form;
			   form.render();
		  });
	 }
};

原因是layui内置的Form模块为全自动渲染，她将原本普通的诸如select、checkbox、radio等元素重置为你所看到的模样，只要你的页面对应js有像以下定义即可渲染出来

layui.use('form', function(){
			   var form = layui.form;
});

2.下拉框的onchange事件处理

针对下拉框的响应事件onchange，在layui中不在select元素直接添加onchange事件，而是在select元素添加一个lay-filter值

<select name="industryType" id="industryType" lay-filter="industryType" >
</select>

然后在对应的js中对该下拉框元素进行监听

// 对表单元素操作比如监听下拉框事件
layui.use(['form'], function(){
	var form = layui.form;
	form.on('select(industryType)', function(data){
		// 下拉响应事件，和原始的onchange一个效果
		commonFuns.industryTypeChange();
		// 重新渲染表单
		commonFuns.renderForm();
	});
});

3.关闭弹出层，重新加载父页面

假设我们需要做一个新增页面，通过点击一个新增按钮弹出一个新页面，在新的页面进行表单填写然后保存，我们需要的效果是保存成功后会关闭当前新页面然后重新加载父页面。

layer.alert("新增成功！",function(){
	//  刷新父页面
	window.parent.location.reload();
	// 获取当前弹出层的层级
	var index = parent.layer.getFrameIndex(window.name);
 	//  关闭弹出层
 	parent.layer.close(index);
 });

4.父页面如何传递参数给弹出层的iframe页面

在页面处理中经常碰到需要弹出一个页面，比如修改页面或者查看页面等，这时候可以用layer.open进行操作，如果我们用layer.open打开的是一个iframe页面，我们该如何将父页面的一些参数传递过去，有2种方法，第一种直接在url地址后面传参，类似于xxx.action?name=xxx，第二种则是在父页面的js写一个对象然后给对象赋值

//监听工具条
table.on('tool(viewGrid)', function(obj){
	var selectData = obj.data;
	if(obj.event === 'btnView'){
		// 注意下面的param不要在此处加var，否则就限定范围了，可以直接就按照下面写
		param = {
			selectData : selectData,
			type : "view"
		};
		// 页面层
		layer.open({
			type: 2,
			title : '查看详情',
			area: ['1000px', '650px'],
			content: url
		});
	} 
  });

在iframe的子页面中可以按照以下方式取出传递的参数

	<script type="text/javascript">
		var selectData = parent.param.selectData;
		var type = parent.param.type;
	</script>

5.表单元素处于禁用状态

在layui中让表单元素处于禁止状态，加上disabled即可，但是为了效果更加明显，我们可以在元素上加上一个内置class样式名称layui-disabled，加上这个样式会有禁止的图标出现

<input type="text" id="addrName" name="addrName" class="layui-input layui-disabled" disabled/>

6.表单提交如何获取表单元素值集合

要获取表单元素的值的集合，需要注意以下几点
第一要在表单提交的按钮元素上加上lay-submit以及lay-filter

<button class="layui-btn layui-btn-normal" data-type="btnSave" id="btnSave" lay-submit lay-filter="btnSave">保存</button>

第二在表单的各个元素都必须要有name元素，不然获取不到该元素的值

 <input type="text" id="notes"  name="notes" class="layui-input" />

表单监听事件得到表单元素值集合

 btnSave : function(){
	// 监听表单提交
	  form.on('submit(btnSave)', function(data){
		  var formVal = data.field;
		  console.log(formVal);
	  });
 }

以上submit后面括号中的值对应前面按钮中的lay-filter中的值

7.数据表格固定列

在表格中针对某一行，我们需要对该行进行操作，比如查看或者修改，这个时候我们需要固定一列作为操作列来放置按钮
首先在jsp页面的中写入按钮，一般选择放在body结束前，在script中写一个id

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="btnEdit">编辑</a>
</script>
</body>
</html>

然后在js的表格渲染中的cols最后加上以下代码

 {field:'wealth', title: '操作',fixed: 'right', width:100, align:'center', toolbar: '#barDemo'}

其中toolbar为前面写的id元素，fixed表示固定位置
在按钮中有个lay-event元素，可以用来表格工具条监听

  //监听工具条
  table.on('tool(viewGrid)', function(obj){
	  // 该行的数据
	  var selectData = obj.data;
	  if(obj.event === 'btnEdit'){
		  console.log(selectData);
	  }
  });

8.带搜索的下拉框

<select name="city" lay-verify="" lay-search>
  <option value="010">layer</option>
  <option value="021">form</option>
  <option value="0571" selected>layim</option>
  ……
</select>

设定属性 lay-search 来开启搜索匹配功能

9.表单提交阻止页面跳转

form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
  console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

在监听表单提交最后加上return false，不能只写return

10.父页面如何得到子窗口传递回来的值

原理：在父页面的相关js中定义一个对象，然后在子页面对这个对象进行赋值，然后在父页面的相关打开弹框的js中的页面销毁时取得这个值进行操作即可
父页面部分js

	// 页面层
	window.returnVal = new Object();
	layer.open({
	  type: 2,
	  title : "测试页面" ,
	  area: ['1200px', '700px'],
	  content: url,
	  end : function (){
		  var returnVal = window.returnVal;
		  console.log(returnVal);
	  }
    });

子页面操作

 	btnOk : function(){
 		var item = new Object();
 		item.name = "测试";
 		item.type = "okType";
 		window.parent.returnVal = item;
 		var index = parent.layer.getFrameIndex(window.name);
          // 关闭弹出层
 		parent.layer.close(index);
 	}

11.关于复选框获取的注意事项

方法一：
https://www.layui.com/demo/table/operate.html
简单总结

var checkStatus = table.checkStatus('viewGrid');
var checkData = checkStatus.data;
if(checkData.length == 0){
	layer.alert('请至少选中一条记录进行删除');
  	return false;
}
var checkIds =new Array();
for(var i=0;i<checkData.length;i++){
	 checkIds.push(checkData[i].XX_ID);
}

方法二：
先定义2个数组，分别存放复选框的id和当前页的数据

// 记录选中的数据
var checkIds =new Array();
// 当前表格中的全部数据
var table_data=new Array();

然后监听表格复选框

//监听表格复选框选择，以下XXX_ID为表格记录的主键id，按实际情况来
  table.on('checkbox(viewGrid)', function(obj){
	  if(obj.checked==true){
			if(obj.type=='one'){
				checkIds.push(obj.data.XXX_ID);
			}else{
			    for(var i=0;i<table_data.length;i++){
			        checkIds.push(table_data[i].XXX_ID);
			     }
			}
	  }else{
	        if(obj.type=='one'){
	            for(var i=0;i<checkIds.length;i++){
	            	if(checkIds[i]==obj.data.XXX_ID){
	            		checkIds.splice(i,1);
	            	}
	            }
	        }else{
	        	// 清空
	        	checkIds = new Array();
	        }
	  }
	  // 去重
	  checkIds = commonFuns.uniqueArray(checkIds);
  });

数组去重方法

// 数组去重
uniqueArray : function (arr){
	 var res = [];
	 for(var i=0; i<arr.length; i++){
	  if(res.indexOf(arr[i]) == -1){
		  res.push(arr[i]);
	  }
	 }
	 return res;
}

然后要注意的是在表格初始化和表格重载(查询)时需要清空复选框以及重新给表格数据赋值
表格初始化

table.render({
		elem: '#viewGrid',
		url: realUrl,
		method:'post',
		where:{queryParams : JSON.stringify(queryParams)},
		cols: cols,		
		page: {
			limit:10,
			limits:[10,100, 150, 200]
		},
		height:450,
		id : 'viewGrid',
		done:function(res,curr,count){ 
		   checkIds = new Array();
		   table_data = res.data;
		   // 返回数据关闭loading
           layer.close(index);    
		}
  });

表格重载

// 查询	  
btnQuery : function(){
	var queryParams = selfFuns.initQueryParams(); 
	var index = layer.load(1, {shade: [0.3, '#000'] });//数据加载设置背景颜色
 		//执行重载
     	table.reload('viewGrid', {
     		where:{queryParams : JSON.stringify(queryParams)},
        page: {
          curr: 1 //重新从第 1 页开始
        },
        done:function (res) {
        	// 清空复选框
        	checkIds = new Array();
        	table_data = res.data;
        	//返回数据关闭loading
	    	layer.close(index);    	    	
	    }
     		
     }); 
 	}

到此这篇关于layui使用技巧和常见问题汇总的文章就介绍到这了,更多相关layui使用技巧内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文