EasyUI的简单的入门(一)

最新推荐文章于 2021-09-09 22:21:25 发布
最新推荐文章于 2021-09-09 22:21:25 发布
阅读量324 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： EasyUI 文章标签： EasyUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/jsaber/article/details/79150363
本文是EasyUI的初步教程，首先介绍了如何创建一个Maven项目，接着详细说明了如何将EasyUI库导入到项目中，为后续的组件使用和界面开发打下基础。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建maven项目

导入架包

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>Easy</groupId>
  <artifactId>Easy</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name/>
  <description/>
  <dependencies>
  
   <dependency>
		  <groupId>org.springframework</groupId>
		  <artifactId>spring-webmvc</artifactId>
		  <version>4.2.0.RELEASE</version>    
	</dependency>
	<!--事务的基础 -->
	<dependency>
		  <groupId>org.springframework</groupId>
		  <artifactId>spring-aop</artifactId>
		  <version>4.2.0.RELEASE</version>    
	</dependency>
	<dependency>
		  <groupId>org.springframework</groupId>
		  <artifactId>spring-tx</artifactId>
		  <version>4.2.0.RELEASE</version>    
	</dependency>
	<!-- 调用jdbc -->
	<dependency>
		  <groupId>org.springframework</groupId>
		  <artifactId>spring-jdbc</artifactId>
		  <version>4.2.0.RELEASE</version>    
	</dependency>
	<dependency>
			<groupId>aopalliance</groupId>
			<artifactId>aopalliance</artifactId>
			<version>1.0</version>
		</dependency>
		<dependency>
		  <groupId>org.aspectj</groupId>
		  <artifactId>aspectjweaver</artifactId>
		  <version>1.8.12</version>
		</dependency>
		
		<!-- 文件上传 -->
		<dependency>
			<groupId>commons-fileupload</groupId>
			<artifactId>commons-fileupload</artifactId>
			<version>1.3.3</version>
		</dependency>
		
		
		<!-- 
		   添加jacson的json解析库
		 -->
		 <dependency>
		  <groupId>com.fasterxml.jackson.core</groupId>
		  <artifactId>jackson-core</artifactId>
		  <version>2.6.0</version>
		</dependency>
		<dependency>
		  <groupId>org.codehaus.jackson</groupId>
		  <artifactId>jackson-core-asl</artifactId>
		  <version>1.9.12</version>
		</dependency>
		<dependency>
		  <groupId>com.fasterxml.jackson.core</groupId>
		  <artifactId>jackson-annotations</artifactId>
		  <version>2.6.0</version>
		</dependency>
		<dependency>
		  <groupId>com.fasterxml.jackson.core</groupId>
		  <artifactId>jackson-databind</artifactId>
		  <version>2.6.0</version>
		</dependency>
		<dependency>
		  <groupId>org.codehaus.jackson</groupId>
		  <artifactId>jackson-mapper-asl</artifactId>
		  <version>1.9.12</version>
		</dependency>
	<!--连接的数据库-->
	<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<version>5.1.26</version>
		</dependency>
		<!-- 连接池 -->
	<dependency>
	     <groupId>com.alibaba</groupId>
	     <artifactId>druid</artifactId>
	     <version>1.1.5</version>
	</dependency>
	<!-- mybatis集成spring -->
	<dependency>
		<groupId>org.mybatis</groupId>
		<artifactId>mybatis</artifactId>
		<version>3.2.8</version>
	</dependency>
	<dependency>
	  <groupId>org.mybatis</groupId>
	  <artifactId>mybatis-spring</artifactId>
	  <version>1.2.3</version>
	</dependency>
  
    <dependency>
      <groupId>org.apache.openejb</groupId>
      <artifactId>javaee-api</artifactId>
      <version>5.0-1</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.faces</groupId>
      <artifactId>jsf-api</artifactId>
      <version>1.2_04</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.1</version>
      <scope>provided</scope>
    </dependency>
    <dependency>
      <groupId>javax.faces</groupId>
      <artifactId>jsf-impl</artifactId>
      <version>1.2_04</version>
      <scope>provided</scope>
    </dependency>
  </dependencies>
  <build>
    <sourceDirectory>${basedir}/src</sourceDirectory>
    <outputDirectory>${basedir}/WebRoot/WEB-INF/classes</outputDirectory>
    <resources>
      <resource>
        <directory>${basedir}/src</directory>
        <excludes>
          <exclude>**/*.java</exclude>
        </excludes>
      </resource>
    </resources>
    <plugins>
      <plugin>
        <artifactId>maven-war-plugin</artifactId>
        <configuration>
          <webappDirectory>${basedir}/WebRoot</webappDirectory>
          <warSourceDirectory>${basedir}/WebRoot</warSourceDirectory>
        </configuration>
      </plugin>
      <plugin>
        <artifactId>maven-compiler-plugin</artifactId>
        <configuration>
          <source>1.5</source>
          <target>1.5</target>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>
在web.xml中配置 

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 	<!--
  
  ======================================
  spring的配置
  ======================================
  
   -->		
  <context-param>
  	<param-name>contextConfigLocation</param-name>
  	<param-value>classpath:spring.xml</param-value>
  </context-param>
  <listener>
  	<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>
  
  <!--
  
  =========================================
  springmvc的配置
  =========================================
  
   -->	
  <!-- 解决乱码的配置 -->
 <filter>
  	<filter-name>characterEncodingFilter</filter-name>
  	<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
  	<init-param>
  	  <param-name>encoding</param-name>
  	  <param-value>UTF-8</param-value>
  	</init-param>
  	<init-param>
  		<param-name>forceEncoding</param-name>
  		<param-value>true</param-value>
  	</init-param>
  </filter>
  <filter-mapping>
  	<filter-name>characterEncodingFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>	
  <!-- 配置springmvc支持 restful风格url
     put+delete  
     form+hidden(_method)   ?_method=put
   -->
  <filter>
  	<filter-name>myFilter</filter-name>
  	<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>myFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>
  <!-- 配置springmvc的核心控制器 -->
  <servlet>
  	<servlet-name>springmvc</servlet-name>
  	<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
  	<init-param>
  		<param-name>contextConfigLocation</param-name>
  		<param-value>/WEB-INF/mymvc.xml</param-value>
  	</init-param>
  	<load-on-startup>1</load-on-startup>
  </servlet>	
  <servlet-mapping>
  	<servlet-name>springmvc</servlet-name>
  	<url-pattern>/</url-pattern>
  </servlet-mapping>	
 
  <!-- 启用druid的监控功能 -->
  <servlet>
  	<servlet-name>statViewServlet</servlet-name>
  	<servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class>
  	<init-param>
  		<param-name>loginUsername</param-name>
  		<param-value>admin</param-value>
  	</init-param>
  	<init-param>
  		<param-name>loginPassword</param-name>
  		<param-value>zmw</param-value>
  	</init-param>
  	<load-on-startup>1</load-on-startup>
  </servlet>	
  <servlet-mapping>
  	<servlet-name>statViewServlet</servlet-name>
  	<url-pattern>/druid/*</url-pattern>
  </servlet-mapping>	
 
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>
在web-inf下配置mymvc.xml 

<?xml version="1.0" encoding="UTF-8"?>
<beans
	xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
	http://www.springframework.org/schema/tx  http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
	http://www.springframework.org/schema/aop  http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
	http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
	">
  <!-- springmvc控制层处理 + 视图层 -->	
  <context:component-scan base-package="cn">
     <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Service"/>
  	 <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Repository"/>
  </context:component-scan>
 
  <mvc:default-servlet-handler/>
  <!-- 上传文件 -->
  <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"></bean>
  <!-- 引用返回对象 响应json的消息转换器 -->
  <mvc:annotation-driven>
  	<mvc:message-converters>
  		<bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter">
          <property name="supportedMediaTypes">
    				<list>
    					<value>text/html</value>
    					<value>application/x-www-form-urlencoded</value>
    				</list>
    			</property>
        </bean>
        <!-- 配置返回对应解析成json的消息转换器 -->
    	<bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
    			<property name="supportedMediaTypes">
    				<list>
    					<value>text/html</value>
    					<value>application/x-www-form-urlencoded</value>
    				</list>
    			</property>
    	</bean>
  	</mvc:message-converters>
  </mvc:annotation-driven>
</beans>
配置spring.xml文件 

<?xml version="1.0" encoding="UTF-8"?>
<beans
	xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:p="http://www.springframework.org/schema/p"
	xmlns:context="http://www.springframework.org/schema/context"
	xmlns:tx="http://www.springframework.org/schema/tx"
	xmlns:aop="http://www.springframework.org/schema/aop"
	xmlns:mvc="http://www.springframework.org/schema/mvc"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-4.2.xsd
	http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.2.xsd
	http://www.springframework.org/schema/tx  http://www.springframework.org/schema/tx/spring-tx-4.1.xsd
	http://www.springframework.org/schema/aop  http://www.springframework.org/schema/aop/spring-aop-4.1.xsd
	http://www.springframework.org/schema/mvc  http://www.springframework.org/schema/mvc/spring-mvc-4.2.xsd
	">
  <!-- spring是bean的容器（service+repository）-->	
  <context:component-scan base-package="cn">
     <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
  </context:component-scan>
  <!-- 所有数据库操作的源头 实现自接口DataSouce
     DriverManagerDataSource （请求产生一个连接 用完关闭 连接重用 连接池）
     c3p0 dbcp druid(阿里 监控功能)
   -->
   <context:property-placeholder location="classpath:jdbc.properties"/>
   <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
   	<property name="url" value="${url}"></property>
    <property name="driverClassName" value="${driverClassName}"></property>
    <property name="username" value="${userName1}"></property>
    <property name="password" value="${password}"></property>
    <!-- 默认初始化的连接个数 -->
    <property name="initialSize" value="1"></property>
    <!-- 最大允许的连接个数 -->
    <property name="maxActive" value="200"></property>
    <!-- 最大的等待人数 -->
    <property name="maxIdle" value="100"></property>
    <!-- 开启sql统计功能 -->
    <property name="filters" value="stat"></property>
   </bean>
   <!-- 集成mybatis -->
   <!-- 配置session工厂 -->
   <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
   		<property name="dataSource" ref="dataSource"></property>
   </bean>
   <bean id="sessionTemplate"  class="org.mybatis.spring.SqlSessionTemplate">
   	 <constructor-arg index="0" ref="sqlSessionFactory"></constructor-arg>
   </bean>
   <!-- 扫描mybatis的接口映射 -->
   <bean id="scannerConfigurer" class="org.mybatis.spring.mapper.MapperScannerConfigurer"> 
   		<property name="basePackage" value="cn.*..*.dao"></property>
   </bean>
   <!-- 事务管理器 -->
   <bean id="tm" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
      <property name="dataSource" ref="dataSource"></property>
   </bean>
   <tx:advice id="txAdvise" transaction-manager="tm">
   	<tx:attributes>
   		<tx:method name="save*" propagation="REQUIRED"/>
   		<tx:method name="update*" propagation="REQUIRED"/>
   		<tx:method name="delete*" propagation="REQUIRED"/>
   		<tx:method name="*" read-only="true"/>
   	</tx:attributes>
   </tx:advice>
   
   <aop:config>
   	<aop:pointcut expression="execution(* cn.*..*.service.*.*(..))" id="myPointCut"/>
   	<!-- 关联切点和事务管理器 -->
   	<aop:advisor advice-ref="txAdvise" pointcut-ref="myPointCut"/>
   </aop:config>
   
</beans>
配置连接数据库的四要素 

url=jdbc:mysql://localhost:3306/food
driverClassName=com.mysql.jdbc.Driver
userName1=root
password=123456
导入EasyUI的库 http://www.jeasyui.net/download/






easyUI快速入门第一讲——走进easyUI的世界
李阿昀的博客
10-29 1596
前言：对于企业级的开发项目，或是网站的后台部分，我们可以使用前端框架来实现，现在目前比较主流的前端框架有easyUI、BUI以及miniUI等。其中easyUI在企业开发中市场份额最大，应用最广泛，使用起来也比较容易上手。在easyUI快速入门这一系列教程中当然就应采用easyUI作为前端框架了。 什么是easyUI？ 百度百科上是这样介绍easyUI的： 简单地说，easyUI就是一种基于...
easyui api 1.5.2 chm离线文档
07-03
easyui api 1.5.2 最新的CHM离线文档
easyUI入门的学习
Luo_da的博客
05-31 3065
easyui是一种基于jQuery的用户界面插件集合。easyui是个完美支持HTML5网页的完整框架。
EasyUI简单实现
huang_yx的博客
03-23 312
一.EasyUI的下载    EasyUI官方下载地址：http://www.jeasyui.com/download/index.php，目前最新版本为：jquery-easyui-1.5.4.2   下载完成之后得到一个 jquery-easyui-1.5.4.2的压缩包，解压后，得到文件里面有如下文件：二.EasyUI入门EasyUI是用范例1.新建一个JavaWeb工程，然后将jquery...
EasyUI的简单了解
赵小叔
08-07 1609
没有完美的功能，只有不断的满足需求，项目的使用、访问的次数、在这样的不选需求下，就要不断提高效率，高手的地位就显示出来了，因此，还是需要自己手写关键JS代码，毕竟效率才是最关键的，不同浏览器的兼容需要不断的测试，此时高手做的就不是直接引用demo了，借鉴一下才是更好的理解。
今天开始学习easyui
ichs的博客
02-13 142
从vfp到C#再到js，学到老做到老吧。
easyui的简单控件使用
一个人的世界
08-08 782
使用前，需要先导入必要的样式库和函数库 一、layout布局的使用 easyui通过加载class的名字来进行样式的修订，layout可以将一个页面布局成五个部分--东南西北中，其中“中部”为必须，其他部分任意。 北部区域 西部区域 中心区域 东部区域 南部区域 二、accordion折叠面板的使用 折叠面板一般放在左侧分割菜单。 <!-- 制作ac
easyui的入门教程
11-22
EasyUI 是一个基于 jQuery 的前端框架，用于快速构建用户界面。它简化了网页开发过程，提供了丰富的组件和统一的API接口，使得开发者可以更专注于业务逻辑而非页面展示的细节。这个"jQuery_EasyUI_v1.3.5.exe"文件很...
EasyUI入门
01-08
文章目录EasyUI入门简单介绍目录说明使用EasyUI导入的包声明组件的两个方法easyui组件的三要素常见异常常用的组件 EasyUI入门 简单介绍 Easyui它就是基于jquery封装的一个前端框架，让我们后端程序员，不需要写复杂...
easyui入门视频
09-05
在“easyui入门视频”中，我们可以期待学习到一系列关于如何使用 EasyUI 开发Web界面的基础知识和技巧。 首先，EasyUI 提供了一系列预先设计的组件，包括但不限于布局（Layout）、表格（Grid）、菜单（Menu）、...
Jquery EasyUI的简单入门
Charge8的博客
10-05 333
  一、EasyUI 简介与下载 easyui是一种基于jQuery的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强...
EasyUi入门
weixin_52639224的博客
09-09 536
一、ui框架 1.easyui=jquery+html4（用来做后台的管理界面） 2.bootstrap=jQuery+html5 3.layui 二、为什么选择使用easyui 从效果来看，easyui比不上bootstrap那样美观 与layui相比，界面效果也更差 在这种情况下，我们为什么要使用相对较差的easyui呢，首先，使用bootstrap要钱，easyui比layui更加稳定，所以使用easyui，如果你有钱，那当我没说 当然最终还是从公司的角度考虑用哪个框架 考虑方面：成
Easyui的一些简单用法
个人技术成长记录
11-03 404
1、根据传来的值设置对应单选框的选中状态              p.find("input[name=type]").each(function(){                            if($(this).val()==aa){                             $(this).attr("checked",true);          
easyui
yongbuyanqiDK
11-27 376
今天学习的是easyui和一个中国人写的框架nutz。具体主要是使用Ajax技术配合框架进行数据查询，返回json格式的数据给easyui界面。真个过程分为以下几步： 1.到easyui官网上下载easyui相关文件。新建动态web工程，把easyui文件中的jquery.easyui.min.js、jquery.js、jquery.min.js、icons、images、themes、lo
J EasyUI 帮助文档
钟爱技术
05-02 398
帮助文档路径：https://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html
DataGrid 的DataSource重新加载数据
weixin_34217773的博客
08-17 510
DataGrid 的DataSource重新加载数据，若直接重新给DataSource赋值是没有效果的，若只是修改原有数据中的单个值，此方法有效，但是针对完全不一样的数据直接重新赋值的方式是无效的，此时需要先删除DataSource原有的数据，再赋给它新的值。 删除方式： 1. DataGridView1.DataSource =null 此方式会将之前自定义现实的列删除（相当于删除结构），...
easyui datagrid 数据源获取与表格渲染 demo1 demo2
编程日常记录与总结 https://franciswmf.iteye.com
08-20 793
[b]demo1:表格和数据同步[/b] [code="java"]$(function() { // queryData('','','','','',1,10); // $('#gcStateId').combobox('setValue', ''); $('#gcTypeId').combobox('setValue',''); // });...
关于EasyUI DataGrid 数据源问题
qq_35509543的博客
04-21 1007
1.数据源格式必须是list包含键值对或JSONArray格式2.list的键必须是“rows”例：{ "total": 2, "rows": [ { "userCode": "kf123456", "userName": "屌丝", "attorney": &quo
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值