11-EasyUI尚硅谷-editgrid（可编辑表格）
和datagrid的实现差不多
效果：
增：
删：
改：
------------------------------------------------------------------------------------------------------
后台代码和datagrid一样
前台代码：011_editgrid.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>Datagrid</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="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-1.7.2.min.js"></script>
<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">
$(function() {
var rowIndex; // undefined，限制不能添加多行标识 这两个变量在crud中逻辑比较复杂，在实际开发中要有耐心的测试改正
var flag; // undefined，新增或者修改
// 2.使用datagrid(), 发起请求并展示列表
$("#userList").datagrid({
idField: "id", // 标识字段，只要创建数据表格，就要配置这一项
title: "可编辑的数据表格",
//width: 1000,
height: "auto",
url: "UserServlet?method=findUserList", // 异步请求的地址
striped: true, // 隔行变色
nowrap: true, // 默认情况下，当数据在同一行放不下，会折行放很多行显示，设置为true，不管多长的数据都显示在一行
loadMsg: "正在加载，请稍等...",
rownumbers: true, // 行号
//singleSelect: true,
// 字段排序
remoteSort: false, // 1.取消本地排序，本地排序，即后台json数据是什么顺序，将来在页面就按什么顺序展示
sortName: "salary", // 2.指定排序的列字段名称
sortOrder: "asc", // 3.指定是按升序还是降序排序，默认是asc，即升序
// 分页
pagination: true, // 表示打开分页特性
pageList: [5,10,15,20,30,50], // 每页显示多少条记录，自定义
pageSize: 10, // 设置初始化一页显示的记录数
// 冻结列
frozenColumns: [[
{ // 复选框，这个特性不要和singleSelect特性一起使用，否则只能选择一条记录
field: "ck",
width: 50,
checkbox: true
}
]],
fitColumns: true, // 自适应列宽
// 表格的列，是个二维数组，数组中是一个个对象，field的value值要和POJO中的属性值一致
columns: [[
{
field: "username",
title: "用户名",
width: 100,
styler: function(value, recode) {
if ("admin" == value) {
return "background:#FF83FA";
}
},
// 编辑器
editor: {
type: "validatebox",
options: {
required: true,
missingMessage: "用户名必填！",
validType: "minLength[2,5]"
}
}
},{
field: "password",
title: "密码",
width: 100,
editor: {
type: "validatebox",
options: {
required: true,
missingMessage: "密码必填！",
validType: "equalLength[4]"
}
}
},{
field: "sex",
title: "性别",
width: 50,
formatter: function(value, recode, 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:"女"}],
required: true,
missingMessage: "性别必填！",
valueField: "id",
textField: "val",
editable: false
}
}
},{
field: "age",
title: "年龄",
width: 50,
editor: {
type: "numberbox",
options: {
required: true,
missingMessage: "年龄必填！",
min: 1,
max: 200,
precision: 0
}
}
},{
field: "birthday",
title: "生日",
width: 100,
editor: {
type: "datebox",
options: {
required: true,
missingMessage: "生日必填！",
editable: false
}
}
},{
field: "city",
title: "所属城市",
width: 100,
formatter: function(value, recode, index) {
// 如果城市很多，这样代码很繁琐，可以把城市放到一个js文件中，然后获取这个js文件，得到城市的数组，最后遍历得到
if (value == 1) {
return "东莞";
} else if (value == 2) {
return "广州";
} else if (value == 3) {
return "深圳";
} else if (value == 4) {
return "珠海";
} else if (value == 5) {
return "佛山";
}
},
editor: {
type: "combobox",
options: {
url: "ProvinceServlet?method=findCityList",
valueField: "id",
textField: "name",
required: true,
missingMessage: "城市必填！",
editable: false
}
}
},{
field: "salary",
title: "薪水",
width: 100,
editor: {
type: "numberbox",
options: {
required: true,
missingMessage: "薪水必填！",
min: 1510,
max: 20000
}
}
},{
field: "starttime",
title: "开始时间",
width: 150,
editor: {
type: "datetimebox",
options: {
required: true,
missingMessage: "时间必填!",
editable: false
}
}
},{
field: "endtime",
title: "结束时间",
width: 150,
editor: {
type: "datetimebox",
options: {
required: true,
missingMessage: "结束时间必填!",
editable: false
}
}
},{
field: "description",
title: "个人描述",
width: 150,
formatter: function(value, recode, index) {
return value==undefined ? "" : "<span title="+value+">"+value+"</span>";
},
editor: {
type: "validatebox",
options: {
required: true,
missingMessage: "个人描述必填！",
validType: 'minLength[5,50]',
invalidMessage: "个人描述必须在5-50个字符之间！"
}
}
}
]],
toolbar: [{
text: "新增用户",
iconCls: "icon-add",
handler: function() {
flag = "add";
// 回滚
$("#userList").datagrid("cancelEdit", rowIndex);
// 不选中
$("#userList").datagrid("unselectAll");
if (rowIndex == undefined) {
// 新增一行
$("#userList").datagrid("appendRow",{});
// 获取最后一行的行号
rowIndex = $("#userList").datagrid("getRows").length-1;
// 开启编辑状态
$("#userList").datagrid("beginEdit", rowIndex);
}
}
},{
text: "删除用户",
iconCls: "icon-remove",
handler: function() {
var rowObjs = $("#userList").datagrid("getSelections");
if (rowObjs.length <= 0) {
$.messager.show({
title: "提示信息",
msg: "至少选择一行记录进行删除！"
});
return;
}
$.messager.confirm("提示信息", "确定要删除吗？", function(r) {
if (r) {
var ids = "";
for (var i=0; i<rowObjs.length; i++) {
ids += rowObjs[i].id+",";
}
ids = ids.substring(0, ids.length-1);
var url = "UserServlet?method=deleteUserByIds";
var data = {"time": new Date(), "ids": ids};
$.post(url, data, function(result) {
// 取消选中
$("#userList").datagrid("unselectAll");
// 刷新页面
$("#userList").datagrid("reload");
// 提示信息
var jsonObj = $.parseJSON(result);
$.messager.show({
title: "提示信息",
msg: jsonObj.status
});
});
} else {
$("#userList").datagrid("unselectAll");
}
});
}
},{
text: "修改用户",
iconCls: "icon-edit",
handler: function() {
flag = "edit";
// 如果选择的记录不是1条
var rowObjs = $("#userList").datagrid("getSelections");
if (rowObjs.length != 1) {
$.messager.show({
title: "提示信息",
msg: "有且只能选择一条记录进行修改！"
});
return;
}
// 打开编辑
if (rowIndex == undefined) {
rowIndex = $("#userList").datagrid("getRowIndex", rowObjs[0]);
$("#userList").datagrid("beginEdit", rowIndex);
}
}
},{
text: "保存用户",
iconCls: "icon-save",
handler: function() {
// 非编辑状态下点击保存
if (rowIndex == undefined) {
$.messager.show({
title: "提示信息",
msg: "先新增用户或修改用户，再保存用户！"
});
return;
}
// 校验指定行
if (!$("#userList").datagrid("validateRow", rowIndex)) {
$.messager.show({
title: "提示信息",
msg: "表单校验不通过，不能提交表单！"
});
return;
}
// 结束编辑
if ($("#userList").datagrid("validateRow", rowIndex)) {
$("#userList").datagrid("endEdit", rowIndex);
// 释放
flag = undefined
rowIndex = undefined
}
}
},{
text: "取消操作",
iconCls: "icon-cancel",
handler: function() {
if (flag != undefined) {
// 回滚数据
$("#userList").datagrid("rejectChanges");
// 不选中
$("#userList").datagrid("unselectAll");
// 释放
rowIndex = undefined;
}
}
}],
onAfterEdit: function(rowIndex, rowData) {
$.post(flag=="add"?"UserServlet?method=addUser":"UserServlet?method=editUser", rowData, function() {
$.messager.show({
title: "提示信息",
msg: "操作成功！"
});
});
// 刷新当前行
$("#userList").datagrid("refreshRow", rowIndex);
// 取消选中
$("#userList").datagrid("unselectAll");
}
});
// 重写了校验器
$.extend($.fn.validatebox.defaults.rules, {
minLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length >= param[0] && value.length <= param[1];
},
// 如果出错，显示的提示信息
message: "用户名必须在2-5个字符之间！"
},
equalLength: {
// 校验器，value：用户输入的内容 param：定义的校验数组
validator: function(value, param) {
return value.length == param[0];
},
// 如果出错，显示的提示信息
message: "密码必须是4位字符！"
}
});
});
// 这是重写的datetimebox的方法，因为editor中只有datebox，没有datetimebox，所以需要重写，这段代码要放在commons.js中调用
$.extend($.fn.datagrid.defaults.editors, {
datetimebox: {
init: function(container, options){
var box = $('<input />').appendTo(container);
box.datetimebox(options);
return box;
},
getValue: function(target){
return $(target).datetimebox('getValue');
},
setValue: function(target, value){
$(target).datetimebox('setValue',value);
},
resize: function(target, width){
var box = $(target);
box.datetimebox('resize' , width);
} ,
destroy:function(target){
$(target).datetimebox('destroy');
}
}
});
</script>
</head>
<body style="margin: 0px 0px 0px 0px;">
<!-- editgrid -->
<table id="userList"></table>
</body>
</html>
浙公网安备 33010602011771号