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>
相关推荐
layui表格动态添加|layui表格可编辑动态添加
NULL 博文链接：https://focus-sunbo.iteye.com/blog/2198721
- 可编辑表格 - 行内编辑 - 单元格编辑 - 可搜索表格 - 表格导出数据 - 导出为Csv文件 - 导出为Xls文件 - 表格转图片 - 错误页面 - 403页面 - 404页面 - 500页面 - 高级路由 - 动态路由 - 带参页面 - ...
vue 中使用 vxe-table 制作可编辑表格的使用过程 项目上有一个表格需要实现在线编辑，开始用了 element 的el-table 实现，单元格内基础情况就是监听了单击单元格切换一个span标签与input标签，复杂点的单元格使用...
可编辑数据表格 - Editable DataGrid 带右键菜单的数据表格 - DataGrid ContextMenu 数据表格行样式 - DataGrid Custom Row Style 数据表格页脚行 - DataGridFooter Row 树形数据表格 - TreeGrid 数据表格...
Android 表格控件-动态实现表格效果（内容、样式可扩展），参考博客：http://blog.csdn.net/daijin888888/article/details/50159579
基本功能都已实现，本人能力有限，比不上layui数据表格样式的完善，所以我其实有点遗憾，如果有哪位大神，能让table的表头固定在最上面一行，并且能让 删除功能的 td一直停靠在table的最右边 说白了就是类似 layui...
实现IviewUI表格动态编辑数据功能，便于表格数据的直接编辑和提交,内含Json数据， 下载后可部署IIS测试。
本表格是我用javascript编写，html格式，可直接用IE打开，可直接用记事本编辑脚本，无需搭配其他任何环境。可以进一步完善，比如保存表格数据进入数据库，加选择框从数据库提取数据等。
可以对表格进行建立、数据输入、数据编辑、统计、计算及其他一些表格操作。 实现功能： 1.按表格形式显示表格,并支持用户使用简单的功能键 2.建立空白表格,同时在屏幕上显示,使其处于可输入数据状态 3.通过...
JQuery实现的简单可编辑表格，其中的数据可以根据需要从数据里读取，这里暂时写成静态的，只是为了演示一下JQuery的方便之处。
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
一个表格编辑器，可上移下移，还可对单元格数据进行编辑
boostrap-table行内编辑功能，可以进行新行的添加-保存-删除-取消功能，也可对数据行进行修改-删除和取消编辑的功能。本资源为示例代码，依据boostrap-table的官方API进行操作
实现类似于表格编辑器的程序，编辑xml文件，目前支持到2级，运行需.net3.0运行环境
基于antdv封装的特殊复杂表格，带通行描述信息 主要功能： 可展示通行的单元格信息 可跨页选择数据功能 ...表格组件暴漏出的方法：查询、获取选中数据、接口返回数据、当前表格数据【设置可编辑单元格时获取数据】
使用jQuery实现动态可编辑表格，代码更少，兼容性更好
React可编辑的员工表（数据表） 这个项目是使用任何外部模块（例如react-data-grid，react-datasheet等）从头开始创建的。特征在一张桌子中查看所有员工编辑所需的单元格（内联编辑） 将任何行标记为已删除撤消删除...
功能描述：可编辑表格，可新增行，可删除行，可触发表单校验，可设置下拉框树形选择器多选文本框等格式，可编辑表格可设置编辑和只读两种状态 适用人群：具备一定编程基础，工作1-3年的前端研发人员 适用场景：...
将AutoCAD数据按表格格式输出为文本文件，也可将Word文件，文本文件读入AutoCAD，并制成表格 3.对Excel表格进行灵活排版，表格过长自动分片，设置表头，提供9种对齐方式，并能设置单元格高度及宽度， 表格行数...