JS后台列表页封装

app.js

/* ------------------------------------------------------------------------------
 *
 *  后台列表页封装：包括checkbox选中，行选中，操作封装，隔行变色等
 *  # 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",          //隔行变色 色值
        highnight_bgcolor: "#B2E0FF"        //鼠标高亮 色值
    };
    return {
        init: function (option) {
            $this = this;
            $this.config = $.extend(defaults, option);
            $this.initDom();
            $this.initOperate();
        },

        initDom: function () {
            //隔行变色
            $("tr:gt(0):even").css("background-color", $this.config.toggle_bgcolor);
            //鼠标经过变色
            $("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全选
            $("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();
            });

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

            //批量操作
            $('a[data-operate="batch"], button[data-operate="batch"], input[data-operate="batch"]').click(function () {
                operate.batchModel($(this));
            });
            //简单异步get/post操作
            $('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));
                });
            });
            //添加编辑弹出层操作
            $('a[data-operate="add"], button[data-operate="add"],a[data-operate="edit"], button[data-operate="edit"]').click(function () {
                operate.ajaxModal($(this));
            });

            //删除操作弹出层操作
            $('a[data-operate="delete"], button[data-operate="delete"]').click(function () {
                operate.deleteModal($(this));
            });
        }
    }
}();

 操作js

/* ------------------------------------------------------------------------------
 *
 *  表单操作类 基于lhgdialog弹窗插件
 *  <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 {
        //异步请求弹出modal框
        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');
            //判断ajax是否执行完成
            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 ? "操作成功" : (result.info ? result.info : "操作失败");
                    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 = {};
            //获取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("无效请求URL");
                return false;
            }

            //判断ajax是否执行完成
            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 ? "操作成功" : (result.info ? result.info : "操作失败");
                    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("请求异常:" + e.message);
                }
            })
        },

        //删除
        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') : '您确认要删除此条记录吗?';
            if (!id || !url) {
                operate.showMessage("参数传递有误");
                return false;
            }
            $.dialog.confirm(title, function () {
                //判断ajax是否执行完成
                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 ? "操作成功" : (result.info ? result.info : "操作失败");
                        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);
                                }
                            }
                        }
                    }
                });
            });
        },

        //选中行操作
        selectRow: function (obj) {
            if (obj.hasClass("action") == true) return false; //操作列剔除
            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选中
        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);
            });
        },

        //批量操作
        batchModel: function (obj) {
            var title = obj.data('title') ? obj.data('title') : '您确认要批量删除吗?';
            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(","); //字符分割
                            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 () {
                    //判断ajax是否执行完成
                    if (request_handler === true) {
                        return false;
                    }
                    request_handler = true;
                    $.ajax({
                        type: "GET",
                        cache: false,
                        dataType: 'json',
                        url: url,
                        data: {data: data},
                        success: function (result) {
                            request_handler = false;

                            var msg = result.status ? "操作成功" : (result.info ? result.info : "操作失败");
                            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("请勾选后再操作");
            }
        },

        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>唯一编码</th>
                                <th>厂商名称</th>
                                <th>关联品牌</th>
                                <th>排序</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>雅宾纳</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>小鹏汽车</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>