JS后台列表页封装

最新推荐文章于 2020-10-06 13:56:04 发布
原创 最新推荐文章于 2020-10-06 13:56:04 发布 · 169 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#json #javascript #ViewUI

本文介绍了一种后台列表页的封装方法，包括checkbox选择、行选择、操作封装等功能，并展示了如何实现隔行变色、鼠标高亮等效果。同时，文章提供了基于lhgdialog插件的表单操作类，实现异步请求、批量操作及各种按钮交互。

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>

 

vue3列表页搜索条件封装
yan1915766026的博客
08-17 1116
vue3搜索栏封装，简单、统一、易于维护
封装 后台返回列表中不同状态展示不同数据颜色
lzfengquan的博客
04-26 1949
原本我们正常的接口调取和渲染列表就没啥事了，现在需要优化一下，看着好看点，那我们就封装一下，让其他域的也能调用我们的封装，写个公共组件引用就OK了。 我们以react 项目为例 在我们需要改变状态颜色的页面引入我们的公共颜色配置就搞定了 import { statusMap } from '@/utils'; { title: '核销状态', align: 'center', dataIndex: 'verStateName', render: (text, record) => .
JS 后台管理菜单
08-13
NULL 博文链接：https://onestopweb.iteye.com/blog/2310324
js单向链表的基本实现
ab31ab的博客
06-13 1060
单向链表 1.单向链表的封装 单链表跟双向链表一样,js里的引用类型有点不太懂，此处的this.head不知道是看做指针还是头结点来使用。 我在这里是把this.head复制了一个节点数据，同时把this.head的看做了指针指向了第一个新节点（不这样想看不下去了），按我的想法插入第一个节点的时候是 this.head.next=newNode.先记...
列表页面JS
coolform最轻量级的PHP开发框架
01-04 333
var total_page=1; function first_page(){$("#page_no").val("1");do_search();} function prev_page(){ if($("#page_no").val()<=1){ alert("已经是第一页"); return false; } $("#page_no").val(($("#page_no")
js封装任意级列表模块
一粒一粒堆沙起了一片沙滩
09-22 780
在开发中常常会使用到多级列表。为了不再重复写构建列表的代码，可以规定列表的数据格式，并将列表封装成一个可重用的模块，因为递归解析列表数据源，所以支持任意多级，代码在最后给出链接。效果（可拖动列表头部标题，拉伸列表）：要代码这个模块，传入的数据要遵守以下格式 var node0 = { "nodeLevels": 0, "type": 0, "isChe
vue.js如何将echarts封装为组件一键使用详解
10-19
Echarts 、 Remodal和Pikaday是我们在开发后台管理类网站时常用的三个第三方组件，下面这篇文章主要给大家介绍了关于vue.js如何将echarts封装为组件一键使用的相关资料，文中通过示例代码介绍的非常详细，需要的朋友...
钉钉开发者服务端API后台封装，微信js-sdk验证，百度编辑器后台。
06-10
钉钉开发者服务端API后台封装，微信js-sdk验证，百度编辑器后台。 下载内容是一个springboot的项目，代码中有已经实现的例子可以自己看看，这个是我开发的项目已经把涉密的内容都删除了，留下钉钉，微信，百度编辑...
echarts后台封装（java）
12-12
通过以上方式，我们可以有效地使用Java进行ECharts的后台封装，提高项目的开发效率和数据可视化质量。这样的封装对于大型项目尤其有价值，因为它可以保持前后端职责分明，提高代码的可读性和可维护性。同时，也能为...
后台模板，最全的标签，包括列表，单页，按钮，弹窗等等
03-14
后台模板，最全的标签，包括列表，单页，按钮，弹窗等等后台模板，最全的标签，包括列表，单页，按钮，弹窗等等
后台管理列表分页封装
小青蛙的博客
04-01 2117
今天整理下PHP后台分页封装：其大致的原理，就是通过$_REQUEST[‘page’]获取当前的页码数，来渲染要生成的页码列表,每次点击新的页码就会重新渲染封装这个函数需要哪些参数：（1）       当前要渲染的页码值（2）       总的页码数（3）       其他search条件 “&amp;cid=2&amp;pid=6 …” function showPage($page, $tot...
06-原生js实现新闻列表页面
Notes
10-06 1404
目录1. 搭建服务器2. 主页显示数据的处理3. 其余路径的处理4. 完整代码 1. 搭建服务器 为了页面能够正常显示中文，需要设置头部 头部的查看：控制台 — Network — 文件 — Headers req:从浏览器到客户端【请求】 res:从客户端到浏览器【响应】 const server = http.createServer((req, res) => { res.setHeader("content-type", "text/html;charset=utf-8"); })
js封装的各种写法
List_dong 前端技术共享平台
08-18 1427
前言 在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。今天，我就来谈谈js写法，我在开发过程中，也写了几种。对于性能方面，如果代码结构或逻辑写的不好，会造成计算机CPU的运算加大，运行性能降低，js的写法对性能的影响也是至关重要的。 通常写js组件开发的，都会用到匿名函数的写法去封装一个对...
Vue后台管理系统用户认证封装
weixin_33739627的博客
06-11 378
在使用vue技术栈开发各类管理系统时，经常需要相同的开发目录架设。在日常开发中，整理了一套自己的开发目录。主要包括vuejs、vue-router、vuex、axios等常用类库。 开发依赖 "vuex": "^3.1.0", "babel-polyfill": "^6.26.0", "element-ui": "^2.9.1", "vue": "^2.5.2", "vue-rout...
vue+elementUI管理后台的列表页进入详情页
热门推荐
jiajiaranbaobao的博客
11-15 1万+
后台管理系统中经常要实现这样一个事儿，点击列表页的某一条，进入详情页，网上百度许久后，发现不能完全解决我的问题。在请教一位前端同学后，来总结下。 1，在列表页中定义点击跳转的方法： openDetail:function (row) { this.$router.push({path:'newUserDetail',query:{id:row.id}}); }, 2，在详情页接收这条数据的id：t...
js 列表，分页
小小程序猿
07-06 1027
$(document).ready(initPage); var page = 1; var pageSize = 8; function initPage() { getData(); } function getData() { microlessonDataController.getMyCo
js + ajax实现列表页到详情页的跳转
qq_41038929的博客
10-29 9085
思路是：点击列表页时，把id传给详情页，在详情页接收列表页传递过来的id，并赋到data中。 第一步：列表页传参数id： 第二步： //获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&amp;)" + name + "=([^&amp;]*)(&amp;|$)"); //构造一个含有目标参数...
列表页数据全加载 js分页处理
qq_28404381的博客
09-03 451
出现问题： $("#page").children(‘ul’).children(‘li’).click() 这个动作效果只能在第一次成功，第二次之后不能使用 原因： 页面中的ul元素被重新渲染一次，找不到改元素，无法执行click的动作 方案： $(document.body).on(‘click’,"#page>ul>li",function(){}) <!DOCTYPE &...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值