EasyUI 表格制作

jquery EasyUI

●easyui是一种基于jQuery的用户界面插件集合。
●easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能
●使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。
● easyui是个完美支持HTML5网页的完整框架。
● easyui节省您网页开发的时间和规模。
●easyui很简单但功能强大的。

jquery EasyUI 中文网：http://www.jeasyui.net/
图标下载：http://easyicon.net （不用登陆，下载支持 ICO ，ico是图标最小的格式）
阿里巴巴矢量图标库：http://www.iconfont.cn/

到中文网下载：（官方下载）

下载完成，里面有我们需要的文件，我们只用把自己需要的文件拷到项目里面就行了。
包，依赖

<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>1.5.10.RELEASE</version>
</parent><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-solr</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><dependency><groupId>nekohtml</groupId><artifactId>nekohtml</artifactId><version>1.9.6.2</version></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.14</version></dependency><!-- 开发者工具集(自动重启). --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency><!-- 小辣椒 --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.16.2</version><scope>provided</scope></dependency>
</dependencies>

package com.entity;import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;import lombok.Data;@Data
@Entity  //表示绑定的数据库.
public class Staff {@Id  //表示主键.@GeneratedValue(strategy = GenerationType.AUTO)private String id;@Columnprivate String name;@Columnprivate String deptno;@Columnprivate String job;@Columnprivate String sal;@Columnprivate String phone;
}

application.properties

#缓存设置为false,这样修改之后马上生效,便于调试.
spring.thymeleaf.cache=falsespring.thymeleaf.prefix=classpath:/static/
#端口
server.port=5050spring.thymeleaf.mode=LEGACYHTML5spring.data.solr.host:http://192.168.126.132:8983/solrspring.datasource.driver=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost/unit02
spring.datasource.username=root
spring.datasource.password=ps123456

dao层

public interface StaffDao extends CrudRepository<Staff, String>{}

控制层：

@RestController
public class StaffController {@Autowiredprivate StaffDao empdao;@GetMapping("/query")public Iterable<Staff> query(){Iterable<Staff> all = empdao.findAll();return all;}}

easy.html

● align:‘center’ //居中.
● align:‘right’ //靠右.
● 默认表格居左，一般表格都是居左的。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><link rel="stylesheet" type="text/css" href="./resource/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="./resource/themes/icon.css"><script type="text/javascript" src="./resource/jquery.min.js"></script><script type="text/javascript" src="./resource/jquery.easyui.min.js"></script>
</head>
<body><table class="easyui-datagrid" title="员工表" style="width:'95%';height:250px"data-options="singleSelect:true,collapsible:true,url:'query',method:'get',align:'center'"><thead><tr><th data-options="field:'id',width:'17%',align:'center'">员工编号</th><th data-options="field:'name',width:'17%',align:'center'">员工名称</th><th data-options="field:'deptno',width:'17%',align:'center'">员工部门编号</th><th data-options="field:'job',width:'17%',align:'center'">员工职位</th><th data-options="field:'sal',width:'17%',align:'center'">员工薪资</th><th data-options="field:'phone',width:'16%',align:'center'">员工电话</th></tr></thead></table>
</body>
</html>

用 js 写的 easy.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title><link rel="stylesheet" type="text/css" href="./resource/themes/default/easyui.css"><!-- easyui.css 文件里面是用来修改字体的. --><link rel="stylesheet" type="text/css" href="./resource/themes/icon.css"><link rel="stylesheet" type="text/css" href="./resource/demo.css"><!-- 用来改变字体 --><script type="text/javascript" src="./resource/jquery.min.js"></script><script type="text/javascript" src="./resource/jquery.easyui.min.js"></script><!-- 代码是从上往上运行的,但是加上$(function(){}) 就不一样了. --><script>$(function(){$('#mytable').datagrid({    url:'query',method:'get',title:'员工信息',columns:[[    {field:'id',width:'17%',title:"员工编号"},    {field:'name',width:'17%',title:"员工姓名"},    {field:'deptno',width:'17%',title:"员工部门编号"},{field:'job',width:'17%',title:"员工职位"},{field:'sal',width:'17%',title:"员工薪资"},{field:'phone',width:'17%',title:"员工电话"}]]    });})</script></head>
<body><table id="mytable"></table>
</body>
</html>

分页：
可查看：
dao：

public interface StaffDao extends CrudRepository<Staff, String>{Page<Staff> findByNameLike(String name,Pageable page);
}

控制层：

@RestController
public class StaffController {@Autowiredprivate StaffDao empdao;@GetMapping("/query")public Result<Staff> query(String name, Integer page, Integer rows){if(name == null) {name = "";}PageRequest pr = new PageRequest(page-1, rows);//page是从1开始的.jpa是从零开始的,所以要减一.Page<Staff> all = empdao.findByNameLike("%"+name+"%", pr);Result<Staff> result = new Result<Staff>();result.setTotal((int)all.getTotalElements());result.setRows(all.getContent());return result;}
}

JS html：

$(function(){pagination:true,/* 分页. */var y = $('#mytable').datagrid('getPager');$(y).pagination({pageSize:10,pageList:[5,10,15],beforePageText:'第',afterPageText:'页   共{pages} 页',displayMag:'当前显示{grom}-{/to} 条记录 共{tltal} 条记录'});
})

@Data
public class Result<T> {/*** 查询总行数*/private int total;/*** 查询的数据*/private List<T> rows;
}

属性：

pagination:true,/* 分页. */
singleSelect:true,/* 为true，只允许选择一行 */
rownumbers:true, /* 为true，显示一个行号列. */ 列属性：
checkbox:true /* 如果为true，显示复选框。该复选框列固定宽度 . */

EasyUI 表格制作相关推荐

echart图和easyui图表制作模版制作
1.引入echarts 2.html(上图下表) <div id="dgBox"><div class="chartBox"><d ...
wps表格粗线和细线区别_学术论文表格制作方法解读
一.表格的精选我记得我以前写论文的时候错误认为导师会青睐那种一篇文章中表格越多越好的文章,其实不然.如果用一两句话即可说明的内容就不必列表格:如果采用多组数据表说明同一现象,造成了表格本身的重复,应 ...
excel制作录入和查询系统_excel表格制作成绩查询系统攻略:让学生隐私更安全!
对于班主任来说,无论是收集学生信息,还是发布考试成绩,用得最多的就是excel表格了!很多老师在发布成绩的时候,多半会把统计好的表格直接发到群里让学生自行查询,这样一来虽然省事,但却极易招到投诉!下面 ...
androidstudio表格中填充宽跟长一样_Excel表格的基本操作教程，覆盖表格制作的10大知识！...
Excel表格制作包含的知识比较多,通常制作一张表格需要这10大知识:新建表格.调整行高列宽.插入行列和单元格.删除行列和单元格.移动行列和单元格.表格文字编辑.单元格格式设置.表格边框与单元格边框设 ...
计算机教师招聘板书设计,教师编制考试：信息技术丨《WORD表格制作》教案设计...
教师编制考试:信息技术丨<WORD表格制作>教案设计一.教学目标 (一)知识与技能 1.掌握在word中创建表格的方法. 2.了解表格中的合并单元格.拆分单元格.行高.列宽这些基本概念. ...
html表格制作应该注意什么软件,html表格制作
一.简单表格制作举个例子来说,如果今天我们要做一个3栏2列的表格,在WORD中,只要设定表格为3栏.2列就完成了,不过,在网页中做一个3栏2列的表格,可是要分成好几个步骤的: 第一个步骤,利用标签 ...
使用matlab建立个人简历,HTML 使用表格制作简单的个人简历
复习一下HTML,用表格做一个简单的个人简历 .btbg{ text-align:center; } 个人简历姓名性别出生日期照片民族政治面貌婚姻状况现所在地籍贯学历毕业学校专 ...
计算机表格公开课,Word表格制作教案公开课
<Word表格制作教案公开课>由会员分享,可在线阅读,更多相关<Word表格制作教案公开课(4页珍藏版)>请在人人文库网上搜索. 1.2012年乐至县教研课教案科目:计算机应 ...
计算机做word的表格,word表格制作,详细教您word如何制作表格
word在日常办公室必不可少的软件,大家在excel里制作表格非常容易.在word软件里制作表格就蒙圈了,这不,最近有朋友问小编怎么在word中制作表格呢?下面,小编就来跟大家讲解word制作表格的操 ...

EasyUI 表格制作

jquery EasyUI

EasyUI 表格制作相关推荐

最新文章

热门文章