需求描述：做编辑的时候，点击添加按钮，弹出数据表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');
}
});
}
效果：
总结：说实话这几次写的笔记是很啰嗦了，代码粘的太多，给人一种视觉冲击，冲击的效果就是，一坨一坨的不想看，看不下去，ε=(´ο｀*)))唉