JTable/index.html at master · vkyin/JTable · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	</head>
	<body>
		<table class='table table-bordered table-hover' id='traffic_monitor_table'>
			<thead>
				<tr>
					<th>日期</th>
					<th>渠道号</th>
					<th><span>合作方名称</span></th>
					<th><span>增存量类型</span></th>
					<th><span>新增用户量</span></th>
					<th><span>异常天数</span></th>
					<th><span>异常增量天数</span></th>
					<th><span>异常减量天数</span></th>
				</tr>
			</thead>
		</table>
		<input type="radio" name="name" checked="checked" value="1"/>
		<input type="radio" name="name" checked="checked" value="2"/>
		<input type="radio" name="name" checked="checked" value="3"/>
		<table id="testTable" class='table table-bordered table-hover'></table>
		<table id="testTable1" class='table table-bordered table-hover'></table>
		<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
		<script type="text/javascript" src="js/jqtable.js" ></script>
		<script type="text/javascript" src="js/jqtable2.0.js" ></script>
		<script>
			var jTable1 = new JTable({
				target: $("#testTable"),
				heads: [
					{
						"name":"合作方名称",
						"key":"vendorName",
						"attributes":{
							"class":"hehehe",
							"name":"hohoho",
							"tooltip":"asdfasdf"
						},
						"sortable":true,
						"resizable":true,
						"visible":true,
						"checkBox":{
							"enabled":true,
							"isChecked":true,
							"type":"radio",
						}
					},
					{
						"name":"yonghuliang",
						"checkBox":{
							"enabled":true,
							isChecked:true
						}
					},{
						"name":"新一列",
						"key":"c"
					}
				],
				data: [
					[1,2,3],
					[4,25,{
						value:36,
						attributes:{
							"class":"xixixi"
						}
					}],
					{
						vendorName:"huawei",
						yonghuliang:{
							value:36,
							attributes:{
								"class":"xixixi"
							}
						},
						c:"asdfasdf"
					}
				],
				tdParser:function(o){
					if(Object.prototype.toString.call(o) === "[object Object]"){
						return "<td>"+o.value+"</td>";
					}else{
						return "<td>"+o+"</td>";
					}
				},
				pagination: {
					enabled: false,
				}
			});
			var jTable2 = new JTable({
				target: $("#testTable1"),
				heads: [
					{
						name: "",
						key: "expand"
					},{
						name:"日期",
						key:"date"
					},{
						name:"渠道号",
						key:"channel"
					},{
						name:"合作方名称",
						key:"vendorName"
					},{
						name:"增存量类型",
						key:"incrementStockType"
					},{
						name:"新增用户量",
						key:"newUserCount"
					},{
						name:"异常天数",
						key:"abnormalDaysCount"
					},{
						name:"异常增量天数",
						key:"posAbnormalDaysCount"
					},{
						name:"异常减量天数",
						key:"negAbnormalDaysCount"
					}
				],
				data:[{"startDate":20150101,"endDate":20150131,"product":66,"channel":991310,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":199458,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":992183,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":173170,"posAbnormalDaysCount":3,"negAbnormalDaysCount":4,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":0,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":69289,"posAbnormalDaysCount":0,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991697,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":61303,"posAbnormalDaysCount":1,"negAbnormalDaysCount":2,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991254,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":53156,"posAbnormalDaysCount":5,"negAbnormalDaysCount":5,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991281,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":46754,"posAbnormalDaysCount":1,"negAbnormalDaysCount":2,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":1366,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":44524,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":996687,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":34842,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991247,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":31416,"posAbnormalDaysCount":0,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":996310,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":29268,"posAbnormalDaysCount":5,"negAbnormalDaysCount":4,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":997517,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":27630,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991246,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":23206,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":991653,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":21484,"posAbnormalDaysCount":1,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":77449,"vendorName":"力天保利","vendorId":189,"incrementStockType":"增量一组","newUserCount":19910,"posAbnormalDaysCount":0,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":997787,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":18527,"posAbnormalDaysCount":2,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":1356,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":17645,"posAbnormalDaysCount":0,"negAbnormalDaysCount":2,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":997964,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":16654,"posAbnormalDaysCount":1,"negAbnormalDaysCount":3,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":78427,"vendorName":"北京杰瑞八达","vendorId":864,"incrementStockType":"增量一组","newUserCount":15180,"posAbnormalDaysCount":0,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":79036,"vendorName":"腾讯","vendorId":657,"incrementStockType":"","newUserCount":12727,"posAbnormalDaysCount":2,"negAbnormalDaysCount":1,"detailData":[]},{"startDate":20150101,"endDate":20150131,"product":66,"channel":993602,"vendorName":"unknown","vendorId":0,"incrementStockType":"","newUserCount":11569,"posAbnormalDaysCount":0,"negAbnormalDaysCount":2,"detailData":[]}],
				dataPreProcess:function(data){
					data.expand = '<span class="icon-double-angle-up icon-double-angle-down" data-channel="0" data-vendor="0"></span>';
					data.date = data.startDate + " - " + data.endDate;
					data.abnormalDaysCount = data.posAbnormalDaysCount + data.negAbnormalDaysCount;
				}
			});
			jTable2.pagination({
				"infoText":"当前显示 {total}条中 {lIndex}-{rIndex} 条",
				total:300,
				curPage:9,
				onPageClick:function(num,e){
					console.log(num)
				},
				onInit:function(){}
			});
		</script>
	</body>
</html>