`where
: field` 中的 `
field` 是一个 **JavaScript 对象**，它包含了你表单中所有输入字段的“名称（name）”和“值（value）”组成的键值对。
---
## ✅ 一、`
field` 是从哪来的？
它来自于这行代码：
```js
var
field = data.
field;
```
而 `data` 是 Layui 表单提交事件回调函数传入的参数：
```js
form.on('submit(demo-table-search)', function (data) {
// data.
field 就是表单数据
});
```
### 🔍 `data` 的结构示例
假设你的 HTML 表单如下：
```html
<form class="layui-form">
<input type="text" name="username" value="张三">
<input type="text" name="city" value="北京">
<select name="sex"><option value="男">男</option></select>
<button type="submit" lay-submit>搜索</button>
</form>
```
当用户点击【搜索】按钮时，Layui 会自动收集所有具有 `name` 属性的输入框，并生成一个对象：
```js
data = {
field: {
username
: "张三",
city
: "北京",
sex
: "男"
}
}
```
所以：
```js
var
field = data.
field;
// 等价于
var
field = { username
: "张三", city
: "北京", sex
: "男" };
```
---
## ✅ 二、`where
: field` 到底做了什么？
在 `table.reload()` 中使用：
```js
table.reload('Top-Search', {
where
: field
});
```
意思就是：
> “把用户填写的这些表单数据（`
field`），作为查询参数发送给后端接口。”
### 💡 最终发起的请求 URL 示例：
```
GET /api/list?username=张三&city=北京&sex=男&page=1&limit=10
```
后端就可以根据这些参数去数据库查询匹配的数据。
---
## ✅ 三、完整流程图解
```
[用户填写表单]
↓
<input name="username" value="张三">
<input name="city" value="北京">
↓
点击 [搜索] 按钮 → Layui 触发 form.submit 事件
↓
data.
field 提取所有 name 对应的值 → 得到 { username
: "张三", city
: "北京" }
↓
table.reload({ where
: field }) → 把这个对象作为参数发给接口
↓
表格重新加载，只显示符合条件的数据
```
---
## ✅ 四、举个实际例子
### HTML 表单
```html
<form class="layui-form">
<div class="layui-inline">
<label>用户名：</label>
<input type="text" name="username" placeholder="请输入" class="layui-input">
</div>
<div class="layui-inline">
<label>城市：</label>
<input type="text" name="city" placeholder="请输入" class="layui-input">
</div>
<button type="submit" lay-submit lay-filter="demo-table-search">搜索</button>
</form>
<table id="Top-Search"></table>
```
### JS 代码
```js
layui.use(['form', 'table'], function () {
var form = layui.form;
var table = layui.table;
// 初始化表格
table.render({
elem
: '#Top-Search',
url
: '/api/user/list',
cols
: [[
{
field: 'username', title
: '用户名' },
{
field: 'city', title
: '城市' },
{
field: 'email', title
: '邮箱' }
]]
});
// 监听搜索提交
form.on('submit(demo-table-search)', function (data) {
var
field = data.
field; // ←← 关键：获取表单数据
console.log(
field);
// 输出：{ username
: "张三", city
: "北京" }
// 带着条件刷新表格
table.reload('Top-Search', {
where
: field, // ←← 把
field 作为查询条件
page
: { curr
: 1 } // 回到第一页
});
return false;
});
});
```
---
## ✅ 五、总结：`
field` 到底是什么？
| 项目 | 内容 |
|------|------|
| 🧩 类型 | JavaScript 普通对象（Object） |
| 📍 来源 | `data.
field` —— Layui 自动提取 `<input name="xxx">` 的值 |
| 🎯 用途 | 用于 `table.reload()` 的 `where` 参数，实现动态搜索 |
| 🔄 特性 | 键 = input 的 `name`，值 = input 的当前内容 |
---
## ✅ 打个比方
你可以把 `
field` 想象成：
> “一张写满用户搜索条件的小纸条”，然后你把它交给服务员（`table.reload`），说：“按这张纸上的条件给我查数据”。
---
本文介绍在DEDECMS中如何通过使用特定函数来限制[field:description/]标签的字数，确保显示的内容长度适中，同时保持信息的完整性。
扫一扫
9101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
