vue flexigrid实现ajax数据生成表格分页查询效果代码-html代码-BFW代码库

vue flexigrid实现ajax数据生成表格分页查询效果代码

代码语言：html

所属分类：表格

代码描述：vue flexigrid实现ajax数据生成表格分页查询效果代码，采用mock模拟数据

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/elementui.js"></script>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/elementui.css">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/flexigrid-vue.js"></script>

    <script type="text/javascript">
        $(function() {
            Mock.mock(/\/api\/[\s\S]*?/,
                {
                    "code": 200,
                    "msg": "",
                    "data": {
                        "now_page": "1",
                        "total_num": 643,
                        "list|5": [{
                            "operation": "<a class='btn blue' href='#'><i class='fa fa-pencil-square-o'><\/i>编辑<\/a>",
                            "member_id": "@id",
                            "member_name": "<img src='//repo.bfw.wiki/bfwrepo/image/5e0c6f2cae508.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90' class='user-avatar'>@name",
                            "member_email": "@email",
                            "member_mobile": "@name",
                            "member_sex": "男",
                            "member_truename": "@name",
                            "member_birthday": "@datetime",
                            "member_time": "@datetime",
                            "member_login_time": "@datetime",
                            "member_login_ip": "@ip",
                            "member_state": "<span class=\"yes\"><i class=\"fa fa-check-circle\"><\/i>是<\/span>"
                        },

                        ]
                    }
                }

            );
            // 高级搜索提交
            $('#search').click(function() {
                $("#flexigrid").flexOptions({
                    url: '/api/'
                }).flexReload();
            });
            // 高级搜索重置
            $('#reset').click(function() {
                $("#flexigrid").flexOptions({
                    url: '/api/'
                }).flexReload();
            });
            $("#flexigrid").flexigrid({
                url: '/api/',
                colModel: [{
                    display: '操作', name: 'operation', width: 60, sortable: false, align: 'center', className: 'handle-s'
                },
                    {
                        display: 'ID', name: 'member_id', width: 40, sortable: true, align: 'center', isKey: 1
             .........完整代码请登录后点击上方下载按钮下载查看