Jquery easyui开启行编辑_增删改操作及新增就能编辑

最新推荐文章于 2024-04-02 16:46:42 发布

别样的风采是我

最新推荐文章于 2024-04-02 16:46:42 发布

阅读量1.1w

点赞数 2

分类专栏： EasyUI

本文链接：https://blog.csdn.net/qq_16769857/article/details/51906717

版权

这是一个关于jQuery EasyUI的教程，介绍了如何实现表格的行编辑功能，包括通过双击选中、点击修改按钮以及右键菜单进行增删改操作。提供了单独的JS文件供直接在页面引用，并提到了两种不同的编辑模式实现方式。

摘要由CSDN通过智能技术生成

下面这个是一个单独的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