Calculation/app/view/shares/col_set_modal.ejs

<!--弹出列设置-->
<div class="modal fade" id="custom-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" id="custom-col-set-table">
                </table>
            </div>
            <form class="modal-footer" >
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary btn-sm" id="custom-col-set-ok">确定修改</button>
            </form>
        </div>
    </div>
</div>
<script>
    const customColSet = (function () {
        const loadLocalColSet = function(setting, cache) {
            if (!cache) {
                const cacheStr = setting.key ? getLocalCache(setting.key) : '';
                cache = cacheStr ? JSON.parse(cacheStr) : [];
            }
            for (const col of setting.colSet) {
                if (col.fixed && col.fixed.indexOf(col.field) > 0) {
                    col.show = 1;
                } else {
                    const selfSet = cache.find(x => { return x.field === col.field; });
                    col.show = selfSet ? selfSet.show : 1;
                }
            }
            return setting.colSet;
        }
        const getColSetTableHtml = function(setting) {
            const html  = [];
            html.push('<tr class="text-center"><th>列名</th><th width="50px">显示</th></tr>');
            for (const col of setting.colSet) {
                html.push(`<tr class="text-center" code="${col.field}">`);
                html.push(`<td>${col.name}</td>`);
                if (col.fixed && col.fixed.indexOf('show') >= 0) {
                    html.push(`                        <td>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox-${col.field}" checked="" disabled="">
                                <label class="form-check-label" for="inlineCheckbox-${col.field}"></label>
                            </div>
                        </td>`);
                } else {
                    html.push(`                        <td>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" id="inlineCheckbox-${col.field}" ${ (col.show ? 'checked' : '') } >
                                <label class="form-check-label" for="inlineCheckbox-${col.field}"></label>
                            </div>
                        </td>`)
                }
                html.push('</tr>');
            }
            $('#custom-col-set-table').html(html.join(''));
        }
        const show = function(setting) {
            loadLocalColSet(setting);
            getColSetTableHtml(setting);
            $('#custom-col-set-ok').bind('click', function() {
                const trs = $('tr[code]', '#custom-col-set');
                const colSet = [];
                for (const tr of trs) {
                    colSet.push({ field: $(tr).attr('code'), show: $('input[type=checkbox]', tr)[0].checked});
                }
                setLocalCache(setting.key, JSON.stringify(colSet));
                if (setting.afterSet) setting.afterSet(loadLocalColSet(setting, colSet));
                $('#custom-col-set').modal('hide');
            });
            $('#custom-col-set').modal('show');
        }
        return { show, loadLocalColSet }
    })();
</script>