-
Notifications
You must be signed in to change notification settings - Fork 123
/
Copy pathexamples1.html
245 lines (221 loc) · 18.5 KB
/
examples1.html
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>操作演示&Bootstrap样式</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="../examples/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../src/mmGrid.css">
<link rel="stylesheet" href="../src/theme/bootstrap/mmGrid-bootstrap.css">
<link rel="stylesheet" href="../src/mmPaginator.css">
<link rel="stylesheet" href="../src/theme/bootstrap/mmPaginator-bootstrap.css">
<style>
html,
body{
font-family: 'Helvetica Neue',helvetica, "Hiragino Sans GB",'Microsoft YaHei', "WenQuanYi Micro Hei", sans-serif;
font-size: 12px;
color: #444;
}
.btn{
font-size: 12px;
}
.btnPrice {
display: block;
width: 16px;
height: 16px;
margin: 0px auto;
background: url(img/botton_g1.gif) no-repeat;
}
.btnPrice:hover {
background: url(img/botton_g2.gif) no-repeat;
}
</style>
<!--[if lt IE 9]>
<script src="js/vendor/html5shiv.js"></script>
<![endif]-->
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body style="padding: 40px;">
<main>
<div style="margin-bottom: 5px;">
<button id="btnAdd" class="btn">添加到第三行</button>
<button id="btnAddArr" class="btn" >添加列表到第二行</button>
<button id="btnRemove" class="btn" >删除第二行</button>
<button id="btnRemoveSelected" class="btn" >删除选择的行</button>
<button id="btnRemoveAll" class="btn" >删除全部行</button>
<button id="btnUpdate" class="btn" >更新第二行</button>
<input id="secucode" placeholder="查询条件:股票代码" style="margin-left: 20px;"> <button id="btnSearch" class="btn" >搜索</button>
</div>
<table id="mmg" class="mmg">
<tr>
<th rowspan="" colspan=""></th>
</tr>
</table>
<div id="pg" style="text-align: right;"></div>
</main>
<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/vendor/json2.js"></script>
<script src="../src/mmGrid.js"></script>
<script src="../src/mmPaginator.js"></script>
<script>
$(document).ready(function(){
var items = [{AMPLITUDE:0.9309,PREVCLOSINGPRICE:7.52,TURNOVERDEALS:0,HIGHESTPRICE:7.56,TURNOVERVOL:36268940,TRADINGDAY:1345478400000,TOTALSHARE:18653471415,SECUCODE:"600000",EPS:0.9217,LOWESTPRICE:7.49,OPENINGPRICE:7.51,SECUABBR:"浦发银行",ALISTEDSHARE:14922777132,ID:3131258,WCOSTAVG:8.7968,NETCASHFLOWOPERPS:1.125,SECUNAME:"上海浦东发展银行股份有限公司",CLOSINGPRICE:7.51,DAYCHANGERATE:-0.133,TURNOVERVAL:272732527,BVPS:8.686,DAYCHANGE:-0.01,PE:5.134,TURNOVERRATE:0.243,ADJUSTCLOSINGPRICE:51.8586,PB:0.9409},{AMPLITUDE:2.0472,PREVCLOSINGPRICE:6.35,TURNOVERDEALS:0,HIGHESTPRICE:6.41,TURNOVERVOL:1278011,TRADINGDAY:1345478400000,TOTALSHARE:1150000000,SECUCODE:"600004",EPS:0.1567,LOWESTPRICE:6.28,OPENINGPRICE:6.34,SECUABBR:"白云机场",ALISTEDSHARE:1150000000,ID:3131387,WCOSTAVG:6.8846,NETCASHFLOWOPERPS:0.23,SECUNAME:"广州白云国际机场股份有限公司",CLOSINGPRICE:6.39,DAYCHANGERATE:0.6299,TURNOVERVAL:8115183,BVPS:6.13,DAYCHANGE:0.04,PE:10.5415,TURNOVERRATE:0.1111,ADJUSTCLOSINGPRICE:9.429,PB:1.0697},{AMPLITUDE:1.5504,PREVCLOSINGPRICE:2.58,TURNOVERDEALS:0,HIGHESTPRICE:2.61,TURNOVERVOL:10685141,TRADINGDAY:1345478400000,TOTALSHARE:10093779823,SECUCODE:"600005",EPS:0.0043,LOWESTPRICE:2.57,OPENINGPRICE:2.59,SECUABBR:"武钢股份",ALISTEDSHARE:10093779823,ID:3131671,WCOSTAVG:3.0629,NETCASHFLOWOPERPS:0.09,SECUNAME:"武汉钢铁股份有限公司",CLOSINGPRICE:2.6,DAYCHANGERATE:0.7752,TURNOVERVAL:27677196,BVPS:3.562,DAYCHANGE:0.02,PE:24.2193,TURNOVERRATE:0.1059,ADJUSTCLOSINGPRICE:13.4817,PB:0.7308},{AMPLITUDE:2.069,PREVCLOSINGPRICE:2.9,TURNOVERDEALS:0,HIGHESTPRICE:2.95,TURNOVERVOL:2511165,TRADINGDAY:1345478400000,TOTALSHARE:2000000000,SECUCODE:"600006",EPS:0.0266,LOWESTPRICE:2.89,OPENINGPRICE:2.9,SECUABBR:"东风汽车",ALISTEDSHARE:2000000000,ID:3131903,WCOSTAVG:3.5362,NETCASHFLOWOPERPS:-0.4041,SECUNAME:"东风汽车股份有限公司",CLOSINGPRICE:2.9,DAYCHANGERATE:0,TURNOVERVAL:7316381,BVPS:3.0533,DAYCHANGE:0,PE:12.4963,TURNOVERRATE:0.1256,ADJUSTCLOSINGPRICE:10.0741,PB:0.9581},{AMPLITUDE:1.9704,PREVCLOSINGPRICE:10.15,TURNOVERDEALS:0,HIGHESTPRICE:10.35,TURNOVERVOL:155609,TRADINGDAY:1345478400000,TOTALSHARE:1007282534,SECUCODE:"600007",EPS:0.0887,LOWESTPRICE:10.15,OPENINGPRICE:10.15,SECUABBR:"中国国贸",ALISTEDSHARE:1007282534,ID:3132032,WCOSTAVG:9.8783,NETCASHFLOWOPERPS:0.22,SECUNAME:"中国国际贸易中心股份有限公司",CLOSINGPRICE:10.26,DAYCHANGERATE:1.0837,TURNOVERVAL:1599848,BVPS:4.5,DAYCHANGE:0.11,PE:53.2288,TURNOVERRATE:0.0154,ADJUSTCLOSINGPRICE:16.142,PB:2.3261},{AMPLITUDE:2.7211,PREVCLOSINGPRICE:4.41,TURNOVERDEALS:0,HIGHESTPRICE:4.53,TURNOVERVOL:3872525,TRADINGDAY:1345478400000,TOTALSHARE:2200000000,SECUCODE:"600008",EPS:0.0714,LOWESTPRICE:4.41,OPENINGPRICE:4.42,SECUABBR:"首创股份",ALISTEDSHARE:2200000000,ID:3131442,WCOSTAVG:5.2878,NETCASHFLOWOPERPS:0.055,SECUNAME:"北京首创股份有限公司",CLOSINGPRICE:4.49,DAYCHANGERATE:1.8141,TURNOVERVAL:17341208,BVPS:2.3832,DAYCHANGE:0.08,PE:18.8918,TURNOVERRATE:0.176,ADJUSTCLOSINGPRICE:15.1655,PB:1.8324},{AMPLITUDE:0.7389,PREVCLOSINGPRICE:12.18,TURNOVERDEALS:0,HIGHESTPRICE:12.22,TURNOVERVOL:1332194,TRADINGDAY:1345478400000,TOTALSHARE:1926958448,SECUCODE:"600009",EPS:0.1909,LOWESTPRICE:12.13,OPENINGPRICE:12.19,SECUABBR:"上海机场",ALISTEDSHARE:1093476397,ID:3131171,WCOSTAVG:12.8369,NETCASHFLOWOPERPS:-0.04,SECUNAME:"上海国际机场股份有限公司",CLOSINGPRICE:12.14,DAYCHANGERATE:-0.3284,TURNOVERVAL:16207539,BVPS:8.16,DAYCHANGE:-0.04,PE:15.5997,TURNOVERRATE:0.1218,ADJUSTCLOSINGPRICE:33.1878,PB:1.523},{AMPLITUDE:3.9604,PREVCLOSINGPRICE:6.06,TURNOVERDEALS:0,HIGHESTPRICE:6.11,TURNOVERVOL:95948038,TRADINGDAY:1345478400000,TOTALSHARE:6423643659,SECUCODE:"600010",EPS:0.0017,LOWESTPRICE:5.87,OPENINGPRICE:6.06,SECUABBR:"包钢股份",ALISTEDSHARE:6423643659,ID:3133528,WCOSTAVG:5.6692,NETCASHFLOWOPERPS:-0.09,SECUNAME:"内蒙古包钢钢联股份有限公司",CLOSINGPRICE:5.99,DAYCHANGERATE:-1.1551,TURNOVERVAL:572896242,BVPS:2.01,DAYCHANGE:-0.07,PE:77.53,TURNOVERRATE:1.4937,ADJUSTCLOSINGPRICE:17.6883,PB:2.9846},{AMPLITUDE:2.0864,PREVCLOSINGPRICE:6.71,TURNOVERDEALS:0,HIGHESTPRICE:6.8,TURNOVERVOL:8203502,TRADINGDAY:1345478400000,TOTALSHARE:14055383440,SECUCODE:"600011",EPS:0.1571,LOWESTPRICE:6.66,OPENINGPRICE:6.78,SECUABBR:"华能国际",ALISTEDSHARE:10000000000,ID:3132159,WCOSTAVG:5.7905,NETCASHFLOWOPERPS:0.91,SECUNAME:"华能国际电力股份有限公司",CLOSINGPRICE:6.68,DAYCHANGERATE:-0.4471,TURNOVERVAL:55167434,BVPS:3.66,DAYCHANGE:-0.03,PE:74.0314,TURNOVERRATE:0.082,ADJUSTCLOSINGPRICE:23.7094,PB:1.875},{AMPLITUDE:0.7712,PREVCLOSINGPRICE:3.89,TURNOVERDEALS:0,HIGHESTPRICE:3.91,TURNOVERVOL:418515,TRADINGDAY:1345478400000,TOTALSHARE:1658610000,SECUCODE:"600012",EPS:0.1278,LOWESTPRICE:3.88,OPENINGPRICE:3.89,SECUABBR:"皖通高速",ALISTEDSHARE:1165600000,ID:3133590,WCOSTAVG:4.4675,NETCASHFLOWOPERPS:0.25,SECUNAME:"安徽皖通高速公路股份有限公司",CLOSINGPRICE:3.9,DAYCHANGERATE:0.2571,TURNOVERVAL:1632075,BVPS:3.8226,DAYCHANGE:0.01,PE:7.5503,TURNOVERRATE:0.0359,ADJUSTCLOSINGPRICE:6.945,PB:1.0322},{AMPLITUDE:0.8037,PREVCLOSINGPRICE:8.71,TURNOVERDEALS:0,HIGHESTPRICE:8.75,TURNOVERVOL:14473038,TRADINGDAY:1345478400000,TOTALSHARE:6849725776,SECUCODE:"600015",EPS:0.8869,LOWESTPRICE:8.68,OPENINGPRICE:8.71,SECUABBR:"华夏银行",ALISTEDSHARE:4990528316,ID:3133403,WCOSTAVG:10.581,NETCASHFLOWOPERPS:2,SECUNAME:"华夏银行股份有限公司",CLOSINGPRICE:8.7,DAYCHANGERATE:-0.1148,TURNOVERVAL:126109959,BVPS:10.01,DAYCHANGE:-0.01,PE:6.4621,TURNOVERRATE:0.29,ADJUSTCLOSINGPRICE:16.1875,PB:0.9326},{AMPLITUDE:1.0135,PREVCLOSINGPRICE:5.92,TURNOVERDEALS:0,HIGHESTPRICE:5.94,TURNOVERVOL:47828421,TRADINGDAY:1345478400000,TOTALSHARE:28365585227,SECUCODE:"600016",EPS:0.3433,LOWESTPRICE:5.88,OPENINGPRICE:5.91,SECUABBR:"民生银行",ALISTEDSHARE:22587602387,ID:3132062,WCOSTAVG:6.1797,NETCASHFLOWOPERPS:-1.61,SECUNAME:"中国民生银行股份有限公司",CLOSINGPRICE:5.91,DAYCHANGERATE:-0.1689,TURNOVERVAL:282428002,BVPS:5.2,DAYCHANGE:-0.01,PE:6.0043,TURNOVERRATE:0.2117,ADJUSTCLOSINGPRICE:83.8993,PB:1.2936},{AMPLITUDE:1.8657,PREVCLOSINGPRICE:2.68,TURNOVERDEALS:0,HIGHESTPRICE:2.72,TURNOVERVOL:2086859,TRADINGDAY:1345478400000,TOTALSHARE:3075653888,SECUCODE:"600017",EPS:0.1249,LOWESTPRICE:2.67,OPENINGPRICE:2.69,SECUABBR:"日照港",ALISTEDSHARE:2630631660,ID:3133407,WCOSTAVG:3.0421,NETCASHFLOWOPERPS:0.122,SECUNAME:"日照港股份有限公司",CLOSINGPRICE:2.71,DAYCHANGERATE:1.1194,TURNOVERVAL:5634455,BVPS:2.674,DAYCHANGE:0.03,PE:17.342,TURNOVERRATE:0.0793,ADJUSTCLOSINGPRICE:8.5585,PB:1.2871}];
var fixed2 = function(val){
if(typeof val != 'number'){
return '';
}
return val.toFixed(2);
}
var cols = [
{title:'行情',titleHtml: '<span title="下面图片按钮可点击" style="cursor: help;color: #b00;">行情</span>', name:'', width: 30, align: 'center',lockWidth:true, renderer: function(val,item,rowIndex){
return '<div class="btnPrice"></div>';
}},
{title:'分组一',align: 'center', cols:[
{ title:'股票代码', name:'SECUCODE' ,width:100, sortable: true, align:'center' },
{ title:'股票名称', name:'SECUABBR' ,width:100, sortable: true, align:'center' }
]},
{ title:'分组二',align: 'center', cols:[
{ title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', sortable: true, type: 'number', renderer: fixed2},
{ title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right', sortable: true, type: 'number',renderer: function(val){
if(val > 0){
return '<span style="color: #b00">' + val.toFixed(2) +'%' + '</span>';
}else if(val < 0){
return '<span style="color: #0b0">' + val.toFixed(2) +'%' + '</span>';
}
return val.toFixed(2)+'%';
}},
{ title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right', sortable: true, type: 'number', renderer: function(val){
if(val > 0){
return '<span style="color: #b00">' + val.toFixed(2) + '</span>';
}else if(val < 0){
return '<span style="color: #0b0">' + val.toFixed(2) + '</span>';
}
return val.toFixed(2);
}},
{ title:'振幅', name:'AMPLITUDE' ,width:60, align:'right', sortable: true, type: 'number', renderer: function(val){
return val.toFixed(2)+'%';
}}
]},
{ title:'成交量(手)', name:'TURNOVERVOL' ,width:100, align:'right', sortable: true, type: 'number', renderer: function(val){
return (val / 100).toFixed(2);
}},
{ title:'成交额(万)', name:'TURNOVERVAL' ,width:100, align:'right', sortable: true, type: 'number', renderer: function(val){
return (val / 10000).toFixed(2);
}},
{title: '分组三', align: 'center', cols:[
{ title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right', sortable: true, type: 'number', renderer: fixed2},
{ title:'今开盘', name:'OPENINGPRICE',width:60, align:'right', sortable: true, type: 'number', renderer: fixed2}
]},
{ title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right', hidden: true, sortable: true, type: 'number', renderer: fixed2},
{ title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right', hidden: true, sortable: true, type: 'number', renderer: fixed2},
{ title:'操作', name:'' ,width:150, align:'center', lockWidth:true, lockDisplay: true, renderer: function(val){
return '<button class="btn btn-info">查看</button> <button class="btn btn-danger">删除</button>'
}}
];
var mmg = $('.mmg').mmGrid({
height: 400
, cols: cols
//, url: 'data/stockQuotePage.json'
, method: 'get'
, remoteSort:true
, items: items
, sortName: 'SECUCODE'
, sortStatus: 'asc'
, multiSelect: true
, checkCol: true
, fullWidthRows: true
, autoLoad: false
, plugins: [
$('#pg').mmPaginator({})
]
, params: function(){
//如果这里有验证，在验证失败时返回false则不执行AJAX查询。
return {
secucode: $('#secucode').val()
}
}
});
mmg.on('cellSelected', function(e, item, rowIndex, colIndex){
console.log('cellSelected!');
console.log(this);
console.log(e);
console.log(item);
console.log(rowIndex);
console.log(colIndex);
//查看
if($(e.target).is('.btn-info, .btnPrice')){
e.stopPropagation(); //阻止事件冒泡
alert(JSON.stringify(item));
}else if($(e.target).is('.btn-danger') && confirm('你确定要删除该行记录吗?')){
e.stopPropagation(); //阻止事件冒泡
mmg.removeRow(rowIndex);
}
}).on('loadSuccess', function(e, data){
//这个事件需要在数据加载之前注册才能触发
console.log('loadSuccess!');
console.log(data);
console.log(mmg.rowsLength());
}).on('rowInserted', function(e, item, index){
console.log('rowInserted!');
console.log(item);
console.log(index);
console.log(mmg.rowsLength());
}).on('rowUpdated', function(e, oldItem, newItem, index){
console.log('rowUpdated!');
console.log(oldItem);
console.log(newItem);
console.log(index);
}).on('rowRemoved', function(e, item, index){
console.log('rowRemoved!');
console.log(item);
console.log(index);
console.log(mmg.rowsLength());
}).load();
var item1 = {AMPLITUDE:2.069,PREVCLOSINGPRICE:2.9,TURNOVERDEALS:0,HIGHESTPRICE:2.95,TURNOVERVOL:2511165,TRADINGDAY:1345478400000,TOTALSHARE:2000000000,SECUCODE:"100000",EPS:0.0266,LOWESTPRICE:2.89,OPENINGPRICE:2.9,SECUABBR:"新加股票",ALISTEDSHARE:2000000000,ID:3131903,WCOSTAVG:3.5362,NETCASHFLOWOPERPS:-0.4041,SECUNAME:"东风汽车股份有限公司",CLOSINGPRICE:2.9,DAYCHANGERATE:0,TURNOVERVAL:7316381,BVPS:3.0533,DAYCHANGE:0,PE:12.4963,TURNOVERRATE:0.1256,ADJUSTCLOSINGPRICE:10.0741,PB:0.9581};
var item2 = {AMPLITUDE:0.7389,PREVCLOSINGPRICE:12.18,TURNOVERDEALS:0,HIGHESTPRICE:12.22,TURNOVERVOL:1332194,TRADINGDAY:1345478400000,TOTALSHARE:1926958448,SECUCODE:"100001",EPS:0.1909,LOWESTPRICE:12.13,OPENINGPRICE:12.19,SECUABBR:"新加股票2",ALISTEDSHARE:1093476397,ID:3131171,WCOSTAVG:12.8369,NETCASHFLOWOPERPS:-0.04,SECUNAME:"上海国际机场股份有限公司",CLOSINGPRICE:12.14,DAYCHANGERATE:-0.3284,TURNOVERVAL:16207539,BVPS:8.16,DAYCHANGE:-0.04,PE:15.5997,TURNOVERRATE:0.1218,ADJUSTCLOSINGPRICE:33.1878,PB:1.523};
$('#btnAdd').on('click', function(){
mmg.deselect( 'all');
mmg.addRow(item1, 2);
mmg.select(2);
});
$('#btnAddArr').on('click', function(){
mmg.deselect( 'all');
mmg.addRow([item1,item2], 1);
mmg.select(function(item, index){
if(index === 1 || index === 2){
return true;
}
});
});
$('#btnRemove').on('click', function(){
mmg.removeRow(1);
});
$('#btnRemoveAll').on('click', function(){
mmg.removeRow();
});
$('#btnRemoveSelected').on('click', function(){
var selectedIndexes = mmg.selectedRowsIndex();
mmg.removeRow(selectedIndexes);
});
$('#btnUpdate').on('click', function(){
var updateItem = mmg.row(1);
if(updateItem){
mmg.updateRow(item1, 1);
}
});
$('#btnSearch').on('click',function(){
//点击查询时页码置为1
mmg.load({page: 1});
});
});
</script>
</body>
</html>