请使用jeesite1.x框架的基础上，生成一个控件的代码，包括java、jsp、tag等文件。控件内容是：点击父页面的按钮，弹出子页面的窗口，弹窗包含了3个部分的内容，左边是列表的数据的table展示，包括：条件查询、分页、多选框。右边是左边多选框打勾的数据的结果显示，同时右边的数据有个删除按钮可以手工点击进行数据删除，左边的table展示在分页或者查询时不会影响右边已选定数据结果。最下面有一个确定按钮可以将右边已选的数据写到父页面的输入框上。

对于这个需求，我们可以参考jeesite1.x框架中的代码生成器，自动生成相关代码。下面简单介绍一下控件的实现过程。

首先我们需要在父页面上添加一个按钮，通过点击该按钮弹出子页面。可以在父页面的jsp文件中添加以下代码：

<button type="button" onclick="openChildPage()">打开子页面</button>

<script>
function openChildPage() {
    window.open("${ctx}/childPage");
}
</script>

其中，`${ctx}`为jeesite1.x框架中的上下文路径，可以在Controller中使用`@ModelAttribute`注解获取。

接着，我们需要在Controller中添加请求处理方法，用于返回子页面的JSP。可以在Controller中添加以下代码：

@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`文件中添加以下代码：

<%@ 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`文件中添加以下代码：

<button type="button" onclick="showDialog()">打开弹窗</button>

接着，我们需要创建一个`div`元素，用于存放弹窗中的内容。可以在`childPage.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`文件中添加以下代码：

<script>
function showDialog() {
    var dialogContent = $("#dialogContent").html();
    dialog({
        title: '弹窗',
        content: dialogContent,
        lock: true,
        width: 600,
        height: 400
    });
}
</script>

现在我们已经完成了子页面的布局，接下来需要编写JS代码实现子页面的功能。

首先，我们需要在JS中定义两个变量，分别表示左边列表的数据和右边结果的数据。可以在`childPage.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`文件中添加以下代码：

<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`文件中添加以下代码：

<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`文件中添加以下代码：

<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`文件中添加以下代码：

<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`文件中添加以下代码：

<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`文件中添加以下代码：

<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>

现在我们已经完成了子页面的所有功能，可以在父页面中调用子页面的方法，实现弹窗的效果。