layui开发实战：表单渲染、弹窗交互及表格操作技巧

1. 表单动态渲染（解决下拉框不显示问题）

在JavaScript中动态初始化下拉框，或进行联动查询时，若数据已获取但界面未更新，需在数据加载完成后调用表单重新渲染方法，以确保UI正确显示。

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等HTML元素转换为layui风格的UI组件。只要页面JS中正确引入了相关模块并执行渲染，即可自动完成样式转换。

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

2. 下拉框onchange事件处理

在layui中，不应直接在select元素上绑定onchange事件，而应通过设置lay-filter属性来标识该控件。

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

随后在对应的JavaScript代码中，使用form.on方法对该lay-filter值进行监听，从而捕获下拉框的值变化事件。

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

3. 关闭弹出层并刷新父页面

在新增数据场景中，通常通过按钮触发layer.open打开新页面。当在新页面完成表单填写并保存成功后，需要实现关闭当前弹窗并自动刷新父页面数据的效果。

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

4. 父页面与iframe子页面参数传递

在使用layer.open打开iframe页面（如修改或查看页面）时，向子页面传递参数主要有两种方法：一是在url地址后拼接查询参数（如xxx.action?name=xxx）；二是在父页面JavaScript中定义全局对象并赋值，供子页面读取。

//监听工具条
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子页面中，可通过parent对象访问父页面定义的全局变量或参数，从而获取传递的数据。

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

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

在layui中使表单元素失效，只需添加disabled属性。为增强视觉提示，建议同时添加内置CSS类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属性，否则layui无法识别并获取该元素的值。

 <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);
	  });
 }

监听函数中括号内的参数值需与按钮上的lay-filter属性值保持一致，以确保事件正确绑定。

7. 数据表格固定操作列

当表格某行需要执行查看或修改等操作时，通常需固定一列放置操作按钮。首先在HTML的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>

在JavaScript渲染表格配置时，于cols数组末尾添加配置项，指定toolbar为前述模板id，并设置fixed属性以固定列位置。

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

按钮中需包含lay-event属性，用于在JavaScript中监听表格工具条的点击事件，从而执行具体操作。

  //监听工具条
  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>

通过为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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});

在监听表单提交的回调函数末尾，必须显式返回false（return false），仅写return无法阻止默认提交行为，从而导致页面刷新或跳转。

10. 父页面获取子窗口返回值

实现原理为：在父页面JavaScript中定义一个共享对象，子页面对该对象进行赋值。在父页面打开弹窗的回调或页面销毁事件中，读取该对象值以执行后续操作。

	// 页面层
	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. 复选框获取注意事项

方法一：参考layui官方示例（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);
}

方法二：预先定义两个数组，分别用于存储复选框的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);
  });

需实现数组去重逻辑，确保ID列表的唯一性。

// 数组去重
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常用功能与常见问题解决方案汇总