项目用LayUi框架+SpringMvc实现的
点击总体页面右侧的编辑按钮弹出Layui渲染的窗口(另一个jsp页),窗口中的下拉列表想做成从后端数据库表中查出的数据
整体页:
<fieldset class="layui-elem-field">
<legend>诉讼指南列表</legend>
<div class="layui-field-box layui-form">
<table class="layui-table admin-table">
<thead>
<tr>
<th style="width: 30px;"><input type="checkbox" lay-filter="allselector" lay-skin="primary"></th>
<th>标题</th>
<th>日期</th>
<th>分类</th>
<th>操作</th>
</tr>
</thead>
<tbody id="content">
</tbody>
</table>
</div>
</fieldset>
<div class="admin-table-page">
<div id="paged" class="page">
</div>
</div>
<script type="text/html" id="tpl">
{{# layui.each(d.list, function(index, item){ }}
<tr>
<td><input type="checkbox" lay-skin="primary"></td>
<td>{{ item.heading }}</td>
<td>{{ item.dates }}</td>
<td>{{ item.litigationguidesubmenu.litigationguidesubmenuname }}</td>
<td>
<!-- 修改按钮 -->
<a href="javascript:;" data-gid="{{ item.gid }}" data-heading="{{ item.heading }}" data-straightmatter="{{ item.straightmatter }}" data-dates="{{ item.dates }}" data-opt="edit" class="layui-btn layui-btn-mini" id="update" onclick="edit(this)">编辑</a>
<a href="javascript:;" data-gid="{{ item.gid }}" data-opt="del" id="del" class="layui-btn layui-btn-danger layui-btn-mini" onclick="del(this)">删除</a>
</td>
</tr>
{{# }); }}
</script>
<script type="text/javascript" src="${pageContext.request.contextPath }/plugins/layui/layui.js"></script>
<script>
layui.config({
base: 'js/'
});
layui.use(['paging', 'form'], function() {
var $ = layui.jquery,
paging = layui.paging(),
layerTips = parent.layer === undefined ? layui.layer : parent.layer,
layer = layui.layer,
form = layui.form();
paging.init({
/* 省略查询代码 */
complate: function() {
//点击编辑按钮弹出编辑窗口
$.post('view/LitigationGuide/forms/updateForm.jsp',{gid:$(this).data('gid'),heading:$(this).data('heading'),straightmatter:$(this).data('straightmatter'),dates:$(this).data('dates'),submenu:$(this).data('submenu')}, function(form) {
addBoxIndex = layer.open({
type: 1,
title: '修改诉讼指南',
content: form,
btn: ['保存', '取消'],
shade: false,
offset: ['100px', '30%'],
area: ['800px', '620px'],
zIndex: 19950924,
maxmin: true,
yes: function(index) {
//触发表单的提交事件
$('form.layui-form').find('button[lay-filter=edit]').click();
},
success: function(layero, index) {
//弹出窗口成功后渲染表单
var form = layui.form();
form.render();
form.on('submit(edit)', function(data) {
//参数传入controller
$.post('litigationguide/updateLitigationGuide.json',data.field,function(res){
location.reload();
});
return false;
});
},
end: function() {
addBoxIndex = -1;
}
});
});
});
});
},
});
</script>
updateForm.jsp:
<html>
...
<body>
<!--省略标题、正文、日期等...-->
<div class="layui-form-item" style="width:200px; margin-left:110px;">
<select name="fenlei" lay-verify="" >
<option value="">请选择文章分类</option>
<c:forEach items="${ 后台返回的集合 }" var="s">
<option value="${ s.id }">${ s.值 }</option>
</c:forEach>
</select>
</div>
...
</body>
...
</html>
小白还求高手指教