layui-admin/admin/static/js/edittable/index.js

layui.use(["index", "api", "tpl", "dialog", "laypage", 'dynamicTr'], function () {
    var $ = layui.$,
        table = layui.table,
        element = layui.element,
        form = layui.form,
        admin = layui.admin,
        laypage = layui.laypage;
    var LIST_TABLE_URL = layui.api.getMockApiUrl("edittable", "list");
    var List_TABLE_ADD_URL = layui.api.getMockApiUrl(
        "edittable",
        "insert"
    );
    var LIST_TABLE_UPDATE_URL = layui.api.getMockApiUrl(
        "edittable",
        "update"
    );
    var LIST_TABLE_DELETE_URL = layui.api.getMockApiUrl(
        "edittable",
        "delete"
    );
    var where = {
        data: "",
    };
    var FORM_QUERY_ID = "lay-form-submit"; // form seach ElementId
    var LIST_TABLE_ID = "listTable"; // table ElementId
    // table field 配置
    var LIST_TABLE_COLS = [{
        field: "id",
        title: "id",
        align: "left",
        hide: true,
    },
    {
        field: "groupName",
        title: "分组名称",
        align: "left",
        // edit:"text"
    },
    {
        field: "remark",
        title: "备注",
        align: "left",
        // edit:"text"
    },
    {
        fixed: "right",
        title: "操作",
        width: 88,
        align: "left",
        toolbar: "#cellOperating",
    },
    ];
    var isEdit = false;

    init(); // 创建

    $(".add-dialog").click(function (e) {
        e.stopPropagation();
        if (isEdit) {
            layer.msg("有一个在编辑");
            return false;
        }
        isEdit = true;
        $("tbody").before(layui.dynamicTr.addTr(LIST_TABLE_COLS));
        form.render();
    });

    //单元格 操作列中 操作事件
    table.on("tool(" + LIST_TABLE_ID + ")", function (obj) {
        var data = obj.data;
        var layEvent = obj.event;
        debugger;
        if (layEvent === "add") {
            var addField = layui.dynamicTr.addFormFiled(LIST_TABLE_COLS);
            if (!addField) {
                return false;
            }
            admin.req({
                url: List_TABLE_ADD_URL,
                data: addField,
                success: function (res) {
                    layer.msg("新增成功");
                    isEdit = false;
                    layui.table.reload(LIST_TABLE_ID, { where: where });
                },
            });
        } else if (layEvent === "save") {
            var editField = layui.dynamicTr.editFormFiled(LIST_TABLE_COLS, data);
            if (!editField) {
                return false;
            }
            admin.req({
                url: LIST_TABLE_UPDATE_URL,
                data: editField,
                success: function (res) {
                    layer.msg("编辑成功");
                    layui.table.reload(LIST_TABLE_ID, { where: where });

                    // obj.update(editField);
                    isEdit = false;
                },
            });
        } else if (layEvent === "cancel") {
            layui.table.reload(LIST_TABLE_ID, { where: where });
            isEdit = false;
        } else if (layEvent === "edit") {
            if (isEdit) {
                layer.msg("有一个在编辑");
                return false;
            }
            var target = $(obj.tr);
            $(target).html(layui.dynamicTr.editTr(LIST_TABLE_COLS, data));
            isEdit = false;
        } else if (layEvent === "delete") {
            layer.confirm(
                "", {
                title: "提示",
                area: ["520px", "270px"],
                content: '<div style="margin: 50px auto;">确定删除分组吗？</div>',
                btnAlign: "r",
                btn: ["取消", "确认"],
            },
                function (index, layero) {
                    layer.close(index);
                },
                function (index) {
                    admin.req({
                        url: LIST_TABLE_DELETE_URL,
                        data: { data: obj.data },
                        success: function (res) {
                            if (res) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layui.dialog.showOkMsgDialog({
                                    msg: "无法删除，请先清空组内数据源和节点信息。",
                                });
                                return false;
                            }
                        },
                    });
                }
            );
        }
    });

    function init() {
        getTableData();
    }

    function getTableData() {
        var tableRenderOptions = {
            height: 600,
            id: LIST_TABLE_ID,
            elem: "#" + LIST_TABLE_ID,
            url: LIST_TABLE_URL,
            even: "false",
            defaultToolbar: [],
            page: false,
            cols: [LIST_TABLE_COLS],
            where: where,
            parseData: function (res) {
                return {
                    code: 0,
                    msg: "",
                    //count: res.totalSize,
                    data: res.data,
                };
            },
        };
        table.render(tableRenderOptions);
        // laypage.render({
        //   elem: "pages",
        //   count: 100,
        //   layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"],
        //   jump: function jump(obj) {
        //   }
        // });
        // admin.req({
        //   url: LIST_TABLE_URL,
        //   data: where,
        //   success: function (res) {
        //     tableRenderOptions.data = res;
        //     table.render(tableRenderOptions);
        //   },
        //   error:function(err){
        //     table.render(tableRenderOptions);
        //   }
        // });
    }
});