很多時候想點擊編輯按鈕的時候,彈出窗口的表單填充好數據,其實modal-catch模式實現了這個功能,只需在data-params配置data屬性就可以了,注意sata值的寫法,某些特殊的字符不能用,切記切記。
~~~html
<script id="list-tpl" type="text/html" data-params='{"url":"./data/data.json","dataName":"articleCatData","pageid":"#page"}'>
<table id="example" class="layui-table lay-even" data-name="articleCatData" data-tplid="list-tpl">
<thead>
<tr>
<th width="30"><input type="checkbox" id="checkall" data-name="checkbox" lay-filter="check" lay-skin="primary"></th>
<th width="80">序號
<div class="order-box">
<a href="javascript:;" class="sort" data-filed="id" data-asc="true"><i class="iconfont" ></i></a>
<a href="javascript:;" class="sort down" data-filed="id"><i class="iconfont"></i></a>
</div>
</th>
<th>名稱</th>
<th width="70">排序</th>
<th width="80">狀態</th>
<th width="240">操作</th>
</tr>
</thead>
<tbody>
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" name="checkbox" value="{{ item.id}}" lay-skin="primary"></td>
<td>{{ item.id}}</td>
<td class="edit" data-list='{"key":"id={{ item.id}}","filed":"title","render":"true"}' data-params='{"url":"./data/success.json","data":"id={{ item.id}}"}'>{{ strRepeat(' ',item.pid)}} {{# if(item.pid>1){ }} ├ {{# } }} {{ item.title}}</td>
<td><input type="text" class="layui-input ajax-blur" name="order" value="{{ item.order}}" data-params='{"url":"./data/test.json","data":"id=1&name=paco"}'> </td>
<td><input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" {{#if ( parseInt(item.switch)){ }}checked="checked" {{# } }} lay-filter="ajax" data-params='{"url":"./data/test.json","data":"id={{ item.id}}&name=paco"}'> </td>
<td>
<button class="layui-btn layui-btn-mini layui-btn-normal modal-catch" data-params='{"content":".add-subcat","area":"600px,300px","title":"添加{{ item.title}}的子分類","subcat":"pid={{ item.id }}","type":"1"}'>
<i class="iconfont"></i>添加子分類
</button>
<button class="layui-btn layui-btn-mini modal-catch" data-params='{"content": ".add-subcat","area":"600px,1000px","title":"編輯{{ item.title}}分類","key":"id={{ item.id }}","type":"1"}'>
<i class="iconfont"></i>編輯
</button>
<button class="layui-btn layui-btn-mini layui-btn-danger ajax" data-list='{"key":"id={{ item.id}}","msg":true,"render":"true","action":"del"}' data-params='{"url": "./data/success.json","data":"id=1&name=ni"}'>
<i class="iconfont"></i>刪除
</button></td>
</td>
</tr>
{{# }); }}
</tbody>
</table>
</script>
~~~
編輯按鈕添加 data-params='{"content": ".add-subcat","area":"600px,1000px","title":"編輯{{ item.title}}分類","key":"id={{ item.id }}","type":"1"}屬性,其中key為數據列表的主鍵值.
**注意**模板頭部的 data-params='{"url":"./data/data.json","dataName":"articleCatData","pageid":"#page"}'中的"dataName":"articleCatData",這個為本列表數據緩存的名稱,為填充表單提交數據。
**再注意**: <table id="example" class="layui-table lay-even" data-name="articleCatData" data-tplid="list-tpl">這里的的屬性data-name="articleCatData",為自動渲染定位數據,此處必須與上面模板頭的dataName一致,
data-tplid="list-tpl"為自動渲染定位模板,兩個都不能少
表單內容
~~~
<div class="add-subcat">
<form id="form1" class="layui-form layui-form-pane" action="add-cat">
<div class="layui-form-item">
<label class="layui-form-label">分類名稱</label>
<div class="layui-input-block">
<input type="text" name="title" required jq-verify="required" jq-error="請輸入分類名稱" placeholder="請輸入分類名稱" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-inline">
<input type="text" name="title" required jq-verify="number" value="100" jq-error="排序必須為數字" placeholder="分類排序" autocomplete="off" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">狀態</label>
<div class="layui-input-inline">
<input type="radio" name="status" title="啟用" value="1" checked />
<input type="radio" name="status" title="禁用" value="0" />
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" jq-submit jq-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
~~~
上面代碼的data值,會按表單中字段的name名稱賦值,單選框則根根據值選中,同理復選框根據值選中,下拉框會根據值選中,如果表單中沒有該name字段的文本域,則會創建一個hidden域,如pid,在表單中沒有,當單擊出現窗口的時候,方法會在表單中創建一個隱藏域
~~~html
<input type="hidden" name="pid" value="2" />
~~~
####配置參數
| 參數 | 默認值 | 說明 |
| ---------- | ----- | -------------------------- |
| title | false | 彈出窗口的標題 |
| full | false | 是否全屏 |
| shadeClose | true | 是否點擊遮罩關閉 |
| shade | false | 是否遮罩 |
| content | | 元素的ID或樣式,如#article-add,.article-add |
| area | auto | 彈出框的大小,格式:area=300px,600px |
| data | | 用于填充表單的數據 |