💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
很多时候想点击编辑按钮的时候,弹出窗口的表单填充好数据,其实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" >&#xe615;</i></a> <a href="javascript:;" class="sort down" data-filed="id"><i class="iconfont">&#xe647;</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('&nbsp;&nbsp;',item.pid)}} {{# if(item.pid>1){ }} ├&nbsp; {{# } }} {{ 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">&#xe649;</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">&#xe653;</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">&#xe626;</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 | | 用于填充表单的数据 |