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

layui.use(["api", "tpl", "dialog", "laypage"], 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("index", "list"); //查询url

    var where = {};

    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: "center",
    },
    {
        field: "name",
        title: "名称",
        align: "center",
    },
    {
        field: "createTime",
        title: "创建时间",
        align: "center",
        templet: function (d) {
            return layui.util.toDateString(d.createTime, "yyyy-MM-dd");
        },
    },
    {
        field: "fz",
        title: "所属分组",
        align: "center",
        sort: true,
        templet: function (d) {
            if (d.fz == "1") {
                return "类型1";
            } else if (d.fz == "2") {
                return "类型2";
            } else if (d.fz == "3") {
                return "类型3";
            }
            return "";
        },
    },
    {
        field: "type",
        title: "类型",
        align: "center",
        sort: true,
        templet: function (d) {
            if (d.type == "1") {
                return "类型1";
            } else if (d.type == "2") {
                return "类型2";
            } else if (d.type == "3") {
                return "类型3";
            }
            return "";
        },
    },
    {
        fixed: "right",
        title: "操作",
        width: 120,
        align: "center",
        toolbar: "#cellOperating",
    },
    ];


    init();

    $(".add-dialog").click(function (e) {
        e.stopPropagation();
        addDialog();
    });


    $(".part-full-screen").click(function (e) {
        e.stopPropagation();
        partFullScreen('part-full-screen', 'fulldiv');
    });
    $(".full-screen").click(function (e) {
        e.stopPropagation();
        var fullScreen = parseInt($(this).attr('data-screen'));
        if (fullScreen) {
            admin.exitScreen();
            $(this).attr('data-screen', '0').html('整页全屏');
        } else {
            admin.fullScreen();
            $(this).attr('data-screen', '1').html("退出整页全屏");
        }

    });
    // 重置
    $(".reset-btn").click(function (e) {
        e.stopPropagation();
        //重置where
        return false;
    });
    form.on(`submit(${FORM_QUERY_ID})`, function (data) {
        console.log("查询：", data.field);
        table.reload(LIST_TABLE_ID, { where });
    });
    //单元格 操作列中 操作事件
    table.on(`tool(${LIST_TABLE_ID})`, function (obj) {
        //阻止冒泡
        var evt = window.event || arguments.callee.caller.arguments[0]; // 获取event对象
        layui.stope(evt);
        var data = obj.data;
        var layEvent = obj.event;
        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) {
                    layui.dialog.showOkMsgDialog({ msg: "该数据存在，不能删除！" });
                    return false;
                }
            );
        } else if (layEvent === "edit") {
            $(".tips-box").remove();
            editDialog(data);
        }
    });

    function init() {
        getSelectData();
        getTableData();
    }

    function getTableData() {
        var tableRenderOptions = {
            height: 800,
            elem: "#" + LIST_TABLE_ID,
            url: LIST_TABLE_URL,
            even: "false",
            defaultToolbar: [],
            page: false,
            cols: [LIST_TABLE_COLS],
            where: {},
        };
        console.log("tableRenderOptions:", tableRenderOptions);
        table.render(tableRenderOptions);
        laypage.render({
            elem: "pages",
            count: 100,
            layout: ["count", "prev", "page", "next", "limit", "refresh", "skip"],
            jump: function (obj) {
                // console.log(obj);
            },
        });
    }

    function addDialog() {
        var templet = $("#formDialogTemplate").html();
        layui.laytpl(templet).render({}, function (html) {
            layer.open({
                type: 1,
                title: "新增",
                content: templet,
                area: [px2rem(520), px2rem(600)],
                btn: ["取消", "确认"],
                btnAlign: "r",
                yes: function (index, layero) {
                    layer.close(index);
                    return false;
                },
                btn2: function (index, layero) {
                    var submit = $("#LAY-dialog-submit");
                    var submitID = "lay-dialog-submit";
                    form.on("submit(" + submitID + ")", function (data) {
                        var params = data.field; //获取提交的字段
                        // admin.req({
                        //   url: ADD_URL,
                        //   data: params,
                        //   success: function (res) {
                        table.reload(LIST_TABLE_ID, { where: where });
                        layer.msg("新增成功");
                        layer.close(index);
                        //   },
                        // });
                    });
                    submit.trigger("click");
                    return false;
                },
                success: function success() {
                    layui.form.render("");
                }
            });
        });
    }

    function editDialog(data) {
        var templet = $("#formDialogTemplate").html();
        layui.laytpl(templet).render({}, function (html) {
            layer.open({
                type: 1,
                title: "编辑",
                content: templet,
                area: [px2rem(520), px2rem(600)],
                btn: ["取消", "确认"],
                btnAlign: "r",
                yes: function (index, layero) {
                    layer.close(index);
                    return false;
                },
                btn2: function (index, layero) {
                    var submit = $("#LAY-dialog-submit");
                    var submitID = "lay-dialog-submit";
                    form.on("submit(" + submitID + ")", function (data) {
                        var params = data.field;
                        // admin.req({
                        //   url: UPDATE_URL,
                        //   data: params,
                        //   success: function (res) {
                        layui.table.reload(LIST_TABLE_ID, { where: where });
                        layer.close(index); //关闭弹层
                        layer.msg("成功");
                        //   },
                        // });
                    });
                    submit.trigger("click");
                    return false;
                },
                success: function success() {
                    data.name = "这个名字我就是要固定不改";
                    form.val("dialogForm", data);
                    layui.form.render("");
                },
            });
        });
    }

    function getSelectData() {
        var data = { list: [] };
        var res = [
            { name: "1111", value: "1111" },
            { name: "2222", value: "2222" },
        ];
        var list = [{ name: "请选择", value: "" }];
        for (var item in res) {
            var selected = false;
            list.push({
                name: res[item].name,
                value: res[item].value,
                selected: selected,
            });
        }
        data.list = list;
        layui.tpl.setSelectTpl("testIdSelect", data);
    }
});