拿到自己代码上运行吧

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 		<!--基本ui-->
  8. 		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
  9. 		<!--图标-->
  10. 		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
  11. 		<link rel="stylesheet" type="text/css" href="../demo/demo.css">
  12. 		<!-- 引入jQuery -->
  13. 		<script type="text/javascript" src="../jquery.min.js"></script>
  14. 		<script type="text/javascript" src="../jquery.easyui.min.js"></script>
  15. 	</head>
  16.  
  17. 	<body>
  18. 		<!--基本表格布局-->
  19. 		<table class="easyui-datagrid" title="所有自带icon" data-options="singleSelect:true,collapsible:true" style="width: 500px; height: 1000px;">
  20. 			<thead>
  21. 				<tr>
  22. 					<th data-options="field:'id' , width:150">id</th>
  23. 					<th data-options="field:'iconCls' , width:150">iconCls</th>
  24. 					<th data-options="field:'xx' , width:200">图片</th>
  25. 				</tr>
  26. 				<tr>
  27. 					<th data-options="field:'id' , width:150">01</th>
  28. 					<th data-options="field:'id' , width:150">icon-back</th>
  29. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/back.png" /></th>
  30. 				</tr>
  31. 				<tr>
  32. 					<th data-options="field:'id' , width:150">02</th>
  33. 					<th data-options="field:'id' , width:150">icon-blank</th>
  34. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/blank.gif" /></th>
  35. 				</tr>
  36. 				<tr>
  37. 					<th data-options="field:'id' , width:150">03</th>
  38. 					<th data-options="field:'id' , width:150">icon-cancel</th>
  39. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/cancel.png" /></th>
  40. 				</tr>
  41. 				<tr>
  42. 					<th data-options="field:'id' , width:150">04</th>
  43. 					<th data-options="field:'id' , width:150">icon-back</th>
  44. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/back.png" /></th>
  45. 				</tr>
  46. 				<tr>
  47. 					<th data-options="field:'id' , width:150">05</th>
  48. 					<th data-options="field:'id' , width:150">icon-clear</th>
  49. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/clear.png" /></th>
  50. 				</tr>
  51. 				<tr>
  52. 					<th data-options="field:'id' , width:150">06</th>
  53. 					<th data-options="field:'id' , width:150">icon-cut</th>
  54. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/cut.png" /></th>
  55. 				</tr>
  56. 				<tr>
  57. 					<th data-options="field:'id' , width:150">07</th>
  58. 					<th data-options="field:'id' , width:150">icon-edit_add</th>
  59. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/edit_add.png" /></th>
  60. 				</tr>
  61. 				<tr>
  62. 					<th data-options="field:'id' , width:150">08</th>
  63. 					<th data-options="field:'id' , width:150">icon-edit_remove</th>
  64. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/edit_remove.png" /></th>
  65. 				</tr>
  66. 				<tr>
  67. 					<th data-options="field:'id' , width:150">09</th>
  68. 					<th data-options="field:'id' , width:150">icon-filesave</th>
  69. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/filesave.png" /></th>
  70. 				</tr>
  71. 				<tr>
  72. 					<th data-options="field:'id' , width:150">10</th>
  73. 					<th data-options="field:'id' , width:150">icon-filter</th>
  74. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/filter.png" /></th>
  75. 				</tr>
  76. 				<tr>
  77. 					<th data-options="field:'id' , width:150">11</th>
  78. 					<th data-options="field:'id' , width:150">icon-help</th>
  79. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/help.png" /></th>
  80. 				</tr>
  81. 				<tr>
  82. 					<th data-options="field:'id' , width:150">12</th>
  83. 					<th data-options="field:'id' , width:150">icon-large_chart</th>
  84. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/large_chart.png" /></th>
  85. 				</tr>
  86. 				<tr>
  87. 					<th data-options="field:'id' , width:150">13</th>
  88. 					<th data-options="field:'id' , width:150">icon-large_clipart</th>
  89. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/large_clipart.png" /></th>
  90. 				</tr>
  91. 				<tr>
  92. 					<th data-options="field:'id' , width:150">14</th>
  93. 					<th data-options="field:'id' , width:150">icon-large_picture</th>
  94. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/large_picture.png" /></th>
  95. 				</tr>
  96. 				<tr>
  97. 					<th data-options="field:'id' , width:150">15</th>
  98. 					<th data-options="field:'id' , width:150">icon-large_shapes</th>
  99. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/large_shapes.png" /></th>
  100. 				</tr>
  101. 				<tr>
  102. 					<th data-options="field:'id' , width:150">16</th>
  103. 					<th data-options="field:'id' , width:150">icon-large_smartart</th>
  104. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/large_smartart.png" /></th>
  105. 				</tr>
  106. 				<tr>
  107. 					<th data-options="field:'id' , width:150">17</th>
  108. 					<th data-options="field:'id' , width:150">icon-lock</th>
  109. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/lock.png" /></th>
  110. 				</tr>
  111. 				<tr>
  112. 					<th data-options="field:'id' , width:150">18</th>
  113. 					<th data-options="field:'id' , width:150">icon-man</th>
  114. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/man.png" /></th>
  115. 				</tr>
  116. 				<tr>
  117. 					<th data-options="field:'id' , width:150">19</th>
  118. 					<th data-options="field:'id' , width:150">icon-mini_add</th>
  119. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/mini_add.png" /></th>
  120. 				</tr>
  121. 				<tr>
  122. 					<th data-options="field:'id' , width:150">20</th>
  123. 					<th data-options="field:'id' , width:150">icon-mini_edit</th>
  124. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/mini_edit.png" /></th>
  125. 				</tr>
  126. 				<tr>
  127. 					<th data-options="field:'id' , width:150">21</th>
  128. 					<th data-options="field:'id' , width:150">icon-mini_refresh</th>
  129. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/mini_refresh.png" /></th>
  130. 				</tr>
  131. 				<tr>
  132. 					<th data-options="field:'id' , width:150">22</th>
  133. 					<th data-options="field:'id' , width:150">icon-more</th>
  134. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/more.png" /></th>
  135. 				</tr>
  136. 				<tr>
  137. 					<th data-options="field:'id' , width:150">23</th>
  138. 					<th data-options="field:'id' , width:150">icon-no</th>
  139. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/no.png" /></th>
  140. 				</tr>
  141. 				<tr>
  142. 					<th data-options="field:'id' , width:150">24</th>
  143. 					<th data-options="field:'id' , width:150">icon-ok</th>
  144. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/ok.png" /></th>
  145. 				</tr>
  146. 				<tr>
  147. 					<th data-options="field:'id' , width:150">25</th>
  148. 					<th data-options="field:'id' , width:150">icon-pencil</th>
  149. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/pencil.png" /></th>
  150. 				</tr>
  151. 				<tr>
  152. 					<th data-options="field:'id' , width:150">26</th>
  153. 					<th data-options="field:'id' , width:150">icon-print</th>
  154. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/print.png" /></th>
  155. 				</tr>
  156. 				<tr>
  157. 					<th data-options="field:'id' , width:150">27</th>
  158. 					<th data-options="field:'id' , width:150">icon-redo</th>
  159. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/redo.png" /></th>
  160. 				</tr>
  161. 				<tr>
  162. 					<th data-options="field:'id' , width:150">28</th>
  163. 					<th data-options="field:'id' , width:150">icon-reload</th>
  164. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/reload.png" /></th>
  165. 				</tr>
  166. 				<tr>
  167. 					<th data-options="field:'id' , width:150">29</th>
  168. 					<th data-options="field:'id' , width:150">icon-search</th>
  169. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/search.png" /></th>
  170. 				</tr>
  171. 				<tr>
  172. 					<th data-options="field:'id' , width:150">30</th>
  173. 					<th data-options="field:'id' , width:150">icon-sum</th>
  174. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/sum.png" /></th>
  175. 				</tr>
  176. 				<tr>
  177. 					<th data-options="field:'id' , width:150">31</th>
  178. 					<th data-options="field:'id' , width:150">icon-tip</th>
  179. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/tip.png" /></th>
  180. 				</tr>
  181. 				<tr>
  182. 					<th data-options="field:'id' , width:150">32</th>
  183. 					<th data-options="field:'id' , width:150">icon-undo</th>
  184. 					<th data-options="field:'id' , width:200"><img src="../themes/icons/undo.png" /></th>
  185. 				</tr>
  186. 			</thead>
  187. 		</table>
  188. 	</body>
  189.  
  190. </html>

　　

Easyui所有图标的更多相关文章

  1. 使用webfont为easyui扩充图标

    目前回到pc端开发,开始用了easyui这个框架.重拾easyui后感觉这个框架用的很多技术太古老,页面风格也太控件化.单从图标一项来说吧,这种花花绿绿的图标用户一看都傻了眼,同时整个框架就提供了那么 ...

  2. 使用Font Awesome替换EasyUI的图标

    用过EasyUI的朋友都知道,大部分组件都有一个iconCls属性,用于显示一个图标.但是EasyUI自带图标数量少.不美观,于是想到了使用Font Awesome来更换和拓展这些图标. 先看看Eas ...

  3. jquery easyui添加图标扩展

    easyui中有很多通过iconCls="icon-reload"这样的属性引入小图标显示,当然我们也可以自己添加自己的小图标. 方式:1.我们可以在jquery easyui的文 ...

  4. easyui 放大镜图标

    iconCls:search 对应的 easyui的查询图标忒丑 想用放大镜图标 iconCls:zoom 找半天找到放大镜图标的 然后去icon.css文件中查 发现这个样式就叫zoom.

  5. [转]easyui 全部图标

    原文地址:http://blog.163.com/shexinyang@126/blog/static/136739312201491011492263/ 拿jquery-easyui-1.2.6举例 ...

  6. easyUI默认图标的使用

    使用格式如下: <table id="table" class="easyui-datagrid" style="width:600px;hei ...

  7. jquery easyui 全部图标

    所有的图标在 jquery-easyui-1.2.6\themes\icons 目录下, 在icon.css定义的如何引用 jquery-easyui-1.2.6/themes/icon.css .i ...

  8. easyui加入自己定义图标

    近期用easyui发现图标挺少的,事实上能够另外加入一个css样式,只是我偷懒,直接在easyui的css里面加入了. 以下是文件夹: icon.css是easyui的默认样式文件.ext_icons ...

  9. easyui图标对照

    转自:https://blog.csdn.net/qq_34545192/article/details/78250816 原作者文章地址: http://www.cnblogs.com/timeme ...

  10. 【tornado】系列项目（二）基于领域驱动模型的区域后台管理+前端easyui实现

    本项目是一个系列项目,最终的目的是开发出一个类似京东商城的网站.本文主要介绍后台管理中的区域管理,以及前端基于easyui插件的使用.本次增删改查因数据量少,因此采用模态对话框方式进行,关于数据量大采 ...

随机推荐

  1. Java线程池maximumPoolSize和workQueue哪个先饱和?

    先说结论,真正的饱和顺序是corePoolSize -> workQueue -> maximumPoolSize. 我们都知道,线程池有以下参数 ThreadPoolExecutor(i ...

  2. 增补博客 第七篇 python 比较不同Python图形处理库或图像处理库的异同点

    OpenCV.Pillow 和 scikit image OpenCV(OpenCV 是一个强大的计算机视觉库,它提供了各种图像处理和计算机视觉算法的实现,可以处理各种图像和视频数据. 异同点 跨平台 ...

  3. 在线Base64转文件、文件转Base64工具

    在线Base64转换神器,一键实现Base64编码与文件互转!支持图片.文档等各类文件,快速准确,安全无服务器存储.拖拽上传,轻松编码解码,提升开发效率.跨平台兼容,移动端友好,让数据转换再无障碍. ...

  4. mysql 联合表查询从表即使有索引依然ALL的一个原因-索引ALL解决，字符编码方式不一致导致全表搜索

    mysql 联合表查询从表即使有索引依然ALL的一个原因-索引ALL解决,字符编码方式不一致导致全表搜索那就是主表和从表的关联字段的编码方式不一样!!! 产生的现象: 解决之后,正确的使用了t2.or ...

  5. [笔记]Git常用命令大全

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` [笔记]Git常用命令大全 日期:2018-6-16 阿珏 ...

  6. windows离线部署VSCode在Centos7上的远程开发环境

    前言 公司一直使用的是ssh+vim的远程开发方式,习惯了vim之后已经非常方便了.但是还是想尝试一下VSCode的开发方式.就我而言,原因如下 漂亮的语法高亮,并且有补全 基于语法解析的引用查找(尽 ...

  7. 如何设置 QEMU 输出到控制台并使用 Shell 脚本自动化

    如何设置 QEMU 输出到控制台并使用 Shell 脚本自动化 原文:How to Setup QEMU Output to Console and Automate Using Shell Scri ...

  8. UBI 文件系统的支持 与 有关文件系统的image的制作

    背景 UBI文件系统是一种较新类型的文件系统. 内核支持 Symbol: MTD_UBI [=y] Type : tristate Prompt: Enable UBI - Unsorted bloc ...

  9. 实时系统Preempt RT与Xenomai之争！谁更主流，谁更实时？

    选择争论一直存在 大家知道EtherCAT是实时现场总线技术,当我们开发一款支持EtherCAT总线的控制器时,实时操作系统的选择不仅对于产品本身是最重要的一部分,而且对产品研发的整个过程也影响深远. ...

  10. spark内核架构深度剖析