第一個datagrid測試

時間 2019-11-09
標籤第一個 datagrid 測試简体版
原文原文鏈接
  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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。