1、界面展示
2、JSP页面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP '012_editgrid.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/common.css" />
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.2.6/themes/icon.css" />
<script type="text/javascript" src="js/jquery-easyui-1.2.6/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.2.6/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="js/commons.js"></script>
<script type="text/javascript">
$(function(){
var editing ; //判断用户是否处于编辑状态
var flag ; //判断新增和修改方法
$('#t_user').datagrid({
idField:'id' ,
title:'可编辑的数据表格' ,
fitColumns: true ,
url:'UserServlet?method=getList' ,
striped: true ,
loadMsg: '数据正在加载,请耐心的等待...' ,
rownumbers:true ,
frozenColumns:[[
{field:'ck' , checkbox:true}
]],
columns:[[
{
field:'username' ,
title:'用户名' ,
width:100 ,
align:'center' ,
styler:function(value , record){
if(value == 'admin'){
return 'background:blue;';
}
} ,
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'用户名必填!'
}
}
},
{
field:'password' ,
title:'密码' ,
width:100 ,
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'密码必填!'
}
}
},{
field:'age' ,
title:'年龄' ,
width:100 ,
sortable : true ,
editor:{
type:'numberbox' ,
options:{
required:true ,
missingMessage:'年龄必填!' ,
min:0 ,
max:150 ,
precision:0
}
}
},{
field:'sex' ,
title:'性别' ,
width:50 ,
formatter:function(value , record , index){
if(value == 1){
return '<span style=color:red; >男</span>' ;
} else if( value == 2){
return '<span style=color:green; >女</span>' ;
}
} ,
editor:{
type:'combobox' ,
options:{
data:[{id:1 , val:'男'},{id:2 , val:'女'}] ,
valueField:'id' ,
textField:'val' ,
required:true ,
missingMessage:'性别必填!'
}
}
},{
field:'birthday' ,
title:'生日' ,
width:100 ,
sortable : true ,
editor:{
type:'datebox' ,
options:{
required:true ,
missingMessage:'生日必填!' ,
editable:false
}
}
},{
field:'startTime' ,
title:'开始时间' ,
width:150 ,
editor:{
type:'datetimebox' ,
option:{
required:true ,
missingMessage:'时间必填!' ,
editable:false
}
}
},{
field:'endTime' ,
title:'结束时间' ,
width:150 ,
editor:{
type:'datetimebox' ,
option:{
required:true ,
missingMessage:'时间必填!' ,
editable:false
}
}
},{
field:'city' ,
title:'所属城市' ,
width:100 ,
formatter:function(value , record , index){
if(value==1){
return '北京';
} else if(value == 2){
return '上海';
} else if(value == 3){
return '深圳';
} else if(value == 4){
return '长春';
}
},
editor:{
type:'combobox' ,
options:{
url:'UserServlet?method=getCity',
valueField:'id' ,
textField:'name' ,
required:true ,
missingMessage:'城市必填!'
}
}
},{
field:'salary' ,
title:'薪水' ,
width:100 ,
editor:{
type:'numberbox' ,
options:{
required:true ,
missingMessage:'薪水必填!' ,
min:1000 ,
max:20000 ,
precision:2
}
}
},{
field:'description' ,
title:'个人描述' ,
width:150 ,
formatter:function(value , record , index){
return '<span title='+value+'>'+value+'</span>';
} ,
editor:{
type:'validatebox' ,
options:{
required:true ,
missingMessage:'描述必填!'
}
}
}
]] ,
pagination: true ,
pageSize: 10 ,
pageList:[5,10,15,20,50] ,
toolbar:[
{
text:'新增用户',
iconCls:'icon-add' ,
handler:function(){
if(editing == undefined){
flag = 'add';
//1 先取消所有的选中状态
$('#t_user').datagrid('unselectAll');
//2追加一行
$('#t_user').datagrid('appendRow',{description:''});
//3获取当前页的行号
editing = $('#t_user').datagrid('getRows').length -1;
//4开启编辑状态
$('#t_user').datagrid('beginEdit', editing);
}
}
},{
text:'修改用户',
iconCls:'icon-edit' ,
handler:function(){
var arr = $('#t_user').datagrid('getSelections');
if(arr.length != 1){
$.messager.show({
title:'提示信息',
msg:'只能选择一条记录进行修改!'
});
} else {
if(editing == undefined){
flag = 'edit';
//根据行记录对象获取该行的索引位置
editing = $('#t_user').datagrid('getRowIndex' , arr[0]);
//开启编辑状态
$('#t_user').datagrid('beginEdit',editing);
}
}
}
},{
text:'保存用户',
iconCls:'icon-save' ,
handler:function(){
//保存之前进行数据的校验 , 然后结束编辑并师傅编辑状态字段
if($('#t_user').datagrid('validateRow',editing)){
$('#t_user').datagrid('endEdit', editing);
editing = undefined;
}
}
},{
text:'删除用户',
iconCls:'icon-remove' ,
handler:function(){
var arr = $('#t_user').datagrid('getSelections');
if(arr.length <= 0 ){
$.messager.show({
title:'提示信息',
msg:'请选择进行删除操作!'
});
} else {
$.messager.confirm('提示信息' , '确认删除?' , function(r){
if(r){
var ids = '';
for(var i = 0 ; i < arr.length ; i++){
ids += arr[i].id + ',';
}
ids = ids.substring(0,ids.length-1);
$.post('UserServlet?method=delete' , {ids:ids},function(result){
$('#t_user').datagrid('reload');
$.messager.show({
title:'提示信息',
msg:'操作成功!'
});
});
} else {
return ;
}
});
}
}
},{
text:'取消操作',
iconCls:'icon-cancel' ,
handler:function(){
//回滚数据
$('#t_user').datagrid('rejectChanges');
editing = undefined;
}
}
] ,
onAfterEdit:function(index , record){
$.post(flag=='add'?'UserServlet?method=save':'UserServlet?method=update' , record , function(result){
$.messager.show({
title:'提示信息',
msg:'操作成功!'
});
});
}
});
});
</script>
</head>
<body>
<table id="t_user"></table>
</body>
</html>
相关推荐
标题 "EasyUI可扩展Editable DataGrid（可编辑数据表格）" 涉及的是一个流行的JavaScript框架——EasyUI中的一个特性。EasyUI是基于jQuery的一个轻量级且易于使用的前端框架，它提供了一系列预定义的CSS样式和...
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
在MATLAB开发中，TLAB库提供了一种高级的数据可视化工具——可编辑表格。这种功能使得用户能够在图形界面中直接操作数据，进行编辑、查看和分析，极大地提升了交互性和效率。下面将详细介绍这个功能及其应用。 一、...
基于antdv封装的特殊复杂表格，带通行描述信息 主要功能： 可展示通行的单元格信息 可跨页选择数据功能 ...表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】
Bootstrap可编辑表格是一种基于Bootstrap框架实现的交互式表格，它允许用户在表格内直接编辑数据，无需跳转页面或打开新窗口。这种功能对于数据管理、CRUD操作（创建、读取、更新、删除）非常实用，尤其适用于后台...
layui表格动态添加|layui表格可编辑动态添加
本教程将聚焦于“JQuery实战——可编辑的表格”，旨在帮助初学者掌握如何利用jQuery创建交互性强、功能丰富的表格。 首先，我们需要了解表格的基本HTML结构。一个简单的表格由`<table>`标签开启，`</table>`标签...
在本文中，我们将详细解析如何使用Vue.js框架封装一个可编辑的表格插件。该插件允许用户在表格中进行单元格编辑，并能对表头进行任意合并，从而提供了强大的表格数据处理功能。 首先，我们需要了解该插件的基本结构...
- 文件提取：只需解压ZIP文件，即可访问其中的“非学位用表格-论文.doc”文档，查看或编辑内容。 - 密码保护：为了保护内容，压缩包可以设置密码，确保只有授权人员才能访问。 5. 在论文写作中的协同工作： - ...
表格数据导出是日常工作中不可或缺的一部分，了解不同格式的特点和导出技巧能帮助我们更有效地管理和分享数据。无论是JSON的网络数据交互，CSV的简单数据交换，还是Excel的复杂数据分析，每种格式都有其独特的应用...
在可编辑表格中，开发者可能使用DOM操作来获取和设置用户编辑的表格数据。 4. **JSON（JavaScript Object Notation）**：JSON是一种轻量级的数据交换格式，常用于前后端的数据传输。服务器返回或接收的数据很可能以...
在网页开发中，表格是一种常见的数据展示方式，用于排列和组织结构化信息。"纯js和html可编辑的table（表格）"这个项目提供了一种方法，...通过不断优化和扩展，这样的表格组件可以应用于各种需要在线编辑数据的场景。
在JavaScript的世界里，实现一个可编辑的表格是一个常见的需求，特别是在构建交互性强的Web应用时。这个任务可以通过多种方式来完成，例如使用原生的HTML `<table>` 元素配合DOM操作，或者利用现有的库如jQuery，...
在Vue项目中，当面临需要实现可编辑表格的需求时，开发者通常会遇到性能问题，特别是在数据量较大的情况下。本文将详细介绍如何使用`vxe-table`库来创建一个高效的可编辑表格，以解决类似的问题。 首先，`vxe-table...
- 可编辑表格 - 行内编辑 - 单元格编辑 - 可搜索表格 - 表格导出数据 - 导出为Csv文件 - 导出为Xls文件 - 表格转图片 - 错误页面 - 403页面 - 404页面 - 500页面 - 高级路由 - 动态路由 - 带参页面 - ...
在本篇博客“jQuery学习记录----可编辑的表格（六）”中，作者分享了如何使用jQuery实现一个可编辑的表格功能。这个功能在Web应用中非常常见，特别是在数据管理和展示场景下。jQuery是一个强大的JavaScript库，它...
"可编辑的表格"是一个重要的前端开发工具，尤其在数据管理、信息输入和展示方面有着广泛的应用。这个标题暗示我们有一个前端页面模板，其中包含了一个可以实时编辑的表格组件，这样的组件对于数据录入、查看和更新...
"可编辑表格js代码" 提供了一种高效且灵活的解决方案，允许用户直接在网页上对表格数据进行编辑，极大地提升了交互性和用户体验。下面我们将深入探讨这个主题，包括相关的核心概念、技术以及其实现方法。 首先，...
XML文件数据表格编辑器是一种专为处理XML文件设计的软件工具，它提供了类似电子表格的界面，使得用户能够更直观、便捷地编辑XML文件。这种编辑器尤其适用于那些需要处理具有二级数据表结构的XML文档的场景。XML...
在IT领域，"可编辑表格"是一个非常实用的功能，它广泛应用于数据管理、数据分析和信息组织。无论是电子表格软件如Microsoft Excel，还是在线协作工具如Google Sheets，这种功能都为用户提供了极大的便利。下面我们将...