SSH combinado con EasyUI para implementar la visualización de paginación de DataGrid

Recientemente aprendí Easyi y descubrí que es muy útil y la interfaz es hermosa. Escriba su experiencia de aprendizaje aquí. Este blog escribe SSH y Easyi para implementar la pantalla de paginación de DataGrid. Otras funciones, como agregar, modificar, eliminar, eliminar por lotes, etc., se escribirán una por una más tarde.

Primero, echemos un vistazo al efecto para lograr: cuando se muestran 5 líneas de datos por página:

Cuando se muestran 10 líneas de datos por página, el efecto es el siguiente:

Pasos específicos:

1. Descargue Easyi y construya un entorno.

2. Construya un proyecto SSH, y la estructura del directorio de todo el proyecto se muestra en la figura:

3. Cree el estudiante de tabla en la base de datos Oracle. E ingrese las siguientes 6 filas de datos. Dado que la operación de adición aún no se ha implementado, agregue los datos a la tabla de la base de datos primero. El valor predeterminado es de 5 datos por línea, así que ingrese al menos 6 líneas de datos para facilitar las pruebas de paginación.

4. Configuración web.xml

 <? xml versión = "1.0" encoding = "utf-8"?> <web-app versión = "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"> <!-sttus2 filtro-> <filter> <filter-name> struts2 </filtro-name> <Stry-Class> org.apache.struts2.dispatcher.ng.filter.strutsprepareAnDexCuteFilter </filter-class> </filtre> <filter-mapping> <filter-name> struts2 </filtre-name> <url-pattern>/*</url-pattern> </filter-mapping> <!-oyente-> <searcher> <Oyerer-class> org.springframework.web.context.contextloaderListener </oyer-class> </oyeyer> <!-posicionando la ubicación física de ApplicationContext.xml-> <text-param> <amamname> contextconfiglocation </param-name> <amam-value> classpath: applicationcontext.xml </paramname> </context-param> </beb-app>

5. Configuración de ApplicationContext.xml

 <? xml versión = "1.0" encoding = "utf-8"?> <beans xmlns = "http://www.springframework.org/schema/beans" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" "" "" xmlns: context = "http://www.springframework.org/schema/context" xmlns: aop = "http://www.springframework.org/schema/aop" xmlns: tx = "http://wwww.springframework.org/sChMing" " xsi: schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://www.springframework.org/schema/contextExt http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.5.xsd"> estadounidense Resource = "ApplicationContext_Bean.xml"/> <importar resource = "ApplicationContext_DB.XML"/> </ Beans>

6. Cree la clase Model Student.java en com.model

 paquete com.model; public class Student {String studentId; // Nombre de cadena de clave primaria; // nombre String Gender; // género String Age; // Age public String getStudentId () {return StudentId; } public void setStudentId (string studentId) {this.studentId = studentId; } public String getName () {nombre de retorno; } public void setName (nombre de cadena) {this.name = name; } public String getGender () {return gender; } public void setGender (String Gender) {this.gender = gender; } public String getAge () {return Age; } public void setAge (String Age) {this.age = Age; }}

7. Genere el archivo de asignación correspondiente estudiante.hbm.xml según Student.java

 <? Xml versión = "1.0"?> < -> <hibernate-mapping> <class name = "com.model.student" table = "student"> <id name = "studentId" type = "java.lang.string"> <columna name = "studentID" /> <generador /> < /id> <propiedad name = "name" type = "java.lang.string"> <nombre de columna = "name" /<propiedad> <propiedad> <propiedad> <seper "type =" gender = "gender type = "java.lang.string"> <column name = "género"/> </propiedad> <propiedad name = "edad" type = "java.lang.string"> <column name = "edad"/> </prown> </class> </hibernate-mapping>

8. Escribir interfaz de estudiantes service.java

 paquete com.service; import java.util.list; Public Interface Studentservice {Lista pública getStudentList (página de cadena, filas de cadena) arroja excepción; // obtiene datos de acuerdo con la página y obtiene datos de cada página int getStudentTotal () lanza excepción; // estadísticas cuántos datos hay en total}

9. Escriba la clase de implementación de interfaz StudentserviceImpl.java

 paquete com.serviceImpl; import java.util.list; import org.hibernate.sessionFactory; import com.service.studentservice; public class StudentserviceImpl implementa el servicio de estudiantes {sessionfactory privado sessionFactory; // Obtener datos de acuerdo con la página, y obtener datos para varias filas por página Lista pública getStudentList (página de cadena, filas de cadena) {// Asignar valor cuando es el valor predeterminado int curtentPage = Integer.ParseInt ((page == null || page == "0")? "1": página); // cuán muchos páginas int pageSize = integer.parseInt (((ROWS ROWS == "0")? lista de devolución; } // Estadísticas cuántos datos hay en total public int getStudentTotal () lanza la excepción {return this.sessionFactory.getCurrentSession (). Find ("del estudiante"). Size (); } public sessionFactory getSessionFactory () {return sessionFactory; } public void setSessionFactory (sessionFactory sessionFactory) {this.sessionFactory = sessionFactory; }}

10. Configure el archivo de configuración para conectarse a la base de datos ApplicationContext_DB.XML

 <? xml versión = "1.0" encoding = "utf-8"?> <beans xmlns = "http://www.springframework.org/schema/beans" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" "" "" xmlns: context = "http://www.springframework.org/schema/context" xmlns: aop = "http://www.springframework.org/schema/aop" xmlns: tx = "http://wwww.springframework.org/sChMing" " xsi: schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://www.springframework.org/schema/contextExt http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/tx http://www.springfrfrework.org/schema/tx/spring-tx-2.5.xssd " Bean-> <Bean id = "DataSource" Destroy-Method = "Close"> <!-Definición del controlador de la base de datos-> <Property Name = "DriverClass"> <alon> oracle.jdbc.driver.oracledriver </value> </sperties> <!-Definición de la URL dataBase-> <nombre de propiedad = "jdbcurl">>>>> <value> jdbc: oracle: delgado: @localhost: 1521: orcl </value> </property> <!-Defina el nombre de usuario de la base de datos-> <name de propiedad = "usuarios"> <valor> lhq </value> </sperties> <!-Definir la contraseña de la base de datos-> <Nombre de la propiedad = "Contraseña"> <valor> LHQ </value> </Propiedad> name = "MinpoolSize"> <value> 1 </value> </property> <Property name = "maxpoolSize"> <alue> 40 </value> </propiedad> <propiedad name = "maxidletime"> <valor> 1800 </value> </spersper> <Property name = "adquirircrement"> <valor> 2 </value> </propiedad> <properse name = "maxstatements" </property> <property name="initialPoolSize"> <value>2</value> </property> <property name="idleConnectionTestPeriod"> <value>1800</value> </property> <property name="acquireRetryAttempts"> <value>30</value> </property> <property name="breakAfterAcquireFailure"> <value>true</value> </property> <property name = "testConnectionOnCheckout"> <value> false </value> </property> </le bean> <!-Define Hibernate SessionFactory-> <Bean id = "SessionFactory"> <!-Define SessionFactory debe inyectarse en DataSource-> <Property Name = "DataSource"> <Refh Bean = "DataSource"/> </Property> <!-Define HibercaTer name = "HibernateProperties"> <props> <prop key = "hibernate.dialect"> org.hibernate.dialect.oracle10gdialect </prop> </props> </property> <!-Define el archivo de asignación para el pojo-> <nombre de propiedad = "mappingresources"> <List> <value> com/model/student.hbm.hbmlmlmlmll </list> </property> </bean> <!-Conformure Transaction Interceptor-> <bean id = "transaccionManager"> <Property name = "sessionFactory" ref = "sessionFactory"/> </ bean> <tx: adsorial iD = "txadvice" transaction-ganager = "transactyManger"> <Tx: atributes> <tx: método name = "save*" propagation "/"/"/"/"Métode <! with save, delete, and update can be performed--> <tx:method name="delete*" propagation="REQUIRED" /> <tx:method name="update*" propagation="REQUIRED" /> <tx:method name="*" propagation="SUPPORTS" read-only="true" /><!-- Other methods are read-only methods--> </tx:attributes> </tx:advice> <aop:config> <AOP: PointCut ID = "InterceptorPointCuts" Expression = "Execution (*com.serviceImpl ..*.*(..))" /> <!-La ubicación del paquete que implementa la interfaz de clase-> <aop: asesor-ref = "txadvice" pointcut-ref = "InterceptorOppointcuts" /> </aop> < /beapeS>

11. Escriba StudentAction.java Tipo en la capa de control

 paquete com.action; import java.util.list; import javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; import net.sf.json.jsonObject; importar org.apache.log4j.logger; import com.service.studentService; public class StudentAction {static logger log = logger.getlogger (studentAction.class); Jsonobject privado JSONOBJ; Ranes de cadena privada; // Número de registros que se muestran en cada página Página de cadena privada; // ¿Qué página es el servicio de estudiantes privado actual Student_Services; // String Dependency Inyection // consulta toda la información del estudiante Public String getAllStudent () lanza excepción {log.info ("consulta toda la información del estudiante"); Lista list = student_services.getstudentList (página, filas); this.tobejson (list, student_services.getstudentTotal ()); regresar nulo; } // Convertir al formato JSON public void Tobejson (List List, int Total) lanza la excepción {httpservletResponse respuesta = servletactionContext.getResponse (); HttpservletRequest request = servletactionContext.getRequest (); JsonObject Jobj = new JsonObject (); // nuevo JSON JOBJ.ACCUMULE ("Total", Total); // El total representa cuántos datos hay en Total JobJ.Accumulate ("Rows", List) ;// fila es los datos que representan la respuesta de la página mostrada. Response.getWriter (). Write (JobJ.ToString ()); // Convertir a JSON Format Log.info (JobJ.ToString ()); } Public Studentservice getStudent_Services () {return student_services; } public void setstudent_services (Studentservice student_services) {this.student_services = student_services; } public void setjsonObj (jsonObject jsonobj) {this.jsonObj = jsonObj; } public void setrows (string filas) {this.rows = shows; } public void setPage (página de cadena) {this.page = página; }}

12. Escriba la aplicación de inyección de dependencia de SpringContext_Bean.xml Archivo de configuración

 <? xml versión = "1.0" encoding = "utf-8"?> <beans xmlns = "http://www.springframework.org/schema/beans" xmlns: xsi = "http://www.w3.org/2001/xmlschema-instance" "" "" xmlns: context = "http://www.springframework.org/schema/context" xmlns: aop = "http://www.springframework.org/schema/aop" xmlns: tx = "http://wwww.springframework.org/sChMing" " xsi: schemalocation = "http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.5.xsd http://www.springframework.org/schema/contextExt http://www.springframework.org/schema/context/spring-context-2.5.xsd http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/aop/spring-aop-2.5.xsd http://www.springframework.org/schema/tx http://www.springfframework.org/schema/tx/spring-tx-2.5.xsd "<! <bean id = "student_service"> <Property name = "sessionFactory"> <ref bean = "sessionFactory"> </ref> </property> </bean> <!-Acción de capa de control-> <bean id = "student_action"> <Property name = "student_service"> <ref bean = "student_service"/> </prown> </bean> </beans>

13. Escribir el archivo de configuración de Struts.xml

 <? xml versión = "1.0" encoding = "utf-8"?> <! DocType Struts public "-// Apache Software Foundation // Dtd Struts Configuration 2.0 // en" "http://struts.apache.org/dtds/struts-2.0.dtd" <truts> <pack name = "easyui" extends "extends" extends " Información del estudiante-> <Action name = "getAllStudentAction" Method = "GetAllStudent"> <Result type = "json"> </resultado> </action> </paquete> </truts>

14. Escribir JSP ---- index.jsp

 <%@ page lenguaje = "java" pageEncoding = "utf-8" isElignored = "false"%> <%string path = request.getContextPath ();%> <%@ taglib prefix = "s" uri = "/struts-tags"%> <DocType html público "-// w3c // dtd html 4.01 transmor "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv =" content-type "content =" text/html; charset = utf-8 "> <title> cuadro numérico </title> < src = "<%= ruta%>/js/easyui/jQuery-1.8.0.min.js" charset = "utf-8"> </script> <!-Introducción jQuery_easyui-> <script type = "text/javaScript" src = "<%= path%>/js/easyui/jQuery.easyui.min.js" Charset = "UTF-8"> </script> <!-Introducción jQuery_easyui-> <script type = "text/javascript" src = "<%= path%>/js/easyui/jquery.easyui.min.js" charset = "utf-8"> </script> <! src = "<%= ruta%>/js/easyui/locale/easyui-lang-zh_cn.js" charset = "utf-8"> </script> <!-Introducir el formato CSS predeterminado de Easyui-Blue-> <Link Rel = "Stylesheet" tipo = "Texto/CSS" href = "<%= path%>/js/easyui/themes/default/easyui.css"/> <!-introducir easyui pequeño icono-> <link rel = "stylesheet" type = "text/css" href = "<%= path%>/js/easyUi/themes/icon.css"/> <script type = "text/javscript" $ ('#myDataGrid'). DataGrid ({Title: 'DataGrid Instance', IconCls: 'Icon-Ok', Width: 600, PageSize: 5, // La página seleccionada predeterminada es 5 filas de datos por página pageList: [5, 10, 15, 20], // El conjunto de pagos que se puede seleccionar ahora: verdadero // set a verdadero, verdadero: verdadero, verdadero, n. fondo. Plegable: verdadero, // Mostrar barra de herramientas de botón plegable: "#tb", // Esto debe usarse al agregar, eliminar y modificar los botones URL: 'getAllStudentAction.action', // Url llama método de acción de acción cargMsg: 'Carga de datos ...', SingleSelect: verdadero, // cuando es verdadero, solo puede seleccionar un solo ajuste de coincidero: verdadero, verdadero, permitiendo la mesa a la mesa a la mesa de automáticamente a // sortname: 'xh', // qué columna se usa para ordenar cuando la tabla de datos se inicializa // sortOrder: 'descr', // Define el orden de clasificación, que puede ser 'ASC' o 'DESC' (orden positivo o inverso). RemoteSort: False, Frozencolumns: [[{Field: 'Ck', CheckBox: True}]], Pagination: True, // Pagination Rownumbers: True // Line Number}); }); </script> </head> <body> <h2> <b> instancia datagrid de easyi </b> </h2> <table id = "myDataGrid"> <thead> <tr> <th data-options = "campo: 'stentend', width: 100, align: 'center'"> número de estudiante </th> <th th data-options = "campo: 'nombre', ancho: 100, alinearse: 'Center'"> name </th> <th data-options = "campo: 'género', ancho: 100, alinearse: 'centro'"> género </th> <th data-options = "campo: 'edad', ancho: 100, alinearse: 'centro'"> edad </th> </tr> </tead> </tabil </body> </html>

15. Inicie el programa e ingrese http: // localhost: 8080/easyui/index.jsp para pruebas.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.