layui怎么获取表单数据？

逃离我推掉我的手 2022-04-10 06:27 2402阅读 0赞

获取form中的数据：

jsp：

js：

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

获取table中的数据

![20181228133452454.png][]

执行一个如上图的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) {
    
    
    					}
    					
    				});

[20181228133452454.png]: /images/20220402/76c5828af5f345a88f80f11b8b5af74b.png