前端的那些事之jquery数据驱动篇（ajax）

于 2017-01-07 13:08:00 发布
阅读量450 收藏
点赞数
文章标签： javascript 前端 json ViewUI
原文链接：https://my.oschina.net/yongxinke/blog/820413
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

jquery和layui实现后台大量数据驱动

  • index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="index.css" />
    <link rel="stylesheet" href="layui/css/layui.css" />
  </head>
  <body>
    后台的数据格式最好是demo.json的格式：
    <div class="tab-body">
      <p class="page-tab">
        <span class="layui-breadcrumb" lay-separator=">"><a href="">首页</a><a><cite>用户列表</cite></a></span></p>
      <div class="handle-box">
        <ul>
          <li class="handle-item"><span class="layui-form-label">输入用户名：</span>
            <div class="layui-input-inline"><input type="text" autocomplete="off" placeholder="请输入搜索条件" class="layui-input"></div><button class="layui-btn mgl-20">查询</button><button class="layui-btn mgl-20" id="refresh">刷新</button><span class="fr"><a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delect-all"><i class="linyer icon-delect"></i> 批量删除</a><a class="layui-btn btn-add btn-default" id="btn-adduser"><i class="linyer icon-add"></i> 添加用户</a></span></li>
        </ul>
      </div>
      <table class="table-box table-sort" id="userTable">
        <thead>
          <tr>
            <th><input type="checkbox" class="btn-checkall fly-checkbox"></th>
            <th>ID</th>
            <th>用户名</th>
            <th>性别</th>
            <th>手机</th>
            <th>身份证号</th>
            <th>邮箱</th>
            <th>地址</th>
            <th>加入时间</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>
    <script src="layui/layui.js"></script>
    <script src="jquery-2.2.4.js"></script>
    <script src="meteServer.js"></script>
    <script>
//两种调用方式都可以
            $(function () {
                $.ajax({
                    url:"user.json",
                    type:"get",
                    dataType:"json",
                    success: function(data) {
                        MetaData.load(data);
                    },
                    error:function () {
                        console.log("亲错了");
                    }
                })
//                $.getJSON("user.json", function (obj) {
//                    console.log(1);
//
//                    console.log(MetaData.load(obj));
//                    ;//通过加载数据让metaData驱动程序工作
//                });
            });
    </script>
  </body>

</html>

##　meteServer.js数据驱动模块

/**
 * 上官清偌
 */
var MetaData = (function () {
    var __PROTOTYPE__ = {
        //装载元数据
        "load": function (metaData) {
            metaData = metaData || {};
            for (var tab in metaData) {
                if (this[tab]) {
                    this[tab].load = true;//打开渲染按钮
                    this[tab].data = metaData[tab];
                }
            }
            this.driver();
        },
        //驱动所有load为true的模块的render方法
        "driver": function () {
            for (var module in this) {
                var m = this[module];
                if (m.load) {
                    m.beforeRender && m.beforeRender(this);//渲染模块之前回调
                    m.render && m.render(this);//渲染模块
                    m.afterRender && m.afterRender(this);//渲染模块之后回调
                    m.load = false;//关闭渲染按钮
                }
            }
        }
    };
    return $.extend({
        /*
        * //查询条件
         "querys":{
         "querys.billAmt":null,
         "querys.discountRate":null,
         "querys.latestAccountDateFrom":null,
         "querys.latestAccountDateTo":null,
         "querys.acceptBank":null,
         "querys.acceptBankType":null,
         "pageNo":null,
         "pageSize":null,
         "totalPage":null
         },//查询条件模块
         "detail":{
         "load":false,//开关，如果load为true，就调用该模块渲染方法
         "data":null,
         "render":function(metaData){
         $.each(this.data,function(key,val){
         var $obj = $("#"+key);
         $obj.text(Utils.numberFormat($obj,val));
         });
         }
         },//详细数据模块
         "invest":{
         "load":false,
         "data":null,
         "render":function(metaData){
         console.log("invest===="+this);
         }
         },//当前可投模块
         "flow":{
         "load":false,
         "data":null,
         "render":function(metaData){
         console.log("flow===="+this);
         }
         },//当前现金模块
         "overview":{
         "load":false,
         "data":null,
         "render":function(metaData){
         console.log("overview===="+this);
         }
         },//已选票据模块
         "forecast":{
         "load":false,
         "data":null,
         "render":function(metaData){
         console.log("forecast===="+this);
         }
         },//投后现金模块
        *
        *
        * */


        "data": {
            "load": false,
            "data": null,
            "target": $("#userTable tbody"),//渲染数据的目标
            "beforeRender": function (metaData) {//渲染数据之前
                var data = this.data;
                //要查询的数目
                // metaData.querys.pageNo=data.pageNo;
                // metaData.querys.pageSize=data.pageSize;
                // metaData.querys.totalPage=data.totalPage;
                //show loading
            },
            //
            "render": function (metaData) {
                //先清空tbody
                this.target.empty();
                //防止是空数组
                this.data = this.data || [];
                var row;
                for (var i = 0; i < this.data.length; i++) {
                    row = this.data[i];
                    // console.log(row);
                        this.target.append(
                            '<tr role="row" class="odd">' +
                            '<td><input type="checkbox" class="fly-checkbox" name="sublist" data-id="16"></td>' +
                            '<td class="">'+row.id+'</td>' +
                            '<td><u class="btn-showuser">'+row.userName+'</u></td>' +
                            '<td>'+row.userSex+'</td>' +
                            '<td class="">'+row.phone+'</td>' +
                            '<td>'+row.identity+'</td>' +
                            '<td class="">'+row.email+'</td>' +
                            '<td class="">'+row.address+'</td>' +
                            '<td class="sorting_1">'+row.joinTime+'</td>' +
                            '</tr>'
                        )
                    console.log(this.target);

                }
            },
            "afterRender": function () {
                //渲染数据之后
                //hide loading

            }
        }//列表数据模块);

    }, __PROTOTYPE__);
})();

demo.json格式，后台传输的数据格式

{
  "detail": {
    "totalInvestmentAmt": 100000,
    "totalBillAmt": 123123,
    "totalDueYield": 4250,
    "weightedAverageYield": 0.17,
    "totalBillCnt": 10,
    "checkList": 4324234,
    "isPartSubmit": "NO",
    "latestRepayTime": 54354324,
    "itrtBeginTime": 23423243
  },
  "invest": {
    "bar": {
      "2016-07": 650000.00,
      "2016-09": 500000.00
    },
    "pie2": {
      "5%以下": 1150000.00,
      "5%-6%": 0.00,
      "6%-7%": 0.00,
      "7%-8%": 0.00,
      "8%-9%": 0.00,
      "9%以上": 0.00
    },
    "pie1": {
      "国行": 500000.00,
      "股份": 400000.00,
      "城商": 0.00,
      "农商": 0.00,
      "农信": 0.00,
      "其他": 250000.00
    }
  },
  "list": {
    "pageNo": 1,
    "pageSize": 4,
    "orderBy": null,
    "order": null,
    "autoCount": true,
    "totalPage": 2,
    "start": 0,
    "result": [
      {
        "id": 78,
        "billNo": "0876543210321666",
        "fincCycle": 2,
        "remainDeadline": 100,
        "yearlyRate": 0.038100,
        "discountRate": 0.036700,
        "faceAmt": 500000.00,
        "subscriptionAmt": 494902.78,
        "accountDate": 1474560000000,
        "acceptBankTypeCd": 0,
        "acceptBankName": "中国工商银行股份有限公司北京通州支行新华分理处",
        "productInfoId": 74
      },
      {
        "id": 60,
        "billNo": "0876543210321698",
        "fincCycle": 4,
        "remainDeadline": 36,
        "yearlyRate": 0.030500,
        "discountRate": 0.029600,
        "faceAmt": 200000.00,
        "subscriptionAmt": 199408.00,
        "accountDate": 1469030400000,
        "acceptBankTypeCd": 1,
        "acceptBankName": "中国工商银行股份有限公司北京通州支行新华分理处",
        "productInfoId": 62
      },
      {
        "id": 64,
        "billNo": "0876543210321699",
        "fincCycle": 6,
        "remainDeadline": 37,
        "yearlyRate": 0.031600,
        "discountRate": 0.029600,
        "faceAmt": 200000.00,
        "subscriptionAmt": 199391.56,
        "accountDate": 1469116800000,
        "acceptBankTypeCd": 1,
        "acceptBankName": "中国工商银行股份有限公司北京通州支行新华分理处",
        "productInfoId": 63
      },
      {
        "id": 41,
        "billNo": "5000000000000011",
        "fincCycle": 7,
        "remainDeadline": 38,
        "yearlyRate": 0.037300,
        "discountRate": 0.035000,
        "faceAmt": 250000.00,
        "subscriptionAmt": 249076.39,
        "accountDate": 1469376000000,
        "acceptBankTypeCd": 5,
        "acceptBankName": "天津农村合作银行",
        "productInfoId": 41
      }
    ],
    "totalCount": 4,
    "orderBySetted": false,
    "totalPages": 1,
    "hasNext": false,
    "nextPage": 1,
    "hasPre": false,
    "prePage": 1,
    "first": 1
  }
}

user.json格式

{
    "data": [
        {
            "id": "1",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "2",
            "userName": "李四",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13488888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "3",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13988888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "4",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "15888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "5",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13884888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "6",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13898888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "7",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "17888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "8",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "18888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "9",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "14888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "10",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "11",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "12",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "13",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "14",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "15",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "15",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "女",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5132054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5192054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zha1ngsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5222054411112454411",
            "phone": "13881888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479361303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "6542054411112454411",
            "phone": "13888888888",
            "email": "zh2angsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "1zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371304164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371203164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "北京",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "上海",
            "joinTime": "1479371303164",
            "status": false
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        },
        {
            "id": "16",
            "userName": "张三",
            "userSex": "男",
            "identity": "5112054411112454411",
            "phone": "13888888888",
            "email": "zhangsan@163.com",
            "address": "四川省成都市青羊区xxx街道",
            "joinTime": "1479371303164",
            "status": true
        }
    ]
}

转载于:https://my.oschina.net/yongxinke/blog/820413

weixin_34383618
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值