对于这个需求，我们可以参考jeesite1.x框架中的代码生成器，自动生成相关代码。下面简单介绍一下控件的实现过程。
首先我们需要在父页面上添加一个
按钮，通过
点击该
按钮弹出子页面。可以在父页面的
jsp文件中添加以下代码：
```
jsp
<button type="button" onclick="openChildPage()">打开子页面</button>
<script>
function openChildPage() {
window.open("${ctx}/childPage");
}
</script>
```
其中，`${ctx}`为jeesite1.x框架中的上下文路径，可以在Controller中使用`@ModelAttribute`注解获取。
接着，我们需要在Controller中添加请求处理方法，用于返回子页面的
JSP。可以在Controller中添加以下代码：
```java
@Controller
@RequestMapping(value = "${adminPath}")
public class ChildPageController extends BaseController {
@RequestMapping(value = "/childPage")
public String childPage() {
return "modules/demo/childPage";
}
}
```
在`modules/demo`目录下创建一个名为`childPage.
jsp`的文件，该文件为子页面的
JSP文件。
首先我们需要引入jeesite1.x框架中的`jquery`和`artDialog`插件，可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/
jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="s" uri="/WEB-INF/tags" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/
jsp/jstl/functions" %>
<link href="${ctxStatic}/plugins/artDialog/skins/aero.css" rel="stylesheet" type="text/css" />
<script src="${ctxStatic}/plugins/jquery/jquery-3.1.1.min.js"></script>
<script src="${ctxStatic}/plugins/artDialog/dialog-plus.js"></script>
```
然后我们需要添加一个
按钮，用于触发
弹窗。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<button type="button" onclick="showDialog()">打开
弹窗</button>
```
接着，我们需要创建一个`div`元素，用于存放
弹窗中的内容。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<div id="dialogContent" style="display:none">
<!-- 左边的列表 -->
<table id="dataTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>选择</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<!-- 这里添加数据 -->
</tbody>
</table>
<!-- 右边的结果 -->
<table id="resultTable" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 这里添加数据 -->
</tbody>
</table>
<!--
确认按钮 -->
<button type="button" onclick="confirm()">确定</button>
</div>
```
接着，我们需要添加一个JS函数，用于
弹出弹窗。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function showDialog() {
var dialogContent = $("#dialogContent").html();
dialog({
title: '
弹窗',
content: dialogContent,
lock: true,
width: 600,
height: 400
});
}
</script>
```
现在我们已经完成了子页面的布局，接下来需要编写JS代码实现子页面的功能。
首先，我们需要在JS中定义两个变量，分别表示左边列表的数据和右边结果的数据。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
var data = [
{ "name": "张三", "sex": "男", "age": 20 },
{ "name": "李四", "sex": "女", "age": 30 },
{ "name": "王五", "sex": "男", "age": 25 },
{ "name": "赵六", "sex": "女", "age": 35 },
{ "name": "孙七", "sex": "男", "age": 22 }
];
var result = [];
</script>
```
然后，我们需要编写JS函数，用于渲染左边列表的数据。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function renderTable(data) {
var tbody = $("#dataTable tbody");
tbody.empty();
$.each(data, function(index, item) {
var tr = $("<tr>");
tr.append($("<td>").append($("<input>").attr("type", "checkbox").attr("value", index)));
tr.append($("<td>").text(item.name));
tr.append($("<td>").text(item.sex));
tr.append($("<td>").text(item.age));
tbody.append(tr);
});
}
</script>
```
然后，我们需要编写JS函数，用于渲染右边结果的数据。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function renderResult() {
var tbody = $("#resultTable tbody");
tbody.empty();
$.each(result, function(index, item) {
var tr = $("<tr>");
tr.append($("<td>").text(item.name));
tr.append($("<td>").text(item.sex));
tr.append($("<td>").text(item.age));
tr.append($("<td>").append($("<button>").text("
删除").attr("onclick", "removeResult(" + index + ")")));
tbody.append(tr);
});
}
</script>
```
然后，我们需要编写JS函数，用于实现条件查询。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function search() {
var name = $("#name").val();
var sex = $("#sex").val();
var age = $("#age").val();
var newData = [];
$.each(data, function(index, item) {
if ((name == "" || item.name.indexOf(name) != -1) &&
(sex == "" || item.sex == sex) &&
(age == "" || item.age == age)) {
newData.push(item);
}
});
renderTable(newData);
}
</script>
```
然后，我们需要编写JS函数，用于实现分页。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
var pageSize = 2;
var pageNum = 1;
function pageUp() {
if (pageNum > 1) {
pageNum--;
renderTable(getPageData());
}
}
function pageDown() {
if (pageNum < getPageCount()) {
pageNum++;
renderTable(getPageData());
}
}
function getPageData() {
var start = (pageNum - 1) * pageSize;
var end = start + pageSize;
return data.slice(start, end);
}
function getPageCount() {
return Math.ceil(data.length / pageSize);
}
</script>
```
然后，我们需要编写JS函数，用于实现多选框。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function selectAll() {
$("#dataTable tbody input[type='checkbox']").prop("checked", true);
}
function unselectAll() {
$("#dataTable tbody input[type='checkbox']").prop("checked", false);
}
function getSelectedData() {
var selected = [];
$("#dataTable tbody input[type='checkbox']:checked").each(function() {
var index = $(this).val();
selected.push(data[index]);
});
return selected;
}
function addToResult() {
var selected = getSelectedData();
$.each(selected, function(index, item) {
result.push(item);
});
renderResult();
}
function removeResult(index) {
result.splice(index, 1);
renderResult();
}
</script>
```
最后，我们需要编写JS函数，用于实现
确认按钮。可以在`childPage.
jsp`文件中添加以下代码：
```
jsp
<script>
function confirm() {
var selected = getSelectedData();
var names = [];
$.each(selected, function(index, item) {
names.push(item.name);
});
var parentInput = window.parent.$("#parentInput");
parentInput.val(names.join(", "));
dialog.get('artDialog').close();
}
</script>
```
现在我们已经完成了子页面的所有功能，可以在父页面中调用子页面的方法，实现
弹窗的效果。
扫一扫
3623
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
