标签：
下面这个是一个单独的js文件,可以直接在页面引入他就可以用了
主要有三种方式实现编辑模式增删改操作
1.直接双击选中编辑
2.选中行点击修改按钮编辑
3.右键选择相关的操作
可能中间有部分功能没有实现
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!-- 引入自定义的js文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/js/Myutil.js"></script>
<script type="text/javascript">
var datagrid;
$(function() {
editRow = undefined ; //保存当前正在编辑的行,控制同一时间只开启一行
$('#datagrid').datagrid({
rowStyler : function(rowIndex,rowData){ //行样式
console.info(rowData.name);
if(rowData.name == '张三丰'){
return ''; //让张三丰这一行不显示样式
}
return 'background-color:#6293BB; font-weight:bold; height:150px';
},
//url和columns属性必须要有
//后台响应数据的地址,返回JSON字符串来填充grid
url : '${pageContext.request.contextPath}/student/all',
title : '学生列表',
iconCls : 'icon-save',
pagination : true, //分页工具条
pageSize : 10, //每页显示的大小,联合pageList一起用
pageList : [ 10, 20, 30, 40 ],
fit : true, //随着里里面的宽高自适应
fitColumns : false, //设置成true填充满整个grid的宽,列多时设置为false,grid太窄时有横向滚动条
nowarp : false, //一行内容太长时可以自动换行全部显示出来
border : false,
idField : 'id', //通过主键找到对应的记录
sortName : 'name', //默认用name来进行排序
sortOrder : 'desc', //排序的种类
frozenColumns: [ [ { //冻结列,此时fitColumns不能设置成true,否则没有效果
title : '',
field : '',
width : 50 , //json对象返回的属性要对应
checkbox : true //在前面有个选项框
}, {
title : '编号',
field : 'id',
//json对象返回的属性要对应
width : 100, //必须给,否则列不显示
sortable : true , //设置在哪里表示可以用此列排序
align : 'center' //让编号列居中显示
}] ],
columns : [ [ {
title : '用户名',
field : 'name',
width : 200,
align : 'center' ,
sortable : true , //设置在哪里表示可以用此列排序
editor : { //让用户名列变成可编辑且数据必填
type : 'validatebox' , //让编辑框变成那种样
options : {
required : true
}
},
//当类容较长时,鼠标移上去将全部显示出来,此函数必须要换回一个字符串,返回的字符串替换当前的值
formatter : function(value,rowData,rowIndex){
//height可以设置列高
return '<div style="height:50px" title="'+value+'">'+value+'</div>'; //利用html方式实现
}
} , {
title : '密码',
field : 'password',
width : 200 ,
editor : {
type : 'validatebox' ,
options : {
required : true
}
} ,
formatter : function(value,rowData,rowIndex){
return '******'; //将密码用*显示
} ,
align : 'center'
}, {
title : '创建时间',
field : 'createtime',
width : 200,
sortable : true ,
editor : {
type : 'datetimebox' , //自定义的类型
options : {
required : true
}
} ,
align : 'center'
} , {
title : '操作',
field : 'cz',
width : 130,
formatter : function(value,rowData,rowIndex){
return '<button onclick="show('+rowIndex+');">编辑</button><button>删除</button>';
},
align : 'center'
}] ], //用两个中括号可以合并单元格
toolbar : [ { //添加一排按钮
text : '增加',
iconCls : 'icon-add',
handler : function() {
if(editRow != undefined ){
$('#datagrid').datagrid('endEdit',editRow); //避免同时开启多个编辑行
}
if(editRow == undefined){
/*$('#datagrid').datagrid('appendRow',{ //在当前页末尾添加一行
id : 'ww' ,
name : '' ,
password : '' ,
createtime : ''
});
var rows = $('#datagrid').datagrid('getRows'); //得到当前页的所有行
$('#datagrid').datagrid('beginEdit',rows.length - 1 ); //让添加的这一行开启编辑状态,索引从0开始
*/
//调用自己添加的方法,让添加用户时密码可以编辑,创建时间不可编辑
changeEditorAddRow();
$('#datagrid').datagrid('insertRow',{
index : 0 , //添加到第一行
row : {
name : '请输入用户名' ,
password : '请输入密码' ,
createtime : '请选择时间'
}
});
$('#datagrid').datagrid('beginEdit' ,0); //让添加的第一行开启编辑状态
editRow = 0 ; //记录当前编辑行的索引
}
}
}, '-', {
text : '删除',
iconCls : 'icon-remove',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections'); //得到所选择的行
if(rows.length > 0){
$.messager.confirm('请确认','您确定要删除当前所选中的项目吗?',function(b){
if(b){
var ids = [] ;//传给后台的id集合
for(var i = 0;i < rows.length; i++){
ids.push(rows[i].id); //拼接所选中的id
}
$.ajax({
url : '${pageContext.request.contextPath}/student/delete' ,
data : {
ids : ids.join(',') //将数组转换成一个以逗号分割的字符串传给后台
},
type : 'post',
dataType : 'json' ,
success : function(r){
if(r && r.flag){
$('#datagrid').datagrid('load'); //删除后刷新页面
$('#datagrid').datagrid('unselectAll'); //避免系统还在选中状态,下次删除新的数据出错
$.messager.show({
title : '提示',
msg : r.msg
});
}else{
$.messager.alert('错误','删除失败' ,'error');
}
}
});
}
});
}else{
$.messager.alert('提示','请选择要删除的记录','warning');//这里提示一个警告
}
}
}, '-', {
text : '修改', //'-',是一个分隔符
iconCls : 'icon-edit',
handler : function() {
var rows = $('#datagrid').datagrid('getSelections'); //得到所选择的行
if(rows.length == 1){
changeEditorEditRow();
if(editRow != undefined ){ //先判断双击前有没有在编辑的行
$('#datagrid').datagrid('endEdit',editRow); //避免同时开启多个编辑行
}
if(editRow == undefined){
var index = $('#datagrid').datagrid('getRowIndex' ,rows[0]);//得到选择行的索引
$('#datagrid').datagrid('beginEdit' ,index);
editRow = index ; //记录当前开启编辑的行
//在开启编辑状态时取消它的选择状态,这样就可以在修改时放弃修改当前行去修改其他行
$('#datagrid').datagrid('unselectAll');
}
}
}
}, '-', {
text : '保存', //'-',是一个分隔符
iconCls : 'icon-save',
handler : function() {
$('#datagrid').datagrid('endEdit',editRow);
}
}, '-' , {
text : '取消编辑', //'-',是一个分隔符
iconCls : 'icon-redo',
handler : function() {
editRow = undefined ;
$('#datagrid').datagrid('rejectChanges'); //调用回滚方法
$('#datagrid').datagrid('unselectAll');
}
}, '-', {
text : '清空dataGrid', //'-',是一个分隔符
iconCls : 'icon-undo',
handler : function() {
$('#datagrid').datagrid('loadData',[]);
}
} ],
onAfterEdit : function(rowIndex,rowData,changes){ //在提交编辑行后自动执行事件,自动封装数据
//console.info(rowData); //rowData刚结束编辑的哪一行数据,返回的是一个数组
//console.info(changes); //changes是改变的数据
var inserted = $('#datagrid').datagrid('getChanges','inserted'); //得到插入的数据
var updated = $('#datagrid').datagrid('getChanges','updated'); //得到修改的数据
//即没有选择添加也没有选择修改就直接return结束,不往下面走了 不然url提交地址为空
if(inserted.length < 1 && updated.length < 1){
editRow = undefined ;
datagrid.datagrid('unselectAll');
return ;
}
var url = '';
if(inserted.length > 0){ //表示点击的添加按钮
url = '${pageContext.request.contextPath}/student/insert' ;
}
if(updated.length > 0){ //表示点击的添加按钮
url = '${pageContext.request.contextPath}/student/update' ;
}
$.ajax({
url : url ,
data : rowData ,
dataType : 'json' ,
success : function(r){
if(r && r.flag){
$('#datagrid').datagrid('acceptChanges'); //后台添加成功后,前台保持同步,即不能"反悔"
$('#datagrid').datagrid('load'); //添加后刷新页面
$.messager.show({
msg : r.msg ,
title : '成功'
});
}else{
$('#datagrid').datagrid('rejectChanges'); //添加失败自动取消编辑框,回滚到前一个状态
$.messager.alert('错误', r.msg ,'error');
}
editRow = undefined ;
$('#datagrid').datagrid('unselectAll'); //取消选中,避免出现黄色条
}
});
//console.info(inserted);
//console.info(updated);
},
//直接双击修改
onDblClickRow : function(rowIndex,rowData){ //双击行触发事件
changeEditorEditRow(); //调用方法
if(editRow != undefined ){ //先判断双击前有没有在编辑的行
$('#datagrid').datagrid('endEdit',editRow); //避免同时开启多个编辑行
}
if(editRow == undefined){
$('#datagrid').datagrid('beginEdit' ,rowIndex);
editRow = rowIndex ; //记录当前编辑行的索引
}
},
//datagrid的右键事件,右键显示一个菜单,三个参数是事件自带的
onRowContextMenu : function(e, rowIndex, rowData){
e.preventDefault(); //阻止浏览器右键默认的事件
$(this).datagrid('unselectAll'); //先取消所有的选中,避免同一时间右键选中多行
$(this).datagrid('selectRow',rowIndex); //选中右键的这一行
$('#menu').menu('show', {
left : e.pageX, //让菜单位置跟着鼠标位置的改变而移动
top : e.pageY
});
}
});
//调用Myutil的方法将form表单元素的值序列化成对象,否则传过去的是字符串
sel = function(){
student_searchForm = $('#student_searchForm').form();
console.info(serializeObject(student_searchForm));
$('#datagrid').datagrid('load',serializeObject(student_searchForm));
};
//清空
cle = function(){
$('#datagrid').datagrid('load',{}); //此时后台接受到的过滤条件为空,将显示全部的数据
student_searchForm = $('#student_searchForm').form().find('input').val('');
};
//添加行时改变editor,password可编辑,创建时间不可编辑
changeEditorAddRow = function(){
$('#datagrid').datagrid('addEditor',{
field : 'password' , //名称需要对应
editor : {
type : 'validatebox' , //让编辑框变成那种类型
options : {
required : true
}
}
});
//让创建时间不可编辑,多个时用数组['createtime',''....]
$('#datagrid').datagrid('removeEditor','createtime');
};
//修改行时改变editor,密码不可编辑,创建时间开启可编辑状态
changeEditorEditRow = function(){
$('#datagrid').datagrid('removeEditor','password');
$('#datagrid').datagrid('addEditor',{
field : 'createtime' ,
editor : {
type : 'datetimebox' , //自定义的类型
options : {
required : true
}
}
});
};
//$('.datagrid-header div').css('textAlign','center'); //让表头居中
});
//点击控制列的编辑按钮执行的方法
function show(i){
console.info(i);
var rows = $('#datagrid').datagrid('getRows'); //得到当前页的所有行的数据,是一个数组
console.info(rows[i]); //得到第i+1行的那么属性值
}
</script>
<div class="easyui-tabs" fit="true" border="false">
<div title="学生管理" border="false">
<div class="easyui-layout" fit="true" border="false">
<div region="north" title="过滤查询" border="false" style="height:100px;overflow:hidden;">
<form id="student_searchForm">
<table class="tableForm datagrid-toolbar" style="width:100%;height:100%">
<tr style="width:100px;">
<th >用户名</th>
<td><input id="name" name="name" style="width:150px;"/></td>
</tr>
<tr>
<th>创建时间</th> <!-- editable="false"表示不能手动输入信息 -->
<td>
<input name="createtimeStart" class="easyui-datetimebox" editable="false" style="width:100px;"/>至
<input name="createtimeEnd" class="easyui-datetimebox" editable="false" style="width:100px;"/>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="sel();">查询</a>
<a href="javascript:void(0);" class="easyui-linkbutton" onclick="cle();">清空</a>
</td>
</tr>
</table>
</form>
</div>
<div region="center" border="false">
<table id="datagrid" ></table>
</div>
<!-- 右键弹出一个菜单需要先建立一个菜单 -->
<div id="menu" class="easyui-menu" style="width:120px; display:none;">
<div onclick="" iconCls="icon-add">增加</div>
<div onclick="" iconCls="icon-remove">删除</div>
<div onclick="" iconCls="icon-edit">编辑</div>
</div>
</div>
</div>
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>工艺流程</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">
<%@ include file="/WEB-INF/def/web/include/head.jsp"%>
</head>
<body class="easyui-layout" id="divform" style="display:none">
<!-- 信息列表 -->
<table id="dg" class="easyui-datagrid" style="width:100%" toolbar="#tb"
rownumbers="true" singleSelect="true" idField="invtypeid"
url="/cm/pub/tech/l">
<thead>
<tr>
<th data-options="field:'techname',width:200"
editor="{type:'textbox'}">工艺流程名称</th>
<th data-options="field:'memo',width:200" editor="{type:'textbox'}">备注</th>
<th data-options="field:'operupd',width:100" align="center"
formatter="formatAction">操作</th>
</tr>
</thead>
</table>
<div id="tb">
<a href="javascript:void(0)" target="_blank" class="easyui-linkbutton"
iconCls="icon-add" plain="true" onclick="appendrow();">新增</a>
</div>
<!-- 删除对话框 -->
<%@ include file="/WEB-INF/def/web/include/delmsg.jsp"%>
</body>
</html>
<script language="javascript">
$('#divform').css("display", "");
$("#dg").css("height", $(window).height());
var delbillid;
var delindex;
//初始表格
$('#dg').datagrid({
onBeforeEdit : function(index, row) {
row.editing = true;
updateActions(index);
},
onAfterEdit : function(index, row) {
row.editing = false;
updateActions(index);
},
onCancelEdit : function(index, row) {
row.editing = false;
updateActions(index);
}
});
function updateActions(index) {
$('#dg').datagrid('updateRow', {
index : index,
row : {}
});
}
//添加修改和删除
function formatAction(value, row, index) {
if (row.editing) {
var e = "<a href='javascript:void(0)' onclick='saverow(" + index
+ ")'>确认</a> ";
var d = "<a href='javascript:void(0)' onclick='cancelrow(" + index
+ ")'>取消</a>";
return e + d;
} else {
debugger;
var e = "<a href='javascript:void(0)' onclick='editrow(" + index
+ ")'>编辑</a> ";
var d = "<a href='javascript:void(0)' onclick='deleterow(\""
+ row.invtypeid + "\")'>删除</a>";
return e + d;
}
}
//新增行即可编辑
function appendrow() {
$('#dg').datagrid('appendRow', {
techid : ''
});
var rows = $('#dg').datagrid('getRows');
$('#dg').datagrid('beginEdit',rows.length - 1 );
}
//开始编辑
function editrow(index) {
$('#dg').datagrid('beginEdit', index);
}
//编辑取消
function cancelrow(index) {
$('#dg').datagrid('cancelEdit', index);
}
//数据保存
function saverow(index) {
$('#dg').datagrid('endEdit', index);
var row = $('#dg').datagrid('getData').rows[index];
var techname = row.techname;
//var memo = row.memo;
if (techname == "") {
$.messager.alert('提示信息', "请你填写工艺流程名称");
return;
}
var rows1 = $('#dg').datagrid('getRows');
var length = rows1.length;
for (var i = 0; i < length - 1; i++) {
var row2 = rows1[i];
var _techname = undefined2empty(row2.techname);
if (techname == _techname && index != i) {
$.messager.alert('提示信息', "工艺流程名称不可以重复 请重新输入");
editrow(index);
return;
}
}
//var para = "invtypeid="+undefined2empty(invtypeid)+"&invtypename="+invtypename;
$.getJSON("/cm/pub/tech/s", function(data) {
if (data.errcode == "") {
$.messager.alert('提示信息', "保存成功!");
row.invtypeid = data.list[0];
if (data.list[1] != null) {
row.invtypecode = data.list[1];
}
$('#dg').datagrid('reload', index);
} else {
$.messager.alert('提示信息', data.errmsg);
}
});
}
//数据删除
function deleterow(billid) {
var index = $('#dg').datagrid("getRowIndex", billid);
if (billid == undefined) {
$('#dg').datagrid('cancelEdit', index);
$('#dg').datagrid('deleteRow', index);
return;
}
delbillid = billid;
delindex = index;
$('#dlg').dialog('open');
$('#dlg').html("确定要删除此记录吗？");
}
//删除选择
function delexcute() {
$('#dlg').dialog('close');
$.getJSON("/cm/pub/tech/d?techid=" + delbillid, function(data) {
if (data.errcode == "") {
$.messager.alert('提示信息', "删除成功!");
$('#dg').datagrid('deleteRow', delindex);
} else {
$.messager.alert('提示信息', data.errmsg);
}
});
}
</script>新增行编辑：
另一种方式待验证：
appendRow后获取添加行的index，调用beginEdit
var index=$('#FlowList').datagrid('appendRow', {
FlowTypeName: 'new name',
FlowTypeCode: 30
}).datagrid('getRows').length-1;
$('#FlowList').datagrid('beginEdit',index)Jquery easyui开启行编辑_增删改操作及新增就能编辑
标签：
原文地址：http://blog.csdn.net/qq_16769857/article/details/51906717
