1. 程式人生 > >layui怎麼獲取表單資料?

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) {


					}
					
				});