Easyui-accordion+tree实现漂亮的自定义导航菜单 SSM （oa系统）

最新推荐文章于 2022-07-24 14:34:00 发布
最新推荐文章于 2022-07-24 14:34:00 发布
阅读量1.2k 收藏 5
点赞数 1
分类专栏： JavaWeb MVC Spring
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun_jinhang/article/details/96867055
版权
JavaWeb 同时被 3 个专栏收录
12 篇文章 1 订阅
订阅专栏
Spring
3 篇文章 0 订阅
订阅专栏
MVC
1 篇文章 0 订阅
订阅专栏

部分资源借鉴了其他博主，原文链接：https://www.cnblogs.com/ymnets/p/3824368.html

最终实现的效果图，图标都是自定义的，未使用easyui themes中的图片资源，导航菜单自动加载，使用easyui 中的 accordion + tree 实现二级菜单

导航菜单

导航菜单管理（部分功能，待完善）

菜单编辑

第一步、新建Maven项目，工程名easyui,并添加相关依赖，为项目后续做准备（准备写一个OA系统）项目所需要的Jar包如下

 <dependencies>
    <dependency>
	  <groupId>org.springframework</groupId>
	  <artifactId>spring-webmvc</artifactId>
	  <version>4.1.8.RELEASE</version>
	</dependency>
  	<dependency>
	  <groupId>org.mybatis</groupId>
	  <artifactId>mybatis</artifactId>
	  <version>3.4.6</version>
	</dependency>
  	<dependency>
  		<groupId>commons-dbcp</groupId>
  		<artifactId>commons-dbcp</artifactId>
  		<version>1.4</version>
  	</dependency>
  	<dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.25</version>
      <scope>compile</scope>
    </dependency>
  	<dependency>
	  <groupId>org.mybatis</groupId>
	  <artifactId>mybatis-spring</artifactId>
	  <version>1.3.0</version>
	</dependency>
  	<dependency>
	  <groupId>org.springframework</groupId>
	  <artifactId>spring-jdbc</artifactId>
	  <version>4.1.8.RELEASE</version>
	</dependency>
  	<dependency>
	 	<groupId>junit</groupId>
	 	<artifactId>junit</artifactId>
	 	<version>3.8.1</version>
	 </dependency>
	 <dependency>
  	 	<groupId>com.fasterxml.jackson.core</groupId>
  	 	<artifactId>jackson-annotations</artifactId>
  	 	<version>2.2.3</version>
  	 </dependency>
  	 <dependency>
  	 	<groupId>com.fasterxml.jackson.core</groupId>
  	 	<artifactId>jackson-core</artifactId>
  	 	<version>2.2.3</version>
  	 </dependency>
  	 <dependency>
  	 	<groupId>com.fasterxml.jackson.core</groupId>
  	 	<artifactId>jackson-databind</artifactId>
  	 	<version>2.2.3</version>
  	 </dependency>
  	 <dependency>
  	 	<groupId>org.aspectj</groupId>
  	 	<artifactId>aspectjweaver</artifactId>
  	 	<version>1.8.0</version>
  	 </dependency>
  	 <dependency>
		<groupId>jstl</groupId>
		<artifactId>jstl</artifactId>
		<version>1.2</version>
	</dependency>
	<dependency>
		<groupId>taglibs</groupId>
		<artifactId>standard</artifactId>
		<version>1.1.2</version>
	</dependency>
  </dependencies>

第二步、下载easyui 资源，并添加进项目中WebApp目录下（ easyui for jquery 资源下载链接:http://www.jeasyui.net/download/jquery.html）如下图所示整个文件添加进项目中

第三步、修改Thems文件夹下原有的icon.css样式，将下列样式添加进文件中

.pic_1 {background:url("icons/icon.png") -0px -0px no-repeat; width: 16px; height: 16px; }
.pic_2 {background:url("icons/icon.png") -16px -0px; width: 16px; height: 16px; }
.pic_3 {background:url("icons/icon.png") -32px -0px; width: 16px; height: 16px; }
.pic_4 {background:url("icons/icon.png") -48px -0px; width: 16px; height: 16px; }
.pic_5 {background:url("icons/icon.png") -64px -0px; width: 16px; height: 16px; }
.pic_6 {background:url("icons/icon.png") -80px -0px; width: 16px; height: 16px; }
.pic_7 {background:url("icons/icon.png") -96px -0px; width: 16px; height: 16px; }
.pic_8 {background:url("icons/icon.png") -112px -0px; width: 16px; height: 16px; }
.pic_9 {background:url("icons/icon.png") -128px -0px; width: 16px; height: 16px; }
.pic_10 {background:url("icons/icon.png") -144px -0px; width: 16px; height: 16px; }
.pic_11 {background:url("icons/icon.png") -160px -0px; width: 16px; height: 16px; }
.pic_12 {background:url("icons/icon.png") -176px -0px; width: 16px; height: 16px; }
.pic_13 {background:url("icons/icon.png") -192px -0px; width: 16px; height: 16px; }
.pic_14 {background:url("icons/icon.png") -208px -0px; width: 16px; height: 16px; }
.pic_15 {background:url("icons/icon.png") -224px -0px; width: 16px; height: 16px; }
.pic_16 {background:url("icons/icon.png") -240px -0px; width: 16px; height: 16px; }
.pic_17 {background:url("icons/icon.png") -256px -0px; width: 16px; height: 16px; }
.pic_18 {background:url("icons/icon.png") -272px -0px; width: 16px; height: 16px; }
.pic_19 {background:url("icons/icon.png") -288px -0px; width: 16px; height: 16px; }
.pic_20 {background:url("icons/icon.png") -304px -0px; width: 16px; height: 16px; }
.pic_21 {background:url("icons/icon.png") -320px -0px; width: 16px; height: 16px; }
.pic_22 {background:url("icons/icon.png") -336px -0px; width: 16px; height: 16px; }
.pic_23 {background:url("icons/icon.png") -352px -0px; width: 16px; height: 16px; }
.pic_24 {background:url("icons/icon.png") -368px -0px; width: 16px; height: 16px; }
.pic_25 {background:url("icons/icon.png") -384px -0px; width: 16px; height: 16px; }
.pic_26 {background:url("icons/icon.png") -0px -16px; width: 16px; height: 16px; }
.pic_27 {background:url("icons/icon.png") -16px -16px; width: 16px; height: 16px; }
.pic_28 {background:url("icons/icon.png") -32px -16px; width: 16px; height: 16px; }
.pic_29 {background:url("icons/icon.png") -48px -16px; width: 16px; height: 16px; }
.pic_30 {background:url("icons/icon.png") -64px -16px; width: 16px; height: 16px; }
.pic_31 {background:url("icons/icon.png") -80px -16px; width: 16px; height: 16px; }
.pic_32 {background:url("icons/icon.png") -96px -16px; width: 16px; height: 16px; }
.pic_33 {background:url("icons/icon.png") -112px -16px; width: 16px; height: 16px; }
.pic_34 {background:url("icons/icon.png") -128px -16px; width: 16px; height: 16px; }
.pic_35 {background:url("icons/icon.png") -144px -16px; width: 16px; height: 16px; }
.pic_36 {background:url("icons/icon.png") -160px -16px; width: 16px; height: 16px; }
.pic_37 {background:url("icons/icon.png") -176px -16px; width: 16px; height: 16px; }
.pic_38 {background:url("icons/icon.png") -192px -16px; width: 16px; height: 16px; }
.pic_39 {background:url("icons/icon.png") -208px -16px; width: 16px; height: 16px; }
.pic_40 {background:url("icons/icon.png") -224px -16px; width: 16px; height: 16px; }
.pic_41 {background:url("icons/icon.png") -240px -16px; width: 16px; height: 16px; }
.pic_42 {background:url("icons/icon.png") -256px -16px; width: 16px; height: 16px; }
.pic_43 {background:url("icons/icon.png") -272px -16px; width: 16px; height: 16px; }
.pic_44 {background:url("icons/icon.png") -288px -16px; width: 16px; height: 16px; }
.pic_45 {background:url("icons/icon.png") -304px -16px; width: 16px; height: 16px; }
.pic_46 {background:url("icons/icon.png") -320px -16px; width: 16px; height: 16px; }
.pic_47 {background:url("icons/icon.png") -336px -16px; width: 16px; height: 16px; }
.pic_48 {background:url("icons/icon.png") -352px -16px; width: 16px; height: 16px; }
.pic_49 {background:url("icons/icon.png") -368px -16px; width: 16px; height: 16px; }
.pic_50 {background:url("icons/icon.png") -384px -16px; width: 16px; height: 16px; }
.pic_51 {background:url("icons/icon.png") -0px -32px; width: 16px; height: 16px; }
.pic_52 {background:url("icons/icon.png") -16px -32px; width: 16px; height: 16px; }
.pic_53 {background:url("icons/icon.png") -32px -32px; width: 16px; height: 16px; }
.pic_54 {background:url("icons/icon.png") -48px -32px; width: 16px; height: 16px; }
.pic_55 {background:url("icons/icon.png") -64px -32px; width: 16px; height: 16px; }
.pic_56 {background:url("icons/icon.png") -80px -32px; width: 16px; height: 16px; }
.pic_57 {background:url("icons/icon.png") -96px -32px; width: 16px; height: 16px; }
.pic_58 {background:url("icons/icon.png") -112px -32px; width: 16px; height: 16px; }
.pic_59 {background:url("icons/icon.png") -128px -32px; width: 16px; height: 16px; }
.pic_60 {background:url("icons/icon.png") -144px -32px; width: 16px; height: 16px; }
.pic_61 {background:url("icons/icon.png") -160px -32px; width: 16px; height: 16px; }
.pic_62 {background:url("icons/icon.png") -176px -32px; width: 16px; height: 16px; }
.pic_63 {background:url("icons/icon.png") -192px -32px; width: 16px; height: 16px; }
.pic_64 {background:url("icons/icon.png") -208px -32px; width: 16px; height: 16px; }
.pic_65 {background:url("icons/icon.png") -224px -32px; width: 16px; height: 16px; }
.pic_66 {background:url("icons/icon.png") -240px -32px; width: 16px; height: 16px; }
.pic_67 {background:url("icons/icon.png") -256px -32px; width: 16px; height: 16px; }
.pic_68 {background:url("icons/icon.png") -272px -32px; width: 16px; height: 16px; }
.pic_69 {background:url("icons/icon.png") -288px -32px; width: 16px; height: 16px; }
.pic_70 {background:url("icons/icon.png") -304px -32px; width: 16px; height: 16px; }
.pic_71 {background:url("icons/icon.png") -320px -32px; width: 16px; height: 16px; }
.pic_72 {background:url("icons/icon.png") -336px -32px; width: 16px; height: 16px; }
.pic_73 {background:url("icons/icon.png") -352px -32px; width: 16px; height: 16px; }
.pic_74 {background:url("icons/icon.png") -368px -32px; width: 16px; height: 16px; }
.pic_75 {background:url("icons/icon.png") -384px -32px; width: 16px; height: 16px; }
.pic_76 {background:url("icons/icon.png") -0px -48px; width: 16px; height: 16px; }
.pic_77 {background:url("icons/icon.png") -16px -48px; width: 16px; height: 16px; }
.pic_78 {background:url("icons/icon.png") -32px -48px; width: 16px; height: 16px; }
.pic_79 {background:url("icons/icon.png") -48px -48px; width: 16px; height: 16px; }
.pic_80 {background:url("icons/icon.png") -64px -48px; width: 16px; height: 16px; }
.pic_81 {background:url("icons/icon.png") -80px -48px; width: 16px; height: 16px; }
.pic_82 {background:url("icons/icon.png") -96px -48px; width: 16px; height: 16px; }
.pic_83 {background:url("icons/icon.png") -112px -48px; width: 16px; height: 16px; }
.pic_84 {background:url("icons/icon.png") -128px -48px; width: 16px; height: 16px; }
.pic_85 {background:url("icons/icon.png") -144px -48px; width: 16px; height: 16px; }
.pic_86 {background:url("icons/icon.png") -160px -48px; width: 16px; height: 16px; }
.pic_87 {background:url("icons/icon.png") -176px -48px; width: 16px; height: 16px; }
.pic_88 {background:url("icons/icon.png") -192px -48px; width: 16px; height: 16px; }
.pic_89 {background:url("icons/icon.png") -208px -48px; width: 16px; height: 16px; }
.pic_90 {background:url("icons/icon.png") -224px -48px; width: 16px; height: 16px; }
.pic_91 {background:url("icons/icon.png") -240px -48px; width: 16px; height: 16px; }
.pic_92 {background:url("icons/icon.png") -256px -48px; width: 16px; height: 16px; }
.pic_93 {background:url("icons/icon.png") -272px -48px; width: 16px; height: 16px; }
.pic_94 {background:url("icons/icon.png") -288px -48px; width: 16px; height: 16px; }
.pic_95 {background:url("icons/icon.png") -304px -48px; width: 16px; height: 16px; }
.pic_96 {background:url("icons/icon.png") -320px -48px; width: 16px; height: 16px; }
.pic_97 {background:url("icons/icon.png") -336px -48px; width: 16px; height: 16px; }
.pic_98 {background:url("icons/icon.png") -352px -48px; width: 16px; height: 16px; }
.pic_99 {background:url("icons/icon.png") -368px -48px; width: 16px; height: 16px; }
.pic_100 {background:url("icons/icon.png") -384px -48px; width: 16px; height: 16px; }
.pic_101 {background:url("icons/icon.png") -0px -64px; width: 16px; height: 16px; }
.pic_102 {background:url("icons/icon.png") -16px -64px; width: 16px; height: 16px; }
.pic_103 {background:url("icons/icon.png") -32px -64px; width: 16px; height: 16px; }
.pic_104 {background:url("icons/icon.png") -48px -64px; width: 16px; height: 16px; }
.pic_105 {background:url("icons/icon.png") -64px -64px; width: 16px; height: 16px; }
.pic_106 {background:url("icons/icon.png") -80px -64px; width: 16px; height: 16px; }
.pic_107 {background:url("icons/icon.png") -96px -64px; width: 16px; height: 16px; }
.pic_108 {background:url("icons/icon.png") -112px -64px; width: 16px; height: 16px; }
.pic_109 {background:url("icons/icon.png") -128px -64px; width: 16px; height: 16px; }
.pic_110 {background:url("icons/icon.png") -144px -64px; width: 16px; height: 16px; }
.pic_111 {background:url("icons/icon.png") -160px -64px; width: 16px; height: 16px; }
.pic_112 {background:url("icons/icon.png") -176px -64px; width: 16px; height: 16px; }
.pic_113 {background:url("icons/icon.png") -192px -64px; width: 16px; height: 16px; }
.pic_114 {background:url("icons/icon.png") -208px -64px; width: 16px; height: 16px; }
.pic_115 {background:url("icons/icon.png") -224px -64px; width: 16px; height: 16px; }
.pic_116 {background:url("icons/icon.png") -240px -64px; width: 16px; height: 16px; }
.pic_117 {background:url("icons/icon.png") -256px -64px; width: 16px; height: 16px; }
.pic_118 {background:url("icons/icon.png") -272px -64px; width: 16px; height: 16px; }
.pic_119 {background:url("icons/icon.png") -288px -64px; width: 16px; height: 16px; }
.pic_120 {background:url("icons/icon.png") -304px -64px; width: 16px; height: 16px; }
.pic_121 {background:url("icons/icon.png") -320px -64px; width: 16px; height: 16px; }
.pic_122 {background:url("icons/icon.png") -336px -64px; width: 16px; height: 16px; }
.pic_123 {background:url("icons/icon.png") -352px -64px; width: 16px; height: 16px; }
.pic_124 {background:url("icons/icon.png") -368px -64px; width: 16px; height: 16px; }
.pic_125 {background:url("icons/icon.png") -384px -64px; width: 16px; height: 16px; }
.pic_126 {background:url("icons/icon.png") -0px -80px; width: 16px; height: 16px; }
.pic_127 {background:url("icons/icon.png") -16px -80px; width: 16px; height: 16px; }
.pic_128 {background:url("icons/icon.png") -32px -80px; width: 16px; height: 16px; }
.pic_129 {background:url("icons/icon.png") -48px -80px; width: 16px; height: 16px; }
.pic_130 {background:url("icons/icon.png") -64px -80px; width: 16px; height: 16px; }
.pic_131 {background:url("icons/icon.png") -80px -80px; width: 16px; height: 16px; }
.pic_132 {background:url("icons/icon.png") -96px -80px; width: 16px; height: 16px; }
.pic_133 {background:url("icons/icon.png") -112px -80px; width: 16px; height: 16px; }
.pic_134 {background:url("icons/icon.png") -128px -80px; width: 16px; height: 16px; }
.pic_135 {background:url("icons/icon.png") -144px -80px; width: 16px; height: 16px; }
.pic_136 {background:url("icons/icon.png") -160px -80px; width: 16px; height: 16px; }
.pic_137 {background:url("icons/icon.png") -176px -80px; width: 16px; height: 16px; }
.pic_138 {background:url("icons/icon.png") -192px -80px; width: 16px; height: 16px; }
.pic_139 {background:url("icons/icon.png") -208px -80px; width: 16px; height: 16px; }
.pic_140 {background:url("icons/icon.png") -224px -80px; width: 16px; height: 16px; }
.pic_141 {background:url("icons/icon.png") -240px -80px; width: 16px; height: 16px; }
.pic_142 {background:url("icons/icon.png") -256px -80px; width: 16px; height: 16px; }
.pic_143 {background:url("icons/icon.png") -272px -80px; width: 16px; height: 16px; }
.pic_144 {background:url("icons/icon.png") -288px -80px; width: 16px; height: 16px; }
.pic_145 {background:url("icons/icon.png") -304px -80px; width: 16px; height: 16px; }
.pic_146 {background:url("icons/icon.png") -320px -80px; width: 16px; height: 16px; }
.pic_147 {background:url("icons/icon.png") -336px -80px; width: 16px; height: 16px; }
.pic_148 {background:url("icons/icon.png") -352px -80px; width: 16px; height: 16px; }
.pic_149 {background:url("icons/icon.png") -368px -80px; width: 16px; height: 16px; }
.pic_150 {background:url("icons/icon.png") -384px -80px; width: 16px; height: 16px; }
.pic_151 {background:url("icons/icon.png") -0px -96px; width: 16px; height: 16px; }
.pic_152 {background:url("icons/icon.png") -16px -96px; width: 16px; height: 16px; }
.pic_153 {background:url("icons/icon.png") -32px -96px; width: 16px; height: 16px; }
.pic_154 {background:url("icons/icon.png") -48px -96px; width: 16px; height: 16px; }
.pic_155 {background:url("icons/icon.png") -64px -96px; width: 16px; height: 16px; }
.pic_156 {background:url("icons/icon.png") -80px -96px; width: 16px; height: 16px; }
.pic_157 {background:url("icons/icon.png") -96px -96px; width: 16px; height: 16px; }
.pic_158 {background:url("icons/icon.png") -112px -96px; width: 16px; height: 16px; }
.pic_159 {background:url("icons/icon.png") -128px -96px; width: 16px; height: 16px; }
.pic_160 {background:url("icons/icon.png") -144px -96px; width: 16px; height: 16px; }
.pic_161 {background:url("icons/icon.png") -160px -96px; width: 16px; height: 16px; }
.pic_162 {background:url("icons/icon.png") -176px -96px; width: 16px; height: 16px; }
.pic_163 {background:url("icons/icon.png") -192px -96px; width: 16px; height: 16px; }
.pic_164 {background:url("icons/icon.png") -208px -96px; width: 16px; height: 16px; }
.pic_165 {background:url("icons/icon.png") -224px -96px; width: 16px; height: 16px; }
.pic_166 {background:url("icons/icon.png") -240px -96px; width: 16px; height: 16px; }
.pic_167 {background:url("icons/icon.png") -256px -96px; width: 16px; height: 16px; }
.pic_168 {background:url("icons/icon.png") -272px -96px; width: 16px; height: 16px; }
.pic_169 {background:url("icons/icon.png") -288px -96px; width: 16px; height: 16px; }
.pic_170 {background:url("icons/icon.png") -304px -96px; width: 16px; height: 16px; }
.pic_171 {background:url("icons/icon.png") -320px -96px; width: 16px; height: 16px; }
.pic_172 {background:url("icons/icon.png") -336px -96px; width: 16px; height: 16px; }
.pic_173 {background:url("icons/icon.png") -352px -96px; width: 16px; height: 16px; }
.pic_174 {background:url("icons/icon.png") -368px -96px; width: 16px; height: 16px; }
.pic_175 {background:url("icons/icon.png") -384px -96px; width: 16px; height: 16px; }
.pic_176 {background:url("icons/icon.png") -0px -112px; width: 16px; height: 16px; }
.pic_177 {background:url("icons/icon.png") -16px -112px; width: 16px; height: 16px; }
.pic_178 {background:url("icons/icon.png") -32px -112px; width: 16px; height: 16px; }
.pic_179 {background:url("icons/icon.png") -48px -112px; width: 16px; height: 16px; }
.pic_180 {background:url("icons/icon.png") -64px -112px; width: 16px; height: 16px; }
.pic_181 {background:url("icons/icon.png") -80px -112px; width: 16px; height: 16px; }
.pic_182 {background:url("icons/icon.png") -96px -112px; width: 16px; height: 16px; }
.pic_183 {background:url("icons/icon.png") -112px -112px; width: 16px; height: 16px; }
.pic_184 {background:url("icons/icon.png") -128px -112px; width: 16px; height: 16px; }
.pic_185 {background:url("icons/icon.png") -144px -112px; width: 16px; height: 16px; }
.pic_186 {background:url("icons/icon.png") -160px -112px; width: 16px; height: 16px; }
.pic_187 {background:url("icons/icon.png") -176px -112px; width: 16px; height: 16px; }
.pic_188 {background:url("icons/icon.png") -192px -112px; width: 16px; height: 16px; }
.pic_189 {background:url("icons/icon.png") -208px -112px; width: 16px; height: 16px; }
.pic_190 {background:url("icons/icon.png") -224px -112px; width: 16px; height: 16px; }
.pic_191 {background:url("icons/icon.png") -240px -112px; width: 16px; height: 16px; }
.pic_192 {background:url("icons/icon.png") -256px -112px; width: 16px; height: 16px; }
.pic_193 {background:url("icons/icon.png") -272px -112px; width: 16px; height: 16px; }
.pic_194 {background:url("icons/icon.png") -288px -112px; width: 16px; height: 16px; }
.pic_195 {background:url("icons/icon.png") -304px -112px; width: 16px; height: 16px; }
.pic_196 {background:url("icons/icon.png") -320px -112px; width: 16px; height: 16px; }
.pic_197 {background:url("icons/icon.png") -336px -112px; width: 16px; height: 16px; }
.pic_198 {background:url("icons/icon.png") -352px -112px; width: 16px; height: 16px; }
.pic_199 {background:url("icons/icon.png") -368px -112px; width: 16px; height: 16px; }
.pic_200 {background:url("icons/icon.png") -384px -112px; width: 16px; height: 16px; }
.pic_201 {background:url("icons/icon.png") -0px -128px; width: 16px; height: 16px; }
.pic_202 {background:url("icons/icon.png") -16px -128px; width: 16px; height: 16px; }
.pic_203 {background:url("icons/icon.png") -32px -128px; width: 16px; height: 16px; }
.pic_204 {background:url("icons/icon.png") -48px -128px; width: 16px; height: 16px; }
.pic_205 {background:url("icons/icon.png") -64px -128px; width: 16px; height: 16px; }
.pic_206 {background:url("icons/icon.png") -80px -128px; width: 16px; height: 16px; }
.pic_207 {background:url("icons/icon.png") -96px -128px; width: 16px; height: 16px; }
.pic_208 {background:url("icons/icon.png") -112px -128px; width: 16px; height: 16px; }
.pic_209 {background:url("icons/icon.png") -128px -128px; width: 16px; height: 16px; }
.pic_210 {background:url("icons/icon.png") -144px -128px; width: 16px; height: 16px; }
.pic_211 {background:url("icons/icon.png") -160px -128px; width: 16px; height: 16px; }
.pic_212 {background:url("icons/icon.png") -176px -128px; width: 16px; height: 16px; }
.pic_213 {background:url("icons/icon.png") -192px -128px; width: 16px; height: 16px; }
.pic_214 {background:url("icons/icon.png") -208px -128px; width: 16px; height: 16px; }
.pic_215 {background:url("icons/icon.png") -224px -128px; width: 16px; height: 16px; }
.pic_216 {background:url("icons/icon.png") -240px -128px; width: 16px; height: 16px; }
.pic_217 {background:url("icons/icon.png") -256px -128px; width: 16px; height: 16px; }
.pic_218 {background:url("icons/icon.png") -272px -128px; width: 16px; height: 16px; }
.pic_219 {background:url("icons/icon.png") -288px -128px; width: 16px; height: 16px; }
.pic_220 {background:url("icons/icon.png") -304px -128px; width: 16px; height: 16px; }
.pic_221 {background:url("icons/icon.png") -320px -128px; width: 16px; height: 16px; }
.pic_222 {background:url("icons/icon.png") -336px -128px; width: 16px; height: 16px; }
.pic_223 {background:url("icons/icon.png") -352px -128px; width: 16px; height: 16px; }
.pic_224 {background:url("icons/icon.png") -368px -128px; width: 16px; height: 16px; }
.pic_225 {background:url("icons/icon.png") -384px -128px; width: 16px; height: 16px; }
.pic_226 {background:url("icons/icon.png") -0px -144px; width: 16px; height: 16px; }
.pic_227 {background:url("icons/icon.png") -16px -144px; width: 16px; height: 16px; }
.pic_228 {background:url("icons/icon.png") -32px -144px; width: 16px; height: 16px; }
.pic_229 {background:url("icons/icon.png") -48px -144px; width: 16px; height: 16px; }
.pic_230 {background:url("icons/icon.png") -64px -144px; width: 16px; height: 16px; }
.pic_231 {background:url("icons/icon.png") -80px -144px; width: 16px; height: 16px; }
.pic_232 {background:url("icons/icon.png") -96px -144px; width: 16px; height: 16px; }
.pic_233 {background:url("icons/icon.png") -112px -144px; width: 16px; height: 16px; }
.pic_234 {background:url("icons/icon.png") -128px -144px; width: 16px; height: 16px; }
.pic_235 {background:url("icons/icon.png") -144px -144px; width: 16px; height: 16px; }
.pic_236 {background:url("icons/icon.png") -160px -144px; width: 16px; height: 16px; }
.pic_237 {background:url("icons/icon.png") -176px -144px; width: 16px; height: 16px; }
.pic_238 {background:url("icons/icon.png") -192px -144px; width: 16px; height: 16px; }
.pic_239 {background:url("icons/icon.png") -208px -144px; width: 16px; height: 16px; }
.pic_240 {background:url("icons/icon.png") -224px -144px; width: 16px; height: 16px; }
.pic_241 {background:url("icons/icon.png") -240px -144px; width: 16px; height: 16px; }
.pic_242 {background:url("icons/icon.png") -256px -144px; width: 16px; height: 16px; }
.pic_243 {background:url("icons/icon.png") -272px -144px; width: 16px; height: 16px; }
.pic_244 {background:url("icons/icon.png") -288px -144px; width: 16px; height: 16px; }
.pic_245 {background:url("icons/icon.png") -304px -144px; width: 16px; height: 16px; }
.pic_246 {background:url("icons/icon.png") -320px -144px; width: 16px; height: 16px; }
.pic_247 {background:url("icons/icon.png") -336px -144px; width: 16px; height: 16px; }
.pic_248 {background:url("icons/icon.png") -352px -144px; width: 16px; height: 16px; }
.pic_249 {background:url("icons/icon.png") -368px -144px; width: 16px; height: 16px; }
.pic_250 {background:url("icons/icon.png") -384px -144px; width: 16px; height: 16px; }
.pic_251 {background:url("icons/icon.png") -0px -160px; width: 16px; height: 16px; }
.pic_252 {background:url("icons/icon.png") -16px -160px; width: 16px; height: 16px; }
.pic_253 {background:url("icons/icon.png") -32px -160px; width: 16px; height: 16px; }
.pic_254 {background:url("icons/icon.png") -48px -160px; width: 16px; height: 16px; }
.pic_255 {background:url("icons/icon.png") -64px -160px; width: 16px; height: 16px; }
.pic_256 {background:url("icons/icon.png") -80px -160px; width: 16px; height: 16px; }
.pic_257 {background:url("icons/icon.png") -96px -160px; width: 16px; height: 16px; }
.pic_258 {background:url("icons/icon.png") -112px -160px; width: 16px; height: 16px; }
.pic_259 {background:url("icons/icon.png") -128px -160px; width: 16px; height: 16px; }
.pic_260 {background:url("icons/icon.png") -144px -160px; width: 16px; height: 16px; }
.pic_261 {background:url("icons/icon.png") -160px -160px; width: 16px; height: 16px; }
.pic_262 {background:url("icons/icon.png") -176px -160px; width: 16px; height: 16px; }
.pic_263 {background:url("icons/icon.png") -192px -160px; width: 16px; height: 16px; }
.pic_264 {background:url("icons/icon.png") -208px -160px; width: 16px; height: 16px; }
.pic_265 {background:url("icons/icon.png") -224px -160px; width: 16px; height: 16px; }
.pic_266 {background:url("icons/icon.png") -240px -160px; width: 16px; height: 16px; }
.pic_267 {background:url("icons/icon.png") -256px -160px; width: 16px; height: 16px; }
.pic_268 {background:url("icons/icon.png") -272px -160px; width: 16px; height: 16px; }
.pic_269 {background:url("icons/icon.png") -288px -160px; width: 16px; height: 16px; }
.pic_270 {background:url("icons/icon.png") -304px -160px; width: 16px; height: 16px; }
.pic_271 {background:url("icons/icon.png") -320px -160px; width: 16px; height: 16px; }
.pic_272 {background:url("icons/icon.png") -336px -160px; width: 16px; height: 16px; }
.pic_273 {background:url("icons/icon.png") -352px -160px; width: 16px; height: 16px; }
.pic_274 {background:url("icons/icon.png") -368px -160px; width: 16px; height: 16px; }
.pic_275 {background:url("icons/icon.png") -384px -160px; width: 16px; height: 16px; }
.pic_276 {background:url("icons/icon.png") -0px -176px; width: 16px; height: 16px; }
.pic_277 {background:url("icons/icon.png") -16px -176px; width: 16px; height: 16px; }
.pic_278 {background:url("icons/icon.png") -32px -176px; width: 16px; height: 16px; }
.pic_279 {background:url("icons/icon.png") -48px -176px; width: 16px; height: 16px; }
.pic_280 {background:url("icons/icon.png") -64px -176px; width: 16px; height: 16px; }
.pic_281 {background:url("icons/icon.png") -80px -176px; width: 16px; height: 16px; }
.pic_282 {background:url("icons/icon.png") -96px -176px; width: 16px; height: 16px; }
.pic_283 {background:url("icons/icon.png") -112px -176px; width: 16px; height: 16px; }
.pic_284 {background:url("icons/icon.png") -128px -176px; width: 16px; height: 16px; }
.pic_285 {background:url("icons/icon.png") -144px -176px; width: 16px; height: 16px; }
.pic_286 {background:url("icons/icon.png") -160px -176px; width: 16px; height: 16px; }
.pic_287 {background:url("icons/icon.png") -176px -176px; width: 16px; height: 16px; }
.pic_288 {background:url("icons/icon.png") -192px -176px; width: 16px; height: 16px; }
.pic_289 {background:url("icons/icon.png") -208px -176px; width: 16px; height: 16px; }
.pic_290 {background:url("icons/icon.png") -224px -176px; width: 16px; height: 16px; }
.pic_291 {background:url("icons/icon.png") -240px -176px; width: 16px; height: 16px; }
.pic_292 {background:url("icons/icon.png") -256px -176px; width: 16px; height: 16px; }
.pic_293 {background:url("icons/icon.png") -272px -176px; width: 16px; height: 16px; }
.pic_294 {background:url("icons/icon.png") -288px -176px; width: 16px; height: 16px; }
.pic_295 {background:url("icons/icon.png") -304px -176px; width: 16px; height: 16px; }
.pic_296 {background:url("icons/icon.png") -320px -176px; width: 16px; height: 16px; }
.pic_297 {background:url("icons/icon.png") -336px -176px; width: 16px; height: 16px; }
.pic_298 {background:url("icons/icon.png") -352px -176px; width: 16px; height: 16px; }
.pic_299 {background:url("icons/icon.png") -368px -176px; width: 16px; height: 16px; }
.pic_300 {background:url("icons/icon.png") -384px -176px; width: 16px; height: 16px; }
.pic_301 {background:url("icons/icon.png") -0px -192px; width: 16px; height: 16px; }
.pic_302 {background:url("icons/icon.png") -16px -192px; width: 16px; height: 16px; }
.pic_303 {background:url("icons/icon.png") -32px -192px; width: 16px; height: 16px; }
.pic_304 {background:url("icons/icon.png") -48px -192px; width: 16px; height: 16px; }
.pic_305 {background:url("icons/icon.png") -64px -192px; width: 16px; height: 16px; }
.pic_306 {background:url("icons/icon.png") -80px -192px; width: 16px; height: 16px; }
.pic_307 {background:url("icons/icon.png") -96px -192px; width: 16px; height: 16px; }
.pic_308 {background:url("icons/icon.png") -112px -192px; width: 16px; height: 16px; }
.pic_309 {background:url("icons/icon.png") -128px -192px; width: 16px; height: 16px; }
.pic_310 {background:url("icons/icon.png") -144px -192px; width: 16px; height: 16px; }
.pic_311 {background:url("icons/icon.png") -160px -192px; width: 16px; height: 16px; }
.pic_312 {background:url("icons/icon.png") -176px -192px; width: 16px; height: 16px; }
.pic_313 {background:url("icons/icon.png") -192px -192px; width: 16px; height: 16px; }
.pic_314 {background:url("icons/icon.png") -208px -192px; width: 16px; height: 16px; }
.pic_315 {background:url("icons/icon.png") -224px -192px; width: 16px; height: 16px; }
.pic_316 {background:url("icons/icon.png") -240px -192px; width: 16px; height: 16px; }
.pic_317 {background:url("icons/icon.png") -256px -192px; width: 16px; height: 16px; }
.pic_318 {background:url("icons/icon.png") -272px -192px; width: 16px; height: 16px; }
.pic_319 {background:url("icons/icon.png") -288px -192px; width: 16px; height: 16px; }
.pic_320 {background:url("icons/icon.png") -304px -192px; width: 16px; height: 16px; }
.pic_321 {background:url("icons/icon.png") -320px -192px; width: 16px; height: 16px; }
.pic_322 {background:url("icons/icon.png") -336px -192px; width: 16px; height: 16px; }
.pic_323 {background:url("icons/icon.png") -352px -192px; width: 16px; height: 16px; }
.pic_324 {background:url("icons/icon.png") -368px -192px; width: 16px; height: 16px; }
.pic_325 {background:url("icons/icon.png") -384px -192px; width: 16px; height: 16px; }
.pic_326 {background:url("icons/icon.png") -0px -208px; width: 16px; height: 16px; }
.pic_327 {background:url("icons/icon.png") -16px -208px; width: 16px; height: 16px; }
.pic_328 {background:url("icons/icon.png") -32px -208px; width: 16px; height: 16px; }
.pic_329 {background:url("icons/icon.png") -48px -208px; width: 16px; height: 16px; }
.pic_330 {background:url("icons/icon.png") -64px -208px; width: 16px; height: 16px; }
.pic_331 {background:url("icons/icon.png") -80px -208px; width: 16px; height: 16px; }
.pic_332 {background:url("icons/icon.png") -96px -208px; width: 16px; height: 16px; }
.pic_333 {background:url("icons/icon.png") -112px -208px; width: 16px; height: 16px; }
.pic_334 {background:url("icons/icon.png") -128px -208px; width: 16px; height: 16px; }
.pic_335 {background:url("icons/icon.png") -144px -208px; width: 16px; height: 16px; }
.pic_336 {background:url("icons/icon.png") -160px -208px; width: 16px; height: 16px; }
.pic_337 {background:url("icons/icon.png") -176px -208px; width: 16px; height: 16px; }
.pic_338 {background:url("icons/icon.png") -192px -208px; width: 16px; height: 16px; }
.pic_339 {background:url("icons/icon.png") -208px -208px; width: 16px; height: 16px; }
.pic_340 {background:url("icons/icon.png") -224px -208px; width: 16px; height: 16px; }
.pic_341 {background:url("icons/icon.png") -240px -208px; width: 16px; height: 16px; }
.pic_342 {background:url("icons/icon.png") -256px -208px; width: 16px; height: 16px; }
.pic_343 {background:url("icons/icon.png") -272px -208px; width: 16px; height: 16px; }
.pic_344 {background:url("icons/icon.png") -288px -208px; width: 16px; height: 16px; }
.pic_345 {background:url("icons/icon.png") -304px -208px; width: 16px; height: 16px; }
.pic_346 {background:url("icons/icon.png") -320px -208px; width: 16px; height: 16px; }
.pic_347 {background:url("icons/icon.png") -336px -208px; width: 16px; height: 16px; }
.pic_348 {background:url("icons/icon.png") -352px -208px; width: 16px; height: 16px; }
.pic_349 {background:url("icons/icon.png") -368px -208px; width: 16px; height: 16px; }
.pic_350 {background:url("icons/icon.png") -384px -208px; width: 16px; height: 16px; }
.pic_351 {background:url("icons/icon.png") -0px -224px; width: 16px; height: 16px; }
.pic_352 {background:url("icons/icon.png") -16px -224px; width: 16px; height: 16px; }
.pic_353 {background:url("icons/icon.png") -32px -224px; width: 16px; height: 16px; }
.pic_354 {background:url("icons/icon.png") -48px -224px; width: 16px; height: 16px; }
.pic_355 {background:url("icons/icon.png") -64px -224px; width: 16px; height: 16px; }
.pic_356 {background:url("icons/icon.png") -80px -224px; width: 16px; height: 16px; }
.pic_357 {background:url("icons/icon.png") -96px -224px; width: 16px; height: 16px; }
.pic_358 {background:url("icons/icon.png") -112px -224px; width: 16px; height: 16px; }
.pic_359 {background:url("icons/icon.png") -128px -224px; width: 16px; height: 16px; }
.pic_360 {background:url("icons/icon.png") -144px -224px; width: 16px; height: 16px; }
.pic_361 {background:url("icons/icon.png") -160px -224px; width: 16px; height: 16px; }
.pic_362 {background:url("icons/icon.png") -176px -224px; width: 16px; height: 16px; }
.pic_363 {background:url("icons/icon.png") -192px -224px; width: 16px; height: 16px; }
.pic_364 {background:url("icons/icon.png") -208px -224px; width: 16px; height: 16px; }
.pic_365 {background:url("icons/icon.png") -224px -224px; width: 16px; height: 16px; }
.pic_366 {background:url("icons/icon.png") -240px -224px; width: 16px; height: 16px; }
.pic_367 {background:url("icons/icon.png") -256px -224px; width: 16px; height: 16px; }
.pic_368 {background:url("icons/icon.png") -272px -224px; width: 16px; height: 16px; }
.pic_369 {background:url("icons/icon.png") -288px -224px; width: 16px; height: 16px; }
.pic_370 {background:url("icons/icon.png") -304px -224px; width: 16px; height: 16px; }
.pic_371 {background:url("icons/icon.png") -320px -224px; width: 16px; height: 16px; }
.pic_372 {background:url("icons/icon.png") -336px -224px; width: 16px; height: 16px; }
.pic_373 {background:url("icons/icon.png") -352px -224px; width: 16px; height: 16px; }
.pic_374 {background:url("icons/icon.png") -368px -224px; width: 16px; height: 16px; }
.pic_375 {background:url("icons/icon.png") -384px -224px; width: 16px; height: 16px; }
.pic_376 {background:url("icons/icon.png") -0px -240px; width: 16px; height: 16px; }
.pic_377 {background:url("icons/icon.png") -16px -240px; width: 16px; height: 16px; }
.pic_378 {background:url("icons/icon.png") -32px -240px; width: 16px; height: 16px; }
.pic_379 {background:url("icons/icon.png") -48px -240px; width: 16px; height: 16px; }
.pic_380 {background:url("icons/icon.png") -64px -240px; width: 16px; height: 16px; }
.pic_381 {background:url("icons/icon.png") -80px -240px; width: 16px; height: 16px; }
.pic_382 {background:url("icons/icon.png") -96px -240px; width: 16px; height: 16px; }
.pic_383 {background:url("icons/icon.png") -112px -240px; width: 16px; height: 16px; }
.pic_384 {background:url("icons/icon.png") -128px -240px; width: 16px; height: 16px; }
.pic_385 {background:url("icons/icon.png") -144px -240px; width: 16px; height: 16px; }
.pic_386 {background:url("icons/icon.png") -160px -240px; width: 16px; height: 16px; }
.pic_387 {background:url("icons/icon.png") -176px -240px; width: 16px; height: 16px; }
.pic_388 {background:url("icons/icon.png") -192px -240px; width: 16px; height: 16px; }
.pic_389 {background:url("icons/icon.png") -208px -240px; width: 16px; height: 16px; }
.pic_390 {background:url("icons/icon.png") -224px -240px; width: 16px; height: 16px; }
.pic_391 {background:url("icons/icon.png") -240px -240px; width: 16px; height: 16px; }
.pic_392 {background:url("icons/icon.png") -256px -240px; width: 16px; height: 16px; }
.pic_393 {background:url("icons/icon.png") -272px -240px; width: 16px; height: 16px; }
.pic_394 {background:url("icons/icon.png") -288px -240px; width: 16px; height: 16px; }
.pic_395 {background:url("icons/icon.png") -304px -240px; width: 16px; height: 16px; }
.pic_396 {background:url("icons/icon.png") -320px -240px; width: 16px; height: 16px; }
.pic_397 {background:url("icons/icon.png") -336px -240px; width: 16px; height: 16px; }
.pic_398 {background:url("icons/icon.png") -352px -240px; width: 16px; height: 16px; }
.pic_399 {background:url("icons/icon.png") -368px -240px; width: 16px; height: 16px; }
.pic_400 {background:url("icons/icon.png") -384px -240px; width: 16px; height: 16px; }
.pic_401 {background:url("icons/icon.png") -0px -256px; width: 16px; height: 16px; }
.pic_402 {background:url("icons/icon.png") -16px -256px; width: 16px; height: 16px; }
.pic_403 {background:url("icons/icon.png") -32px -256px; width: 16px; height: 16px; }
.pic_404 {background:url("icons/icon.png") -48px -256px; width: 16px; height: 16px; }
.pic_405 {background:url("icons/icon.png") -64px -256px; width: 16px; height: 16px; }
.pic_406 {background:url("icons/icon.png") -80px -256px; width: 16px; height: 16px; }
.pic_407 {background:url("icons/icon.png") -96px -256px; width: 16px; height: 16px; }
.pic_408 {background:url("icons/icon.png") -112px -256px; width: 16px; height: 16px; }
.pic_409 {background:url("icons/icon.png") -128px -256px; width: 16px; height: 16px; }
.pic_410 {background:url("icons/icon.png") -144px -256px; width: 16px; height: 16px; }
.pic_411 {background:url("icons/icon.png") -160px -256px; width: 16px; height: 16px; }
.pic_412 {background:url("icons/icon.png") -176px -256px; width: 16px; height: 16px; }
.pic_413 {background:url("icons/icon.png") -192px -256px; width: 16px; height: 16px; }
.pic_414 {background:url("icons/icon.png") -208px -256px; width: 16px; height: 16px; }
.pic_415 {background:url("icons/icon.png") -224px -256px; width: 16px; height: 16px; }
.pic_416 {background:url("icons/icon.png") -240px -256px; width: 16px; height: 16px; }
.pic_417 {background:url("icons/icon.png") -256px -256px; width: 16px; height: 16px; }
.pic_418 {background:url("icons/icon.png") -272px -256px; width: 16px; height: 16px; }
.pic_419 {background:url("icons/icon.png") -288px -256px; width: 16px; height: 16px; }
.pic_420 {background:url("icons/icon.png") -304px -256px; width: 16px; height: 16px; }
.pic_421 {background:url("icons/icon.png") -320px -256px; width: 16px; height: 16px; }
.pic_422 {background:url("icons/icon.png") -336px -256px; width: 16px; height: 16px; }
.pic_423 {background:url("icons/icon.png") -352px -256px; width: 16px; height: 16px; }
.pic_424 {background:url("icons/icon.png") -368px -256px; width: 16px; height: 16px; }
.pic_425 {background:url("icons/icon.png") -384px -256px; width: 16px; height: 16px; }
.pic_426 {background:url("icons/icon.png") -0px -272px; width: 16px; height: 16px; }
.pic_427 {background:url("icons/icon.png") -16px -272px; width: 16px; height: 16px; }
.pic_428 {background:url("icons/icon.png") -32px -272px; width: 16px; height: 16px; }
.pic_429 {background:url("icons/icon.png") -48px -272px; width: 16px; height: 16px; }
.pic_430 {background:url("icons/icon.png") -64px -272px; width: 16px; height: 16px; }
.pic_431 {background:url("icons/icon.png") -80px -272px; width: 16px; height: 16px; }
.pic_432 {background:url("icons/icon.png") -96px -272px; width: 16px; height: 16px; }
.pic_433 {background:url("icons/icon.png") -112px -272px; width: 16px; height: 16px; }
.pic_434 {background:url("icons/icon.png") -128px -272px; width: 16px; height: 16px; }
.pic_435 {background:url("icons/icon.png") -144px -272px; width: 16px; height: 16px; }
.pic_436 {background:url("icons/icon.png") -160px -272px; width: 16px; height: 16px; }
.pic_437 {background:url("icons/icon.png") -176px -272px; width: 16px; height: 16px; }
.pic_438 {background:url("icons/icon.png") -192px -272px; width: 16px; height: 16px; }
.pic_439 {background:url("icons/icon.png") -208px -272px; width: 16px; height: 16px; }
.pic_440 {background:url("icons/icon.png") -224px -272px; width: 16px; height: 16px; }
.pic_441 {background:url("icons/icon.png") -240px -272px; width: 16px; height: 16px; }
.pic_442 {background:url("icons/icon.png") -256px -272px; width: 16px; height: 16px; }
.pic_443 {background:url("icons/icon.png") -272px -272px; width: 16px; height: 16px; }
.pic_444 {background:url("icons/icon.png") -288px -272px; width: 16px; height: 16px; }
.pic_445 {background:url("icons/icon.png") -304px -272px; width: 16px; height: 16px; }
.pic_446 {background:url("icons/icon.png") -320px -272px; width: 16px; height: 16px; }
.pic_447 {background:url("icons/icon.png") -336px -272px; width: 16px; height: 16px; }
.pic_448 {background:url("icons/icon.png") -352px -272px; width: 16px; height: 16px; }
.pic_449 {background:url("icons/icon.png") -368px -272px; width: 16px; height: 16px; }
.pic_450 {background:url("icons/icon.png") -384px -272px; width: 16px; height: 16px; }
.pic_451 {background:url("icons/icon.png") -0px -288px; width: 16px; height: 16px; }
.pic_452 {background:url("icons/icon.png") -16px -288px; width: 16px; height: 16px; }
.pic_453 {background:url("icons/icon.png") -32px -288px; width: 16px; height: 16px; }
.pic_454 {background:url("icons/icon.png") -48px -288px; width: 16px; height: 16px; }
.pic_455 {background:url("icons/icon.png") -64px -288px; width: 16px; height: 16px; }
.pic_456 {background:url("icons/icon.png") -80px -288px; width: 16px; height: 16px; }
.pic_457 {background:url("icons/icon.png") -96px -288px; width: 16px; height: 16px; }
.pic_458 {background:url("icons/icon.png") -112px -288px; width: 16px; height: 16px; }
.pic_459 {background:url("icons/icon.png") -128px -288px; width: 16px; height: 16px; }
.pic_460 {background:url("icons/icon.png") -144px -288px; width: 16px; height: 16px; }
.pic_461 {background:url("icons/icon.png") -160px -288px; width: 16px; height: 16px; }
.pic_462 {background:url("icons/icon.png") -176px -288px; width: 16px; height: 16px; }
.pic_463 {background:url("icons/icon.png") -192px -288px; width: 16px; height: 16px; }
.pic_464 {background:url("icons/icon.png") -208px -288px; width: 16px; height: 16px; }
.pic_465 {background:url("icons/icon.png") -224px -288px; width: 16px; height: 16px; }
.pic_466 {background:url("icons/icon.png") -240px -288px; width: 16px; height: 16px; }
.pic_467 {background:url("icons/icon.png") -256px -288px; width: 16px; height: 16px; }
.pic_468 {background:url("icons/icon.png") -272px -288px; width: 16px; height: 16px; }
.pic_469 {background:url("icons/icon.png") -288px -288px; width: 16px; height: 16px; }
.pic_470 {background:url("icons/icon.png") -304px -288px; width: 16px; height: 16px; }

第四步、将图片资源放进themes文件夹下的icon文件夹中

以上四步完成后前期准备工作就完成了

前段JSP界面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 	<%@ include file="/WEB-INF/jsp/public/common.jspf"%> 
    <script type="text/javascript"> 
    var base_path="http://localhost:8080/easyui/";
    $(function(){
    	
    	$('.addTab').click(function(){
    		var title = this.innerHTML;
    		var url = $(this).attr("data");
    		addTab(title,base_path+ url);
    		});
    })
    function addTab(title, url){
        if ($('#tt').tabs('exists', title)){
            $('#tt').tabs('select', title);
        } else {
            var content = '<iframe scrolling="no" frameborder="0"  src="'+url+'" style="width:100%;height:100%;"></iframe>';
            $('#tt').tabs('add',{
                title:title,
                content:content,
                closable:true
            });
        }
    };  	
    </script>
</head>
<body class="easyui-layout">

	<div region="north"  style="height:70px;"></div>	
    <div region="west" title="菜单列表"  split="true" style="width:150px;">
    	<div class="easyui-accordion" data-options="fit:true,border:false">
	    	<c:forEach items="${menuList}" var="menu">
	    		<div title="${menu.text}" iconCls="${menu.iconCls}">		    		
	    			<ul class="easyui-tree">
	    				<c:forEach items="${menu.getMenuLine()}" var="line">
	    					<li iconCls="${line.iconCls}">
	    						<div data= "${line.url}" class="addTab">${line.text}</div>
	    					</li>	    				
		    			</c:forEach>    				
	    			</ul>	
	    		</div>
	    	</c:forEach>		
    	</div>
    </div>
    <div region="center" id="tt"   class="easyui-tabs"  style="overflow-y : hidden;">  
    	
    </div>    
    <div region="south"  style="height:30px;margin-top:5px;"></div>
</body>
</html>

 后台部分代码(加载导航菜单，菜单管理界面数据加载、分页、添加)

public List<Menu> loadMenu() {
		List<Menu> result = new ArrayList<Menu>();
		List<Menu> menuList = menuDao.loadMenu("0");
		for(int i = 0;i < menuList.size();i++) {
			Menu menu = menuList.get(i);
			List<Menu> menuLine = menuDao.loadMenu(menu.getId());
			
			menu.setMenuLine(menuLine);	
			result.add(menu);
		}	
		return menuList;
	}

	public List<Menu> getMenuList(Integer page,Integer rows,String id,String text) { 
        page = (page -1) * rows;
		List<Menu> menuList = menuDao.getMenuList(page,rows,id,text);
		return menuList;
	}

	public Integer getMenuCount(String id,String text) {

		Integer count = menuDao.getMenuCount(id,text);
		return count;
	}

	public MsgResult<Menu> AddMenu(String id, String text, String url, String iconCls, String parentId) {
		MsgResult<Menu> result = new MsgResult<Menu>();
		try {
			Menu menu = new Menu();
			menu.setId(id);
			menu.setText(text);
			menu.setUrl(url);
			menu.setIconCls(iconCls);
			menu.setParentId(parentId);
			menuDao.saveMenu(menu);
			result.setData(menu);
			result.setStatus(0);
			result.setMsg("添加菜单成功");
		}catch(Exception ex) {
			result.setStatus(1);
			result.setMsg(ex.getMessage());
		}
		return result;
	}

 

sun_jinhang
关注
专栏目录
EasyUI Tree+Asp.net实现权限树或目录树导航的简单实例
10-26
EasyUI Tree与***结合使用实现权限树或目录树导航的功能，主要适用于构建网站后台管理系统中的导航模块，便于用户对网站的结构与权限进行管理。该实现方式利用了前端框架EasyUI提供的Tree控件和***的后台处理能力。 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航
weixin_34217773的博客
07-04 413
系列目录 本节主要知识点是easyui 的手风琴加树结构做菜单导航 有园友抱怨原来菜单非常难看，但是基于原有树形无限级别的设计，没有办法只能已树形展示 先来看原来的效果 改变后的效果，当然我已经做好了，最后只放出代码供大家参考，其实网上也有这方面的资料，但是不是很好用，我还是自己写了 手风琴一直都是比较漂亮和受欢迎的，但是基于树多级别来说，做起来就比较麻烦，所以我这里也用了手风琴加树...
EasyUI学习笔记3：导航菜单_ accordion和tree插件
weixin_34384557的博客
03-24 325
为什么80%的码农都做不了架构师？>>> ...
EasyUI 1.5.1 美化主题大包 Insdep Theme 1.0.3 正式版已发布，开源下载
chiyi19810707的博客
01-21 958
jQuery EasyUI 1.5.x of insdep theme 更新截图请移至下方，附部分美化截图 关于 Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包，拥有百度编辑器、cropper、Highcharts、justgage、plupload等各...
EasyUI学习笔记5：来点甜点_ menu和theme插件
weixin_34233679的博客
03-25 259
为什么80%的码农都做不了架构师？>>> ...
easyui中layout、accordion加tabs实现简单菜单布局实例
懒人的博客
03-15 8703
一般对于后台界面都是采用BorderLayout进行布局的。BorderLayout也就是将界面分成五块，如下图所示，分别有：North、East、South、West、Center其中比较特殊的是Center这块区域，它是不固定的，会随着四块区域的变化而做出相应的调整。比如将West向左缩小10px，那么Center则会向West方向扩张10px。其实这个easyUI已经帮我们实现好了，我们只需要
easyUI-springmvc-tree-demo
11-29
《easyUI与SpringMVC整合实现Tree组件操作详解》 在Web开发中，前端界面的交互性和用户体验至关重要，其中树形结构（Tree）组件是一种常用的数据展示方式，它能够清晰地展示层次关系，便于用户浏览和操作。EasyUI是...
SpringMVC+EasyUI实现页面左侧导航菜单功能
08-25
SpringMVC+EasyUI实现页面左侧导航菜单功能 SpringMVC是Java世界中一个流行的Web应用程序框架，EasyUI是一个功能强大且灵活的前端UI框架。今天，我们将介绍如何使用SpringMVC和EasyUI实现页面左侧导航菜单功能。 ...
erp完整源码-ssm+easyUI+mysql+maven+shiro
09-25
erp项目 基于ssm+easyUI+mysql+maven+shiro开发 本系统实现目标如下： ## 项目技术架构(Spring+SpringMVC+Mybatis） ## - Maven - Spring（IOC DI AOP 声明式事务处理） - SpringMVC（支持Restful风格） - Hibernate...
erp源码-ssm+easyUI+mysql+maven+shiro
09-25
erp项目 基于ssm+easyUI+mysql+maven+shiro开发 本系统实现目标如下： ## 项目技术架构(Spring+SpringMVC+Mybatis） ## - Maven - Spring（IOC DI AOP 声明式事务处理） - SpringMVC（支持Restful风格） - Hibernate...
easyui-tree多级菜单并动态与数据库交互
08-19
前台页面包括后台代码，实现了easyui-tree右键增加节点，修改节点，删除节点，包括子节点的操作，并同时更新数据库，动态更新tree
Easyui（制作树形菜单，Tab页）
T275fuyou的博客
04-07 289
目录 代码区： 实体类代码演示： biz层代码演示： Servlet代码演示： web.xml代码演示： 界面代码演示： 代码区： 实体类代码演示： package com.zking.model; import java.io.Serializable; import java.util.ArrayList; import java.util.List; public class Module implements Serializable{ privat...
easyui树形菜单制作之二级目录实现
爱吃炒饭的逗比小豆豆的博客
07-31 907
1.参考 参考该博客 2.后台daoimpl无修改，有需要看前面的博客 3.action类（稍大程度的修改） /** * */ package com.jit.z2206.sue.md5webproject.action; import java.util.HashMap; import java.util.List; import java.util.Map; import
EasyUI 1.5.1 美化主题 EasyUI 1.5.1 Of Insdep Theme 1.0
weixin_34018169的博客
01-23 434
jQuery EasyUI 1.5.x of insdep theme下方附部分美化截图关于Insdep theme是基于EasyUI 1.5.x 的一款免费的美化主题包，拥有百度编辑器、cropper、Highcharts、justgage、plupload等各类适应本主题的第三方插件美化补丁。并且各类常用Jquery插件正在美化中。后期会提供更多的主题、组件及第三方插件...
EasyUI树形菜单的使用
收破烂的小熊猫
05-28 887
EasyUI树形菜单的使用 如图，是我制作淘淘商城时使用EasyUI制作的树形菜单，可添加和删除叶子节点。 Easyui tree的使用教程可查看官网： http://www.jeasyui.net/tutorial/52.html 这里我主要是结合后端的形式，来实现EasyUi 树形菜单的CRUD操作。 页面代码： content-catrgory.jsp <%@ page langu...
EasyUI tree菜单添加、删除、保存
蜂蜂的专栏
10-23 7014
效果图： html代码： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> /easyui/themes/default/easyui.css"> /easyui/themes/icon.css"> /easyui/jquer
easyUI树（Tree）和手风琴（Accordion）扩展
weixin_54174885的博客
07-24 248
上期发布了有关布局（Layout）的用法，这期准备完善以下树（Tree）和手风琴（Accordion）的用法与扩展。
使用 EasyUI 创建左侧导航菜单
weixin_34178244的博客
05-14 1526
使用 JQuery EasyUI 创建左侧导航菜单，菜单的数据由后台服务提供。 效果图 HTML 元素 <div id="menuAccordion"></div> JavaScript 代码 $(function() { var basePath = $('#basePath').val(); // 初始化 $(...
easyui树mysql_基于EasyUI的基础之上实现树形功能菜单
weixin_42515089的博客
02-06 245
页面展示截图如下：为了实现以上效果，在开始前必须先将环境配置一下。第一步： 首先，先将 jquery-easyui-1.2.6 文件引入到工程项目下，并在jsp页面上进入引入3个jsp文件和2个css文件。如下：引入顺序必须按照以上顺序引入，否则页面展示效果将出错。第二步：引入jar包，分别为：commons-beanutils-1.8.3.jar、commons-collections-3.2....
easyUI-datagrid导出功能实现：服务与控制器示例
在Java开发中,实现easyUI-datagrid数据表格的导出功能通常涉及到前端界面展示、后端业务逻辑处理以及数据模型的管理。本文档的核心内容是关于一个名为"/exporterExcel"的HTTP请求处理器，它负责将datagrid中的数据...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值