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
}
]
}