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>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
