-
Notifications
You must be signed in to change notification settings - Fork 123
/
Copy pathindex.html
237 lines (225 loc) · 9.09 KB
/
index.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
<!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>mmGrid document</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/960.css">
<link rel="stylesheet" href="../src/mmGrid.css">
<link rel="stylesheet" href="../src/mmPaginator.css">
<style>
.mmGrid,
.mmPaginator{
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>
<header class="container_12">
<h1 ><a class="index" href="index.html">mmGrid</a> <a href="api.html" >参数列表</a> <a href="examples1.html" >操作示例&Bootstrap样式</a></h1>
<hr>
</header>
<main class="container_12">
<h2 >一、介绍</h2>
<p >
这是一个基于jQuery的表格部件。它提供了几个基本的功能，可以用于面积有限却要显示较多数据的页面。
它的样式表很简单，修改起来非常容易，你可以很快的给它更换一个样式融入到你的页面中。
如果你喜欢简洁点的东西，不想在工程里加入太多依赖的文件，那你可以尝试一下它。顺便说一句，它也支持IE6这样的老古董。
</p>
<hr>
<h2>二、基本示例</h2>
<p>
mmGrid支持两种数据加载方式：本地对象数据和远程AJAX数据。
</p>
<div class="grid_6">
<h3 >例 1：使用本地对象加载数据</h3>
<table id="table2-1"></table>
<p class="well">
以客户端数据为数据源。参数<em>items</em>，类型可以是对象或数组。如果数据源为对象，则使用<em>root</em>选项标记对象内的数组字段为数据源。
</p>
</div>
<div class="grid_6">
<h3 >例 2：使用AJAX加载数据</h3>
<table id="table2-2"></table>
<p class="well">
AJAX数据为数据源。参数<em>url</em>为请求地址，返回数据为json格式，可以是对象或数组。如果返回数据为对象，则使用<em>root</em>选项标记对象内的数组字段为数据源。
</p>
</div>
<div class="clear"></div>
<hr >
<h2>三、排序示例</h2>
<p>
排序参数为<em>sortName</em>和<em>sortStatus</em>。 如果初始化时设置排序列，则直接显示排序后数据。
排序方式分为客户端排序与AJAX服务器端排序，设置参数为<em>remoteSort</em>。
排序方式与数据源关系不大，但如果数据源为本地数据，设置<em>remoteSort</em>为<em>true</em>无效。
如果排序字段为数字类型需要将列选项添加<em>type:'number'</em>属性。远程排序时，列模型可以设置<em>sortName</em>来指定远程排序的字段名称，如不设置则为<em>name</em>中的值。
</p>
<div class="grid_6">
<h3 >例 1：客户端排序</h3>
<table id="table3-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：AJAX远程排序</h3>
<table id="table3-2"></table>
<span style="font-size: 12px;">* 此示例无后端处理程序，请查看请求的url参数</span>
</div>
<div class="clear"></div>
<hr >
<h2>四、列状态</h2>
<div class="grid_4">
<h3 >例 1：锁定列宽</h3>
<table id="table4-1"></table>
<p class="well">
锁定列宽选项为<em>lockWidth:true</em>。列宽被锁定后则不可调整，当表选项<em>fullWidthRows</em>设为<em>true</em>列的宽度也不参与计算。
</p>
</div>
<div class="grid_4">
<h3 >例 2：隐藏列</h3>
<table id="table4-2"></table>
<p class="well">
隐藏列选项为<em>hidden: true</em>。当光标移至标题时<strong>标题最右侧</strong>会显示<strong>向下按钮</strong>，单击此按钮则可打开选项板来调整隐藏和显示的列，调整完毕后单击选项板<strong>右下方</strong>的<strong>向上按钮</strong>来关闭选项板。
</p>
</div>
<div class="grid_4">
<h3 >例 3：锁定列显示状态</h3>
<table id="table4-3"></table>
<p class="well">
锁定列显示状态选项为<em>lockDisplay: true</em>。锁定列显示状态后，在选项板中列选项会被值为灰色，此列则不可调整显示状态。
</p>
</div>
<div class="clear"></div>
<hr >
<h2>五、内容折行</h2>
<p>
表选项<em>nowrap</em>设置单元格内容超出单元格长度时是否折行显示。
</p>
<div class="grid_6">
<h3 >例 1：内容不折行</h3>
<table id="table5-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：内容折行</h3>
<table id="table5-2"></table>
</div>
<div class="clear"></div>
<hr >
<h2>六、自适应列宽</h2>
<p>
当表选项<em>fullWidthRows</em>设置为<em>true</em>时，表格在第一次数据加载时计算列宽，将其充满整个表格。锁定列宽的列不参与计算。如果所有显示的列宽总和大于表格宽度这个参数将不起作用。
</p>
<div class="grid_6">
<h3 >例 1：自动调整列宽充满表格</h3>
<table id="table6-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：默认列宽</h3>
<table id="table6-2"></table>
</div>
<div class="clear"></div>
<hr >
<h2>七、选择行</h2>
<p>
表选项<em>multiSelect</em>设置表格是否可多选，默认为单选。可通过表操作<em>$('#table').mmGrid('selected')</em>获取选择的行对象。
当光标单击单元格时触发<em>cellSelected</em>事件，该事件可在表选项设置。
</p>
<div class="grid_6">
<h3 >例 1：行多选</h3>
<table id="table7-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：行单选</h3>
<table id="table7-2"></table>
</div>
<div class="clear"></div>
<hr >
<h2>八、选框列</h2>
<p>
表选项<em>checkCol</em>可以在表格前插入选框列。<em>checkCol</em>选项可以和<em>multiSelect</em>搭配使用。
</p>
<div class="grid_6">
<h3 >例 1：行多选</h3>
<table id="table8-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：行单选</h3>
<table id="table8-2"></table>
</div>
<div class="clear"></div>
<hr >
<h2>九、索引列</h2>
<p>
表选项<em>indexCol</em>可以在表格前插入索引列。如果索引数字过大超出单元格可使用<em>indexColWidth</em>调整宽度。
</p>
<div class="grid_6">
<h3 >例 1：索引列</h3>
<table id="table9-1"></table>
</div>
<div class="grid_6">
<h3 >例 2：索引选框列同时显示</h3>
<table id="table9-2"></table>
</div>
<div class="clear"></div>
<hr >
<h2>十、显示全部行</h2>
<p>
表选项<em>height</em>设置为<em>'auto'</em>时，表格显示全部行，并不显示垂直滚动条。
</p>
<div class="grid-100">
<table id="table10-1"></table>
</div>
<div class="clear"></div>
<hr >
<h2>十一、分页</h2>
<p>
这里的分页示例借助了分页器，开发者可以根据自己的需求选择使用其他分页器。
</p>
<div class="grid-100">
<table id="table11-1"></table>
<div style="text-align:right;">
<div id="paginator11-1"></div>
</div>
</div>
<div class="clear"></div>
<hr >
<h2>十二、表头分组</h2>
<p>
列模型可嵌套一个cols选项用来将表头分组，目前只支持两层。
</p>
<div class="grid-100">
<table id="table12-1"></table>
</div>
<div class="clear"></div>
<hr >
</main>
<a href="https://github.com/miemiedev/mmGrid"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<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 src="js/main.js"></script>
<script>
</script>
</body>
</html>