很多时候想点击编辑按钮的时候,弹出窗口的表单填充好数据,其实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 | | 用于填充表单的数据 |