Calculation/app/view/contract/col_set.ejs

<!--弹出列设置-->
<div class="modal fade" id="col-set" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">列设置</h5>
            </div>
            <div class="modal-body">
                <table class="table table-hover table-bordered">
                    <thead><tr><th width="150px" class="text-center">列名</th><th width="50px" class="text-center">显示</th><th width="150px" class="text-center">别名</th><th width="80px" class="text-center">操作</th></tr></thead>
                    <tbody class="text-center">
                    <% for (const cs of colSet) { %>
                      <tr code="<%- cs.field %>">
                          <td>
                              <%- cs.name %>
                              <% if (cs.hint) { %>
                                  <i class="fa fa-question-circle text-primary ml-1" data-placement="bottom" data-toggle="tooltip" data-original-title="<%- cs.hint %>"></i>
                              <% } %>
                          </td>
                          <% if (cs.fixed.indexOf('show') >= 0 ) { %>
                          <td>
                              <div class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" id="inlineCheckbox-<%- cs.code %>" checked="" disabled="">
                                  <label class="form-check-label" for="inlineCheckbox-<%- cs.code %>"></label>
                              </div>
                          </td>
                          <% } else { %>
                          <td>
                              <div class="form-check form-check-inline">
                                  <input class="form-check-input" type="checkbox" id="inlineCheckbox-<%- cs.code %>" <% if (cs.show) { %> checked <% } %> >
                                  <label class="form-check-label" for="inlineCheckbox-<%- cs.code %>"></label>
                              </div>
                          </td>
                          <% } %>
                          <% if (cs.fixed.indexOf('alias') >= 0) { %>
                          <td class="disabled">-</td>
                          <% } else {%>
                          <td><input type="text" class="form-control form-control-sm" value="<%- cs.alias %>"></td>
                          <% } %>
                          <td>
                              <% if (!cs.gd) { %>
                              <a href="javascript:;" class="move-up text-primary mr-2" style="text-decoration: none;">上移</a>
                              <a href="javascript:;" class="move-down text-primary" style="text-decoration: none;">下移</a>
                              <% } %>
                          </td>
                      </tr>
                      <% } %>
                    </tbody>
                </table>
            </div>
            <form class="modal-footer" action="/sp/<%- ctx.subProject.id %>/contract/<%- ctx.contractOptions.tid ? 'tender/'+ctx.contractOptions.tid + '/' : '' %>col-set" method="post" onsubmit="return onSetCol();">
                <input type="hidden" name="_csrf_j" value="<%= ctx.csrf %>">
                <input type="hidden" name="col_set" value="">
                <input type="hidden" name="type" value="<%- ctx.contract_type %>">
                <input type="hidden" name="col_type" value="info">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary btn-sm" id="add-bd-ok">确定修改</button>
            </form>
        </div>
    </div>
</div>
<script>
// 立即获取表格 tbody 并绑定事件（确保脚本加载时即可初始化）
const $tbody = $('#col-set').find('.modal-body table tbody');

// 保存初始 HTML，在关闭时恢复（保证再次打开时为初始状态）
const _initialColSetTbodyHtml = $tbody.html();

// 更新上下移链接显示状态
function updateMoveButtons() {
    const $currentRows = $tbody.find('tr');
    const totalRows = $currentRows.length;

    $currentRows.each(function(index) {
        const $row = $(this);
        const $upLink = $row.find('.move-up');
        const $downLink = $row.find('.move-down');

        if (totalRows === 1) {
            $upLink.hide();
            $downLink.hide();
        } else if (index === 0) {
            $upLink.hide();
            $downLink.show();
        } else if (index === totalRows - 1) {
            $upLink.show();
            $downLink.hide();
        } else {
            $upLink.show();
            $downLink.show();
        }
    });
}

// 立即初始化链接状态（页面渲染完成后就计算显示）
updateMoveButtons();

// 若模态框打开后表格有异步或动态变更，打开时再次校验状态
$('#col-set').on('shown.bs.modal', function() {
    updateMoveButtons();
});

// 模态框隐藏时恢复到初始内容并重新绑定必要状态
$('#col-set').on('hidden.bs.modal', function() {
    // 恢复初始 tbody 内容
    $tbody.html(_initialColSetTbodyHtml);
    // 重新计算按钮显示状态
    updateMoveButtons();
});

// 事件委托：从一开始就绑定上/下移事件
$tbody.on('click', '.move-up', function(e) {
    e.preventDefault();
    const $currentRow = $(this).closest('tr');
    const $prevRow = $currentRow.prev('tr');

    if ($prevRow.length) {
        $currentRow.insertBefore($prevRow);
        updateMoveButtons();
    }
});

$tbody.on('click', '.move-down', function(e) {
    e.preventDefault();
    const $currentRow = $(this).closest('tr');
    const $nextRow = $currentRow.next('tr');

    if ($nextRow.length) {
        $currentRow.insertAfter($nextRow);
        updateMoveButtons();
    }
});

function onSetCol() {
    const $tbody = $('#col-set').find('.modal-body table tbody');
    const $currentRows = $tbody.find('tr');
    const colSet = [];

    $currentRows.each(function() {
        const $row = $(this);
        let alias = '';
        const $aliasInput = $row.find('input[type="text"]');
        if ($aliasInput.length) {
            alias = $aliasInput.val().trim();
        }

        // 仅组装数据库需要的3个字段
        const rowData = {
            field: $row.attr('code'), // 字段标识（必填）
            show: Number($row.find('.form-check-input').is(':checked')), // 是否显示（必填）
            alias: alias // 别名（必填，固定列保存"-"）
        };

        colSet.push(rowData); // 所有行按顺序存入数组，顺序=表格排序
    });

    $('input[name=col_set]').val(JSON.stringify(colSet));
    return true;
}
</script>