layui怎么获取表单数据?

获取form中的数据:

jsp:

<form class="layui-form">
    <button id="btnSubmit" lay-filter="btnSubmit" lay-submit>保存</button>
</form>

js:

form.on('submit(btnSubmit)', function (data) {
    //表单数据formData
    var formData = data.field;
});

获取table中的数据

执行一个如上图的table实例:

jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<title>学生列表</title>

<link rel="stylesheet" href="statics/css/commonCss.css">
<script src="statics/js/commonJs.js"></script>

</head>
<body>
	<div class="layui-container-student">
		<table id="table" lay-filter="monitor"></table>
	</div>

<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</body>
</html>

js:


layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload','element', 'slider' ],
				function() {
					var laydate = layui.laydate // 日期
					, laypage = layui.laypage // 分页
					, layer = layui.layer // 弹层
					, table = layui.table // 表格
					, carousel = layui.carousel // 轮播
					, upload = layui.upload // 上传
					, element = layui.element // 元素操作
					, slider = layui.slider // 滑块

					// 执行一个 table 实例
					table.render({
						elem : '#table',
						height : 550,
						url : 'studentList' ,
						title : '学生表' ,
						page : true , //开启分页
						method: 'post',
						cols : [ [ // 表头
						{
							type : 'checkbox'
						}, {
							field : 'id',
							title : '学号',
							align: 'center'
						}, {
							field : 'name',
							title : '姓名',
							align: 'center'
						}, {
							field : 'age',
							title : '年龄',
							align: 'center'
						}, {
							field : 'nation',
							title : '民族',
							align: 'center'
						},{
							field : 'sexName',
							title : '性别',
							align: 'center'
								
						}, {
							field : 'grade',
							title : '年级',
							align: 'center'
						}, {
							field : 'studentClass',
							title : '班级',
							align: 'center'
						},  {
							field : 'year',
							title : '学年',
							align: 'center'
						}, {
							field : 'readStatus',
							title : '在读状态',
							align: 'center'
						}, {
							field : 'verifyStatus',
							title : '审核状态',
							align: 'center'
						},{
							fixed: 'right', 
							width: 165,
							title : '操作',
							align : 'center',
							toolbar : '#barDemo'
						} ] ]
					});
					
					// 监听行工具事件
					table.on('tool(monitor)', function(obj) { 
						var data = obj.data // 获得当前行数据
						, layEvent = obj.event; // 获得 lay-event 对应的值
						if (layEvent === 'detail') {
							openDetail(data);
						} else if (layEvent === 'del') {
							deleteStudent(data);
						} else if (layEvent === 'edit') {
							openEdit(data);
						}else if(layEvent=== 'withdraw'){
				        	withdraw(data);
				        }
					});
					
				    //删除按钮
				    function deleteStudent(data) {
				        
				              
				    }

					// 打开查看按钮
					function openDetail(data) {


					}
					
				});
扫描二维码关注公众号,回复: 4834616 查看本文章

猜你喜欢

转载自blog.csdn.net/whz199511/article/details/85318799