1 <!DOCTYPE html>
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title></title>
6 <link href="../JavaScript/EasyUI/themes/bootstrap/easyui.css" rel="stylesheet" />
7 <link href="../JavaScript/EasyUI/themes/icon.css" rel="stylesheet" />
8 <script src="../JavaScript/EasyUI/jquery.min.js"></script>
9 <script src="../JavaScript/EasyUI/jquery.easyui.min.js"></script>
10 <script src="../JavaScript/EasyUI/locale/easyui-lang-zh_CN.js"></script>
11 <script type="text/javascript">
12 //当页面加载完(除图片)时运行
13 $(function () {
14 //找到Id为tb_1的table表套用datagrid样式
15 $('#tb_1').datagrid({
16 //表的标题为用户信息表
17 title: '用户信息表',
18 //表的标题前面的图标
19 iconCls: 'icon-save',
20 //表的宽度
21 width: 605,
22 //表的长度
23 height: 300,
24 //是否显示斑马线效果
25 striped: true,
26 //底部显示分页工具栏
27 pagination: true,
28 //一个URL从远程站点请求数据
29 url: 'datagrid_data.json',
30 //DataGrid列配置对象,数组
31 columns: [[
32 //是否在表的前面添加checkbox，列字段名称为Che
33 { field: 'Che', checkbox: true },
34 //创建的一列,列字段名称为Name,标题为姓名
35 { field: 'Name', title: '姓名', width: 120 },
36 ///创建的一列,列字段名称为Age,标题为年龄，并能判断年龄的值
37 {
38 //格式化DataGrid列，要设置formatter属性,有两个参数:1.value:显示字段当前列的值;2.record:当前行记录数据
39 field: 'Age', title: '年龄', width: 120, formatter: function (val, rec) {
40 //如果年龄小于18
41 if (val < 18) {
42 //将这个小于18的值的颜色改成红色并返回
43 return '<span style="color:red;">' + val + '</span>';
44 } else {
45 //否则直接返回这个值
46 return val;
47 }
48 }
49 },
50 //创建的一列,列字段名称为Sex,标题为性别
51 { field: 'Sex', title: '性别', width: 120 },
52 //创建的一列,列字段名称为Tel,标题为电话
53 { field: 'Tel', title: '电话', width: 120 },
54 ]],
55 //添加datagrid的顶部工具栏
56 toolbar: [{
57 //按钮标题为添加
58 text: '添加',
59 //定义的按钮的图标
60 iconCls: 'icon-add',
61 //按钮的点击事件
62 handler: function () {
63 //弹出对话框
64 alert('点击了添加！')
65 }
66 }, {
67 //按钮标题为查询
68 text: '查询',
69 //定义的按钮的图标
70 iconCls: 'icon-cut',
71 //按钮的点击事件
72 handler: function () {
73 //通过datagrid的getSelected属性获得这一列的值
74 var row = $('#tb_1').datagrid('getSelected');
75 if (row) {
76 //弹出选择的那一列的每个值
77 alert("第一个:" + row.Id + "\n第二个：" + row.Name + "\n第三个：" + row.Age)
78 }
79 }
80 }, {
81 //按钮标题为保存
82 text: '保存',
83 //定义的按钮的图标
84 iconCls: 'icon-save',
85 //按钮的点击事件
86 handler: function () {
87 //弹出对话框
88 alert('点击了保存！')
89 }
90 }],
91 //同列属性，但是这些列将会被冻结在左侧
92 frozenColumns: [[
93 //创建的一列,列字段名称为Id,标题为编号
94 { field: 'Id', title: '编号', width: 50 }
95 ]]
96 });
97
98 //返回这个tb_1的getPager(返回页面对象)
99 var paper = $('#tb_1').datagrid('getPager');
100 //用户导航页面的数据
101 paper.pagination({
102 //定义是否显示页面导航列表
103 showPageList: true,
104 //添加按钮的集合
105 buttons: [{
106 //按钮的图标为icon-search
107 iconCls: 'icon-search',
108 //按钮的鼠标点击事件
109 handler: function () {
110
111 }
112 }, {
113 //按钮的图标为icon-add
114 iconCls: 'icon-add',
115 //按钮的鼠标点击事件
116 handler: function () {
117
118 }
119 }, {
120 //按钮的图标为icon-edit
121 iconCls: 'icon-edit',
122 //按钮的鼠标点击事件
123 handler: function () {
124
125 }
126 }],
127 //在点击了刷新按钮的同时，调用后面的方法
128 onBeforeRefresh: function () {
129 //弹出提示框
130 $.messager.alert('提示:', '您点击了刷新!已刷新!');
131 //为true就刷新，为false不刷新页面
132 return true;
133 }
134 });
135
136
137 });
138 </script>
139 <style type="text/css">
140 body {
141 background-color: #5cafea;
142 }
143 </style>
144 </head>
145 <body>
146 <div>
147 <table id="tb_1" border="1">
148 <tbody>
149 <tr>
150 <td>Col 1</td>
151 <td>Col 2</td>
152 <td>Col 3</td>
153 <td>11</td>
154 <td>Col 5</td>
155 </tr>
156 <tr>
157 <td>Col 11</td>
158 <td>Col 12</td>
159 <td>Col 13</td>
160 <td>24</td>
161 <td>Col 15</td>
162 </tr>
163 <tr>
164 <td>Col 21</td>
165 <td>Col 22</td>
166 <td>Col 23</td>
167 <td>Col 24</td>
168 <td>Col 25</td>
169 </tr>
170 <tr>
171 <td>Col 31</td>
172 <td>Col 32</td>
173 <td>Col 33</td>
174 <td>14</td>
175 <td>Col 35</td>
176 </tr>
177 <tr>
178 <td>Col 31</td>
179 <td>Col 32</td>
180 <td>Col 33</td>
181 <td>Col 34</td>
182 <td>Col 35</td>
183 </tr>
184 <tr>
185 <td>Col 31</td>
186 <td>Col 32</td>
187 <td>Col 33</td>
188 <td>Col 34</td>
189 <td>Col 35</td>
190 </tr>
191 <tr>
192 <td>Col 31</td>
193 <td>Col 32</td>
194 <td>Col 33</td>
195 <td>Col 34</td>
196 <td>Col 35</td>
197 </tr>
198 <tr>
199 <td>Col 31</td>
200 <td>Col 32</td>
201 <td>Col 33</td>
202 <td>Col 34</td>
203 <td>Col 35</td>
204 </tr>
205 <tr>
206 <td>Col 31</td>
207 <td>Col 32</td>
208 <td>Col 33</td>
209 <td>Col 34</td>
210 <td>Col 35</td>
211 </tr>
212 <tr>
213 <td>Col 31</td>
214 <td>Col 32</td>
215 <td>Col 33</td>
216 <td>Col 34</td>
217 <td>Col 35</td>
218 </tr>
219 <tr>
220 <td>Col 31</td>
221 <td>Col 32</td>
222 <td>Col 33</td>
223 <td>Col 34</td>
224 <td>Col 35</td>
225 </tr>
226 </tbody>
227 </table>
228 </div>
229 </body>
230 </html>
