彈框勾選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');
        }
    });
}

 

效果：

總結：說實話這幾次寫的筆記是很啰嗦了，代碼粘的太多，給人一種視覺沖擊，沖擊的效果就是，一坨一坨的不想看，看不下去，ε=(´ο｀*)))唉