JS background list page encapsulation

app.js

/* ------------------------------------------------------------------------------
 *
 * Background list page encapsulation: including checkbox selection, row selection, operation encapsulation, interlaced color change, etc.
 *  # how2use
 *  window.onload = function () {
 *      app.init({_csrf_token: "a3d45e"});
 *  }
 *
 * ---------------------------------------------------------------------------- */
var app = function () {
    var $this;
    var defaults = {
        checkbox_name: "ids[]",             //checkbox name
        checkbox_checkall_name: "checkall", //全选input name
        toggle_bgcolor: "#EEEEEE", // interlaced color value
        highnight_bgcolor: "#B2E0FF" //Mouse highlight color value
    };
    return {
        init: function (option) {
            $this = this;
            $this.config = $.extend(defaults, option);
            $this.initDom();
            $this.initOperate();
        },

        initDom: function () {
            // interlace color change
            $("tr:gt(0):even").css("background-color", $this.config.toggle_bgcolor);
            //mouse changes color
            $("table tr:gt(0)").each(function () {
                var default_bgcolor = $(this).css("background-color");
                $(this).on('mouseover', function () {
                    $(this).css("background-color", $this.config.highnight_bgcolor);
                });
                $(this).on('mouseout', function () {
                    $(this).css("background-color", default_bgcolor);
                });
            });
            // Form
            $("form").each(function () {
                if (!$(this).find('input[name="_csrf_token"]').length) {
                    $(this).append('<input type="hidden" name="_csrf_token" value="' + $this.config._csrf_token + '">');
                }
            });
            $('form button[type="reset"]').click(function(){
                window.location.href = window.location.pathname;
            });
        },

        initOperate: function () {
            //checkbox select all
            $("input[name='" + $this.config.checkbox_checkall_name + "']").click(function () {
                var checked = $(this).is(":checked");
                $("input[name='" + $this.config.checkbox_name + "']").each(function () {
                    if ($(this).prop("disabled") == true) return false;
                    $(this).prop("checked", checked);
                });
                operate.checkBoxSetButton();
            });
            $("input[name='" + $this.config.checkbox_name + "']").change(function () {
                operate.checkBoxOpt($(this));
                operate.checkBoxSetButton();
            });

            // row operation
            $("table tr:gt(0) td").click(function () {
                operate.selectRow($(this));
                operate.checkBoxSetButton();
            });

            // batch operation
            $('a[data-operate="batch"], button[data-operate="batch"], input[data-operate="batch"]').click(function () {
                operate.batchModel($(this));
            });
            //Simple asynchronous get/post operation
            $('a[data-operate="get"], button[data-operate="get"],a[data-operate="post"], button[data-operate="post"]').each(function(){
                $(this).on('click', function() {
                    operate.simpleAjaxRequest($(this));
                });
            });
            //Add edit popup layer operation
            $('a[data-operate="add"], button[data-operate="add"],a[data-operate="edit"], button[data-operate="edit"]').click(function () {
                operate.ajaxModal($(this));
            });

            //Delete operation popup layer operation
            $('a[data-operate="delete"], button[data-operate="delete"]').click(function () {
                operate.deleteModal($(this));
            });
        }
    }
}();

 operate js

/* ------------------------------------------------------------------------------
 *
 * The form operation class is based on the lhgdialog popup plug-in
 *  <button data-operate="post" data-url="{:U('post')}" data-param-a="v1" data-param-b="v2">异步post请求</button>
 * ---------------------------------------------------------------------------- */
var operate = function () {
    var request_handler = false;
    return {
        //Asynchronous request pops up modal box
        ajaxModal: function (obj) {
            var id = obj.data ('id');
            var url = obj.data('url');
            $.dialog({id: "dialog_win", content: "url:" + url});
        },

        ajaxSaveForm: function ($submit, request_url, request_data, success_callback, failed_callback) {
            var _this = $submit;
            _this.attr('disabled', 'disabled');
            / / Determine whether the ajax execution is complete
            if (request_handler === true) {
                return false;
            }
            request_handler = true;

            $.ajax({
                type: "POST",
                dataType: "json",
                url: request_url,
                data: request_data,
                success: function (result) {
                    request_handler = false;
                    var msg = result.status ? "operation successful" : (result.info ? result.info : "operation failed");
                    if (result.status) {
                        if (typeof(success_callback) !== 'function') {
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            success_callback(result);
                        }
                    } else {
                        _this.removeAttr('disabled');
                        $form.find('input[name="_csrf_token"]').val(result._csrf_token);
                        if (typeof(failed_callback) == 'function') {
                            failed_callback(result);
                        }
                    }

                },
                error: function (e) {
                    request_handler = false;
                }
            })
        },

        simpleAjaxRequest: function (obj) {
            var request_type = obj.data('operate');
            var request_url = obj.data('url');
            var success_callback = obj.data('success');
            var failed_callback = obj.data('failed');
            var request_data = {};
            //Get the parameters passed by the post
            $.each(obj[0].attributes, function (i, attr) {
                var attr_name = attr.name;
                var attr_value = attr.value;
                if (attr_name.indexOf('data-param-') != -1) {
                    attr_name = attr_name.replace(/data-param-/g, "");
                    request_data[attr_name] = attr_value;
                }
            });

            if (!request_url) {
                operate.showMessage("Invalid Request URL");
                return false;
            }

            / / Determine whether the ajax execution is complete
            if (request_handler === true) {
                return false;
            }
            request_handler = true;

            $.ajax({
                type: request_type,
                dataType: "json",
                url: request_url,
                data: request_data,
                success: function (result) {
                    request_handler = false;

                    var msg = result.status ? "operation successful" : (result.info ? result.info : "operation failed");
                    operate.showMessage(msg);
                    if (result.status) {
                        if (success_callback) {
                            try {
                                var fn = window[success_callback];
                                fn(obj, result.data);
                            }
                            catch (e) {
                                operate.showMessage(e.message);
                            }
                        }
                    } else {
                        if (failed_callback) {
                            try {
                                var fn = window[failed_callback];
                                fn(obj, result.data);
                            }
                            catch (e) {
                                operate.showMessage(e.message);
                            }
                        }
                    }
                },
                error: function (e) {
                    request_handler = false;
                    operate.showMessage("Request exception:" + e.message);
                }
            })
        },

        //delete
        deleteModal: function (obj) {
            var id = obj.data ('id');
            var url = obj.data('url');
            var success_callback = obj.data('success');
            var title = obj.data('title') ? obj.data('title') : 'Are you sure you want to delete this record?';
            if (!id || !url) {
                operate.showMessage("The parameter was passed incorrectly");
                return false;
            }
            $.dialog.confirm(title, function () {
                / / Determine whether the ajax execution is complete
                if (request_handler === true) {
                    return false;
                }
                request_handler = true;
                $.ajax({
                    type: "GET",
                    cache: false,
                    dataType: 'json',
                    url: url,
                    data: {id: id},
                    success: function (result) {
                        request_handler = false;

                        var msg = result.status ? "operation successful" : (result.info ? result.info : "operation failed");
                        this.content(msg).time(3);
                        if (result.status) {
                            if (success_callback) {
                                try {
                                    var fn = window[failed_callback];
                                    fn(obj, result.data);
                                }
                                catch (e) {
                                    this.content(e.message).time(3);
                                }
                            }
                        }
                    }
                });
            });
        },

        //Select row operation
        selectRow: function (obj) {
            if (obj.hasClass("action") == true) return false; //Action column culling
            if (obj.siblings("td:eq(0)").children(":checkbox").prop("disabled") == true) return false;
            var checked = obj.siblings("td:eq(0)").children(":checkbox").is(":checked");
            obj.siblings("td:eq(0)").children(":checkbox").prop("checked", !checked);
        },
        //checkbox selected
        checkBoxOpt: function (obj) {
            var checked = obj.is(":checked");
            obj.prop("checked", checked);
        },

        checkBoxSetButton: function () {
            listchecked = !($("input:checked[name='" + app.config.checkbox_name + "']").length > 0);
            $("input[data-operate='batch']").each(function () {
                $(this).attr('disabled', listchecked);
            });
        },

        // batch operation
        batchModel: function (obj) {
            var title = obj.data('title') ? obj.data('title') : 'Are you sure you want to batch delete?';
            var request_data = obj.data('attributes');
            var url = obj.data('url');
            var success_callback = obj.data('success');
            listchecked = $("input:checked[name='" + app.config.checkbox_name + "']").length > 0;
            if (listchecked) {
                var data = new Array();
                $("input:checked[name='" + app.config.checkbox_name + "']").each(function () {
                    if ($(this).prop("checked") == true) {
                        if ($(this).prop("disabled") == true) return true;
                        if (request_data) {
                            var request_param = {};
                            request_data = request_data.toString().split(","); // character split
                            for (var i = 0; i < request_data.length; i++) {
                                request_param[request_data[i]] = $(this).data(request_data[i]) || '';
                                request_param['id'] = $(this).val();
                            }
                        } else {
                            request_param = {"id": $(this).val()};
                        }
                        data.push(request_param);
                    }
                });
                $.dialog.confirm(title, function () {
                    / / Determine whether the ajax execution is complete
                    if (request_handler === true) {
                        return false;
                    }
                    request_handler = true;
                    $.ajax({
                        type: "GET",
                        cache: false,
                        dataType: 'json',
                        url: url,
                        date: {date: date},
                        success: function (result) {
                            request_handler = false;

                            var msg = result.status ? "operation successful" : (result.info ? result.info : "operation failed");
                            this.content(msg).time(3);
                            if (result.status) {
                                if (success_callback) {
                                    try {
                                        var fn = window[success_callback];
                                        fn(obj, result.data);
                                    }
                                    catch (e) {
                                        this.content(e.message).time(3);
                                    }
                                }
                            }
                        }
                    });
                });
            } else {
                operate.showMessage("Please check before operating");
            }
        },

        showMessage: function (msg) {
            $.dialog({id: "msg", time: 3, content: msg, lock: true, icon: "warning", title: "温馨提示"});
        }
    };
}();

 asdfas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Core JS files -->
    <script type="text/javascript" src="/Public/js/core/libraries/jquery.min.js"></script>

    <!-- Core JS files -->
    <script type="text/javascript" src="/Public/js/core/app.js"></script>
    <script type="text/javascript" src="/Public/js/core/operate.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            app.init({});
        }
    </script>
    <!-- /Core JS files -->
</head>
<body data-spy="scroll" data-target=".sidebar-detached" class="navbar-top has-detached-right ">
<!-- Page container -->
<div class="page-container">

    <!-- Page content -->
    <div class="page-content">
        <!-- Main content -->
        <div class="content-wrapper">
            <div class="content">
                <div class="panel panel-flat border-top-primary border-top-lg">
                    <div class="panel-body">
                        <div class="btn-group">
                            <input type="submit" class="btn btn-primary" data-operate="batch" value="批量删除" disabled/>
                            <input type="submit" class="btn btn-primary" data-operate="batch" value="启用" disabled/>
                        </div>
                    </div>
                </div>
                <div class="panel border-top-primary border-top-lg">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover table-xxs">
                            <thead>
                            <tr>
                                <th><input type="checkbox" name="checkall"/></th>
                                <th>Unique Code</th>
                                <th>Vendor Name</th>
                                <th>Affiliate Brand</th>
                                <th>Sort</th>
                                <th width="270">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><input type="checkbox" name="ids[]" value="404" readonly="true"></td>
                                <td>FACT0000394</td>
                                <td><a href="http://www.baidu.com">进口雅宾纳</a> </td>
                                <td>Yabina</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/404"><i class="icon-pencil7"></i> 编辑</button>
                                    <button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="404" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ids[]" value="403" readonly="true"></td>
                                <td>FACT0000393</td>
                                <td><a href="http://www.baidu.com">驭胜</a> </td>
                                <td>驭胜</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/403"><i class="icon-pencil7"></i> 编辑</button>
                                    <button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="403" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
                                </td>
                            </tr>
                            <tr>
                                <td><input type="checkbox" name="ids[]" value="402" readonly="true"></td>
                                <td>FACT0000392</td>
                                <td><a href="http://www.baidu.com">小鹏汽车</a> </td>
                                <td>Xpeng Motors</td>
                                <td>0</td>
                                <td>
                                    <button class="btn btn-xs bg-orange-600" data-operate="edit" data-url="/Car/editFactory/id/402"><i class="icon-pencil7"></i> 编辑</button>
                                    <button class="btn btn-xs bg-danger-600" data-operate="delete" data-id="402" data-url="/Car/deleteFactory"><i class="icon-trash"></i> 删除</button>
                                </td>
                            </tr>            
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- /main content -->

    </div>
    <!-- /page content -->

</div>
<!-- /page container -->
</body>
</html>