<%@ page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base
href="${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />
<meta http-equiv="Content-Type"
content="text/html; charset=charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
</head>
<body>
<script type="text/javascript" src="demo/js/user.js"></script>
<table id="user"
data-options="iconCls:'icon-edit',singleSelect:true,idField:'itemid'"
title="Editable DataGrid">
</table>
<div id="dd" style="display: none; width: 400px; height: 200px;">
<input id="cc" name="dept" value="aa">
</div>
</body>
</html>
{"total":8,"rows":[
{"id":9,"createTime":"2012-12-21","rid":3,"address":"北京市朝阳区","email":"lisi@qq.com","rname":"用户管理","userName":"李四","password":"lisi"},
{"id":12,"createTime":"2012-12-31","rid":2,"address":"北京市海淀区","email":"wangwu@qq.com","rname":"测试用户","userName":"王五","password":"wangwu"},
{"id":13,"createTime":"2013-01-14","rid":2,"address":"北京市通州","email":"zhaoliu@qq.com","rname":"测试用户","userName":"赵六","password":"zhaoliu"},
{"id":14,"createTime":"2013-01-14","rid":1,"address":"北京市","email":"tianqi@qq.com","rname":"普通用户","userName":"田七","password":"tianqi"},
{"id":15,"createTime":"2013-01-14","rid":2,"address":"sd","email":"sd","rname":"测试用户","userName":"ssdf","password":"sdsd"},
{"id":17,"createTime":"2013-01-15","rid":1,"address":"北京市海淀区","email":"zhangsan@qq.com","rname":"普通用户","userName":"张三","password":"zhangsan"},
{"id":18,"createTime":"2013-01-15","rid":2,"address":"祝家庄","email":"zhuyingtai@qq.com","rname":"测试用户","userName":"祝英台","password":"zhuyingtai"},
{"id":19,"createTime":"2013-01-15","rid":1,"address":"sdfd","email":"liangshanbo@qq.com","rname":"普通用户","userName":"梁山伯","password":"liangshanbo"}
]}
$(function(){
var lastIndex;
$('#user').datagrid({
url:'demo/demo.json',
//为editor绑定自定义事件
onClickCell:function(rowIndex, rowData){
$(this).datagrid('beginEdit', rowIndex);
var ed = $('#user').datagrid('getEditors', rowIndex);
for (var i = 0; i < ed.length; i++){
var e = ed[i];
if(e.field == "rid") {
$(e.target).bind("click",function(){
alert("click me");
});
}
}
},
columns : [ [ {
title : 'User ID',
field : 'id',
width : 100,
hidden:true
}, {
title : '用户名',
field : 'userName',
width : 150,
editor:'text'
},{
title : '邮箱',
field : 'email',
width : 150,
editor:'text'
},{
title : '地址',
field : 'address',
width : 150,
editor:'text'
}, {
title : '密码',
field : 'password',
width : 150,
editor:'text'
}, {
title : '创建时间',
field : 'createTime',
width : 150
}, {
title : '所属角色',
field : 'rid',
width : 150,
editor:'text'
} ] ],
toolbar:[{
text:'append',
iconCls:'icon-add',
width:'auto',
height:'auto',
handler:function(){
$('#user').datagrid('endEdit', lastIndex);
$('#user').datagrid('appendRow',{
userName:'',
password:'',
email:'',
address:'',
rid:'',
createTime:''
});
lastIndex = $('#user').datagrid('getRows').length-1;
$('#user').datagrid('selectRow', lastIndex);
$('#user').datagrid('beginEdit', lastIndex);
}
},'-',{
text:'delete',
iconCls:'icon-remove',
handler:function(){
var row = $('#user').datagrid('getSelected');
if (row){
var index = $('#user').datagrid('getRowIndex', row);
$('#user').datagrid('deleteRow', index);
$.ajax({
url:'user/userDelete.action',
type:'POST',
data:{
"user.id":row.id
},
success:function(data){
$('#user').datagrid().load("user/selectAll.action");
}
});
}
}
},'-',{
text:'accept',
iconCls:'icon-save',
handler:function(){
$('#user').datagrid('acceptChanges');
var row = $('#user').datagrid('getSelected');
$.ajax({
url:'user/userAdd.action',
type:'POST',
data:{
"user.userName":row.userName,
"user.password":row.password,
"user.email":row.email,
"user.address":row.address,
"role.rid":row.rid
},
success:function(data){
$('#user').datagrid().load("user/selectAll.action");
}
});
}
},'-',{
text:'为用户分配角色',
iconCls:'icon-add',
width:'auto',
height:'auto',
handler:function(){
$('#dd').show().dialog();
}
}],
onBeforeLoad:function(){
$(this).datagrid('rejectChanges');
},
onClickRow:function(rowIndex){
if (lastIndex != rowIndex){
$('#user').datagrid('endEdit', lastIndex);
$('#user').datagrid('beginEdit', rowIndex);
}
lastIndex = rowIndex;
}
});
});
相关推荐
在本文中，我们将深入探讨如何在EasyUI的DataGrid中创建自定义编辑器，特别是`colorpickerEditor`，用于在行内编辑时选择颜色。EasyUI是一个基于jQuery的UI库，它提供了丰富的组件，如DataGrid，使得网页开发更加...
### easyui的datagrid中editor和combogrid的结合使用 #### 一、easyui简介及datagrid功能概述 easyUI是一个基于jQuery的用户界面插件集合，它提供了丰富的UI组件，帮助开发者快速创建交互式Web应用。其中，...
总结来说，要在EasyUI的Datagrid中实现在编辑状态下更新列的值，需要利用编辑事件，如`onCellEdit`和`onAfterEdit`，并在事件处理函数中执行相应的逻辑。同时，确保在编辑结束后，Datagrid保存的数据是更新后的版本...
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时，输入框显示图标按钮，实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
通过阅读文档中的 `.doc` 文件，你可以更全面地了解 EasyUI DataGrid 的各种属性和用法，包括一些高级特性，如动态加载数据、数据绑定、异步操作等。同时，结合实际项目实践，这些知识将有助于提升你的前端开发技能...
在“easyui-datagrid12-demo.zip”这个压缩包中，我们主要关注的是EasyUI 的 DataGrid 组件，以及可能涉及到的行内编辑功能。DataGrid 是 EasyUI 提供的一个用于展示数据表格的组件，它具有强大的数据管理能力，包括...
当在datagrid行内部应用添加编辑操作时，引入combobox是非常方便的操作，这篇文章主要介绍了jQuery Easyui datagrid editor为combobox时指定数据源实例，有兴趣的可以了解一下。
在本文中，我们将深入探讨如何将数据绑定到EasyUI的DataGrid中，以及在这个过程中涉及的关键知识点。 首先，我们需要了解DataGrid的基本结构。DataGrid通常由HTML元素、CSS样式和JavaScript代码组成。HTML部分是...
本文主要介绍如何在EasyUI的DataGrid中实现Combogrid编辑器的搜索功能。EasyUI是一个基于jQuery的UI库，提供了一系列的组件，包括DataGrid和Combogrid，它们通常用于数据展示和编辑。Combogrid是结合了ComboBox和...
在开发Web应用时，使用EasyUI的datagrid组件展示大量数据时，可能会遇到加载效率低下的问题。本文主要探讨如何针对EasyUI datagrid进行性能优化，以解决大数据量加载慢的问题。 首先，我们需要理解问题的根源。当...
此外，为了支持回车键提交数据，还需绑定 `keypress` 事件，并在事件中判断按下的是否是回车键（keyCode为13），如果是，则同样调用 `setOrder` 函数来保存数据。 知识点五：DataGrid 列的配置 DataGrid 列的配置是...
自己花了 一晚上搞出来的，没有找到合适的，最后自己根据观看博客的总结，做了此demo 下载运行即可
DataGrid还支持多种事件，如`onHeaderContextMenue`和`onRowContextMenue`，这两个事件分别在用户右键点击表头和行记录时触发，为实现自定义上下文菜单提供了可能。在示例代码中，我们看到如何绑定这些事件并展示一...
在这个简易图书管理系统中，EasyUI被用来设计和实现用户交互界面，为用户提供直观、易用的操作体验。 1. **EasyUI的基本概念** - **组件**: EasyUI提供了如表格（datagrid）、下拉框（combobox）、树形结构（tree...
3. **数据绑定**：EasyUI 支持与后端数据源进行数据绑定，例如通过 JSONP 或 AJAX 调用获取数据，然后动态填充到组件中。这使得数据展示和更新变得简单而直观。 4. **主题系统**：EasyUI 内置了多种预设主题，可以...
在JavaScript部分，我们使用KindEditor的API来创建编辑器实例，设置了各种配置选项，如宽度、高度、同步类型等，并绑定了`afterChange`和`afterBlur`事件来确保内容的实时同步。 ```javascript var editor; ...
开启行编辑模式指的是在easyui的数据网格（DataGrid）组件中实现对数据行的编辑功能。这通常涉及到对每行数据进行增加、删除、修改的操作，包括： - **增加**: 在数据网格中添加新的数据行。 - **修改**: 对已有的...