# Table 列表的搜索
### `EpiiAdmin`在`bootstrap-table`的基礎上增加了搜索表單功能,并且搜索表單與table完全隔離,這意味著你可以在頁面的任何一個地方展示表單,只需綁定表單即可實現對表單的搜索。
- 支持多表單對一個列表的搜索
- 支持頁面多個table,并分別設置搜索
### 務必先仔細閱讀 [`Form章節`](form.md);
在任何一個form表單上只需加上
- `data-form='1'`
- `data-search-table-id='1'`
其中 `data-search-table-id` 來指定綁定的`table`。 如果值為`1` 則默認為第一個table。推薦使用table的具體id。
>[warning] 提醒:當綁定table后,在form中不要設置action屬性。
>[info] 搜索變量的傳遞方式默認追加到post請求中。
例1,
```html
<form role="form" class="form-inline" data-form="1" data-search-table-id="1">
<div class="form-group">
<label>名稱:</label>
<input type="text" class="form-control" name="name1" placeholder="請輸入名稱" required>
</div>
<div class="form-group">
<label>名稱2:</label>
<input type="text" class="form-control" name="name2" placeholder="請輸入名稱">
</div>
<div class="form-group">
<label>名稱3:</label>
<input type="text" class="form-control" name="name3" placeholder="請輸入名稱">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</form>
```
程序會自動在table增加表單的字段到post數據中。
操作視頻
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table20.mov"></video>
</p>
支持[`Form章節`](form.md)的所有功能,以`data-before-submit="confirm"`為例:
```html
<form role="form" class="form-inline" data-form="1" data-search-table-id="1"
data-before-submit="confirm"
data-msg="您確定要搜索嗎?" data-title="自定義標題"
data-btn-ok="繼續搜索" data-btn-cancel="我不搜索" data-intop="1">
<div class="form-group">
<label>名稱:</label>
<input type="text" class="form-control" name="name1" placeholder="請輸入名稱" required>
</div>
<div class="form-group">
<label>名稱2:</label>
<input type="text" class="form-control" name="name2" placeholder="請輸入名稱">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">提交</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</form>
```
操作視頻
<p>
<video controls="controls" width="100%"
src="http://epii.gitee.io/static/project/epiiadmin-js/docimg/table21.mov"></video>
</p>
- 簡介/安裝
- 快速搭建一個用戶中心
- Js代碼寫在哪里
- 環境變量Args
- 前臺組件
- Dialog方式打開頁面
- Addtab方式打開頁面
- Alert提醒框
- Confirm確認框
- Prompt輸入框
- 表單Form
- 列表Table/list
- 基礎Table
- 控制Table
- 搜索Table
- 城市選擇city-picker
- 文件上傳組件
- 基礎版本
- 簡單版本
- 更多實用組件
- 后臺
- 實現方式綜述
- 命令管理類JsCmd
- 命令
- Alert命令
- Url命令
- Toast命令
- JsEval命令
- Close命令
- Refresh命令
- CloseAndRefresh命令
- 常用命令的簡化
- 文件上傳
- 后臺基礎
- 后臺進階
- 左側導航badge配置