Jquery easyui开启行编辑模式增删改操作

本人也是刚刚接触到这个easyui,跟着视频做的第一个小实例,下面都有完整的注释,属于原创,希望大家多多支持,希望对刚学这个的朋友有所帮助,若有不对的地方,请包含,毕竟我也是才刚学!

下面这个是一个单独的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 : [ { //添加一排按钮

f9dc
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>