<%@ 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中editor和combobox的级联,在datagrid中编辑项是下拉框的实现方式
easyui datagrid editor回车切换单元格示例,适合熟悉easyui但又不懂如何做的人员,可能参考一下源码JS。
easyui的datagrid中editor和combogrid的结合使用,datagrid中编辑项是下拉表的实现方式
easyui datagrid 行编辑时 1、类型为combogrid时每行的参数不同查询返回对应的数据结果。 2、类型为combobox时,输入框显示图标按钮,实现对应的事件。 3、解决类型为combobox显示为value而不是text问题。
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
自定义easyui datagrid的行编辑器,实现颜色选择。 依赖类库版本; jquery-1.8.0.js jquery-easyui-1.3.1
在easyui 的datagrid编辑状态下实时更新其他处于编辑或者没在编辑下的列值,并在结束编辑后得到的row的数据为更改后的数据。
本文给大家分享jQuery EasyUI编辑DataGrid用combobox实现多级联动效果的实例代码,代码简单易懂,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
easyui 可编辑datagrid完整例子,支持filebox 项目中的数据库使用的是mysql,内置sql脚本,执行脚本即可创建数据
easyui1.4.5增加一个鼠标滑过行,注意是行不是列,然后弹出框显示某些关键信息,如经典的图片预览操作,内容提供demo,并附修改方法,这个方法是修改的源码,没有增加扩展实现,若愿意请自行实现
easyUI中datagrid鼠标悬浮显示图片,博客地址:https://blog.csdn.net/lwf3115841/article/details/119531658?spm=1001.2014.3001.5501
1.easyui使用datagrid定制生成一个table,1.数据绑定2.DataGrid的增改删功能3.DataGrid的分页实现4.DataGrid的样式设计先上一张截图,让你大概知道自己需要的功能是否在这张图里有所实现。
JS EasyUI DataGrid动态加载数据
UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制计算机,而不是计算机控制用户;减少用户的记忆负担;保持界面一致。 给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头...
easyui-datagrid之间拖拽效果demo
easyui的datagrid的数据渲染
easyUI拓展:获取当前datagrid中在编辑状态的行编号列表,直接使用即可
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格