弹框勾选datatable中的数据，点击保存后添加到另一个表中，同一个页面

需求描述：做编辑的时候，点击添加按钮，弹出数据表table2，勾选弹出框中的数据，点击保存后能够添加到table1中，并且已经被添加到table1中的数据，在弹出框中显示已选，checkbox隐藏；table1中的操作项有一个删除，删除table1的数据之后，table2中对应数据的checkbox恢复可选。代码太多，就不废话了，直接贴代码

代码：

//html代码 
<button class="btn sbold green" id="toAddOrgPage" onclick="">
  <span class="ladda-label">
   添加机构
  </span>
</button>
//html代码 table1
<table class="table table-striped table-checkable" id="table1">
    <thead>
    <tr>
        <th><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
            <input type="checkbox" class="group-checkable" data-set="#table1 .checkboxes"/>
            <span></span>
        </label></th>
        <th>名称</th>
        <th>编码</th>
        <th>级别</th>
        <th>父级名称</th>
        <th>是否是默认</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="table1Body">
    <tr th:each="org : ${userOrgs}" th:id="${org.orgId}" role="row" class="odd" data-save="1">
        <td><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
            <input type="checkbox" class="checkboxes checkOrg2"
                   th:value="${org.orgId}" name=""/>
            <input type="text" th:value="${org.orgId}" name="orgId"
                   hidden="hidden"/>
            <input type="text" hidden="hidden" data-first-edit="1" th:value="${org.resIds}"
                   name="resIds"
                   th:class="${org.orgId}"/>
            <span></span>
        </label></td>
        <td th:text="${org.orgName}">名称</td>
        <td th:text="${org.orgCode}">编码</td>

        <div th:switch="${org.orgLevel}">
            <p th:case="'1'">
            <td th:text="一级">级别</td>
            </p>
            <p th:case="'2'">
            <td th:text="二级">级别</td>
            </p>
        </div>
        <td th:text="${org.orgParentName eq null}? '':${org.orgParentName} ">
            父级名称
        </td>
        <td><label class="mt-radio mt-radio-single mt-radio-outline">
            <input type="radio" onclick="radioClick(this)" name="radioDefault" class=""
                   th:if="${org.userOrgDefault eq '0'}"/>
            <input type="radio" onclick="radioClick(this)" name="radioDefault" class=""
                   th:if="${org.userOrgDefault eq '1'}" checked="checked"/>
            <input type="text" th:value="${org.userOrgDefault}" name="userOrgDefault"
                   hidden="hidden"/> <span></span>
        </label></td>
        <td><div>
               <img th:src="@{/assets-new/apps/img/shanchu.png}"
               th:onclick="|deleteById('${org.orgId}')|" title="删除"/>
            </div>
        </td>
    </tr>
    </tbody>
</table> 

//html代码table2
<div id="responsive_2" class="modal fade" tabindex="-1" data-width="700">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
        <h3 class="modal-title">添加按钮</h3>
    </div>
    <div class="modal-body">
            <div class="row">
            <div class="col-md-12">
            <div class="portlet light bordered">
            <div class="portlet-body">
             <table class="table table-checkable do-exclude-filtering" id="table2">
                <thead>
                <tr>
                 <th><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                   <input type="checkbox" class="group-checkable" data-set="#table2 .checkboxes"/>
                  <span></span>
                   </label></th>
                   <th>名称</th>
                   <th>编码</th>
                   <th>级别</th>
                   <th>父级别名称</th>
                   <th hidden="hidden">操作</th>
                 </tr>
                </thead>
              <tbody id="tableBody2">
                <tr th:each="org : ${listAll}" th:name="${org.orgId}" data-save="0">
                   <td><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline" name="lb">
                       <input type="checkbox" class="checkboxes checkOrg" th:value="${org.orgId}"/>
                       <span></span>
                       </label>
                       <span hidden="hidden" name="select" style="color: red">已选</span>
                   </td>
                   <td th:text="${org.orgName}">机构名称</td>
                   <td th:text="${org.orgCode}">机构编码</td>
                   <div th:switch="${org.orgLevel}">
                    <p th:case="'1'">
                    <td th:text="一级机构">机构级别</td>
                    </p>
                    <p th:case="'2'">
                    <td th:text="二级机构">机构级别</td>
                    </p>
                   </div>
                   <td th:text="${org.orgParentName eq null}? '':${org.orgParentName} ">
                                    父级名称
                   </td>
                   <td hidden="hidden">
                     <div style="display: flex; align-items: center;">
                         <div>
                            <img th:src="@{/assets-new/apps/img/shanchu.png}"
                             th:onclick="|deleteById('${org.orgId}')|" title="删除"/>
                          </div>
                      </div>
                   </td>
                   </tr>
                  </tbody>
                 </table>
                </div>
                </div>
             </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-outline blue" onclick="saveOrg()">保存
        </button>
        <button type="button" data-dismiss="modal" class="btn btn-outline dark">取消</button>
    </div>
</div>

//js代码
// 进入编辑页,回显已被选择的机构 放在初始化中
var nodes = $('#table1').DataTable().rows().nodes();
for (var i = 0; i < nodes.length; i++) {
    var nowRow = $(nodes[i]);
    var orgId = nowRow.attr("id");
    var tr = $('#table2').DataTable().row("tr[name=" + orgId + "]").node();
    $(tr).data("save", "1");
    $(tr).addClass("active");
    $(tr).find("label[name='lb'] input").prop('checked', true);
}
//点击添加按钮
$("#toAddOrgPage").click(function () {
    // 1.得到选中
    // 2.判断是否保存
    // 3.已经保存：显示已选   未保存：取消选择
    var nodes = $('#table2').DataTable().rows().nodes();
    for (var i = 0; i < nodes.length; i++) {
        var nowRow = $(nodes[i]);
        var active = nowRow.hasClass('active');
        var save = nowRow.data('save');
        if (active) {
            if (save == '1') {
                nowRow.find("label[name='lb']").hide();
                nowRow.find("span[name='select']").show();
            } else if (save == '2') { // 从已选机构中删除
                nowRow.find("span[name='select']").hide();
                nowRow.find("label[name='lb']").show();
                nowRow.find("label[name='lb'] input").prop('checked', false);
                nowRow.removeClass("active");
                nowRow.data('save', '0');
            } else if (save == 0) {   // 用户选择后点击了取消按钮
                nowRow.find("label[name='lb'] input").prop('checked', false);
                nowRow.removeClass("active");
            }
        }
    }
    $('#responsive_2').modal();
});
//点击保存按钮
function saveOrg() {
    // 1.遍历dataTable，获取每页中ck的选中状态，添加行标记为保存
    // 2.tb1添加相应行
    var nodes = $('#table2').DataTable().rows().nodes();
    for (var i = 0; i < nodes.length; i++) {
        var active = $(nodes[i]).hasClass('active');
        if (active) {
            var nowRow = $(nodes[i]);
            // 判断是否已经保存
            if (nowRow.data('save') == "1") { // 已经被保存过
                continue;
            }
            var trName = nowRow.attr("name");
            var tr = $('#table2').DataTable().row(i).data();
            // 设置行的状态，标记这一行已经被保存，和选中后点击取消的行进行区分
            nowRow.data("save", "1");
            var tb1 = $('#table1').DataTable();
            var tr0 = "<label class=\"mt-checkbox mt-checkbox-single mt-checkbox-outline\">" +
                "<input type=\"checkbox\" class=\"checkboxes checkOrg2\" value=" + trName + " name=\"\" />" +
                "<input type=\"text\" value=" + trName + " name=\"orgId\" hidden=\"hidden\"/>" +
                "<input type=\"text\" hidden=\"hidden\" value=\"\" class=" + trName + "  name=\"resIds\" />" +
                "<span></span>" +
                "</label>";
            var tr4 = "<label class=\"mt-radio mt-radio-single mt-radio-outline\">" +
                "<input type=\"radio\" onclick=\"radioClick(this)\" name=\"radioDefault\" class=\"\"/>" +
                "<input type=\"text\" value=\"0\" name=\"userOrgDefault\" hidden=\"hidden\"/>" +
                "<span></span>" +
                "</label>";
            tb1.row.add({
                "DT_RowId": trName,
                "0": tr0,
                "1": tr[1],
                "2": tr[2],
                "3": tr[3],
                "4": tr[4],
                "5": tr4,
                "6": tr[5]
            }).draw();
        }
    }
    var rowCount = $("#table1").DataTable().page.info().recordsTotal;
    if (rowCount > 0) {
        // 设置默认radio
        var checkedInput = $('#table1').DataTable().$('input:radio[name="radioDefault"]:checked');
        if (checkedInput.length == 0) {
            var node = $($('#table1').DataTable().row(0).node());
            node.find('input:radio[name="radioDefault"]').prop('checked', true);
            node.find('input:radio[name="radioDefault"]').next().attr('value', '1');
        }
    }
}
//table1中点击删除
function deleteById(orgId) {
    layer.confirm("确认要删除此机构吗？", {title: "删除确认"}, function (index) {
        layer.close(index);
        // 1.删除
        // 2.改变tb2中相应的行的状态为未选中
        $('#table1').DataTable().row('#' + orgId).remove().draw();
        var delRow = $($('#table2').DataTable().row('tr[name=' + orgId + ']').node());
        // 标记为从已选中机构中删除
        delRow.data('save', '2');

        var rowCount = $("#table1").DataTable().page.info().recordsTotal;
        if (rowCount > 0) {
            // 设置默认radio
            var checkedInput = $('#table1').DataTable().$('input:radio[name="radioDefault"]:checked');
            if (checkedInput.length == 0) {
                var node = $($('#table1').DataTable().row(0).node());
                node.find('input:radio[name="radioDefault"]').prop('checked', true);
                node.find('input:radio[name="radioDefault"]').next().attr('value', '1');
            }
        }
    });
}
//radioClick函数
function radioClick(nowRadio) {
    $('#table1').DataTable().$('input:radio[name="radioDefault"]').each(function () {
        var c = $(this).prop("checked");
        if (c == true) {
            if (this != nowRadio) {
                $(this).prop('checked', false);
                $(this).next().attr('value', '0');
            } else {
                $(this).next().attr('value', '1');
            }
        } else {
            $(this).next().attr('value', '0');
        }
    });
}

效果：

总结：说实话这几次写的笔记是很啰嗦了，代码粘的太多，给人一种视觉冲击，冲击的效果就是，一坨一坨的不想看，看不下去，ε=(´ο｀*)))唉