创建数据网格(DataGrid)

  1. $(function(){
  2. $('#tt').datagrid({
  3. title:'Editable DataGrid',
  4. iconCls:'icon-edit',
  5. width:660,
  6. height:250,
  7. singleSelect:true,
  8. idField:'itemid',
  9. url:'datagrid_data.json',
  10. columns:[[
  11. {field:'itemid',title:'Item ID',width:60},
  12. {field:'productid',title:'Product',width:100,
  13. formatter:function(value){
  14. for(var i=0; i<products.length; i++){
  15. if (products[i].productid == value) return products[i].name;
  16. }
  17. return value;
  18. },
  19. editor:{
  20. type:'combobox',
  21. options:{
  22. valueField:'productid',
  23. textField:'name',
  24. data:products,
  25. required:true
  26. }
  27. }
  28. },
  29. {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
  30. {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
  31. {field:'attr1',title:'Attribute',width:150,editor:'text'},
  32. {field:'status',title:'Status',width:50,align:'center',
  33. editor:{
  34. type:'checkbox',
  35. options:{
  36. on: 'P',
  37. off: ''
  38. }
  39. }
  40. },
  41. {field:'action',title:'Action',width:70,align:'center',
  42. formatter:function(value,row,index){
  43. if (row.editing){
  44. var s = '<a href="#" onclick="saverow(this)">Save</a> ';
  45. var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
  46. return s+c;
  47. } else {
  48. var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
  49. var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
  50. return e+d;
  51. }
  52. }
  53. }
  54. ]],
  55. onBeforeEdit:function(index,row){
  56. row.editing = true;
  57. updateActions(index);
  58. },
  59. onAfterEdit:function(index,row){
  60. row.editing = false;
  61. updateActions(index);
  62. },
  63. onCancelEdit:function(index,row){
  64. row.editing = false;
  65. updateActions(index);
  66. }
  67. });
  68. });
  69. function updateActions(index){
  70. $('#tt').datagrid('updateRow',{
  71. index: index,
  72. row:{}
  73. });
  74. }

为了启用数据网格行内编辑,您应该添加一个 editor 属性到列中。编辑器(editor)会告诉数据网格(datagrid)如何编辑字段及如何保存字段值。正如您所看到的,我们定义的三个编辑器(editor):text、combobox 和 checkbox。

  1. function getRowIndex(target){
  2. var tr = $(target).closest('tr.datagrid-row');
  3. return parseInt(tr.attr('datagrid-row-index'));
  4. }
  5. function editrow(target){
  6. $('#tt').datagrid('beginEdit', getRowIndex(target));
  7. }
  8. function deleterow(target){
  9. $.messager.confirm('Confirm','Are you sure?',function(r){
  10. if (r){
  11. $('#tt').datagrid('deleteRow', getRowIndex(target));
  12. }
  13. });
  14. }
  15. function saverow(target){
  16. $('#tt').datagrid('endEdit', getRowIndex(target));
  17. }
  18. function cancelrow(target){
  19. $('#tt').datagrid('cancelEdit', getRowIndex(target));
  20. }

EasyUI 启用行内编辑的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  2. jQuery EasyUI 数据网格 - 启用行内编辑(转自http://www.runoob.com/jeasyui/jeasyui-datagrid-datagrid12.html)

    可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行.本教程向您展示如何创建一个数据网格(datagrid)和内联 ...

  3. ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

    这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交本节主要演示扩展Datagrid行内编辑的属性,下面来看一个例子,我开启编辑行的时 ...

  4. 第一节:EasyUI样式,行内编辑,基础知识

    一丶常用属性 $('#j_dg_left').datagrid({ url: '/Stu_Areas/Stu/GradeList', fit: true, // 自动适应父容器大小 singleSel ...

  5. easyui datagrid行内编辑

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. Easyui datagrid行内【添加】、【编辑】、【上移】、【下移】

    前几天项目中遇到一个需求用到了Easyui datagrd行内添加和编辑数据,同时对行内数据上移下移,所以对这几个功能做个总结. 1.首先大概说下这几个功能里用到的主要方法,行内添加数据主要是添加列的 ...

  7. ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

    前言: 为了赶进度,周末也写文了! 前几篇讲完查询框和工具栏,这节讲表格数据相关的操作. 先看一下列表: 接下来我们有很多事情可以做. 1:格式化 - 键值的翻译 对于“启用”列,已经配置了格式化 # ...

  8. js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable

    js插件---JS表格组件BootstrapTable行内编辑解决方案x-editable 一.总结 一句话总结:bootstrap能够做为最火的框架,绝对不仅仅只有我看到的位置,它应该还有很多位置可 ...

  9. JS组件系列——BootstrapTable 行内编辑解决方案:x-editable

    前言:之前介绍bootstrapTable组件的时候有提到它的行内编辑功能,只不过为了展示功能,将此一笔带过了,罪过罪过!最近项目里面还是打算将行内编辑用起来,于是再次研究了下x-editable组件 ...

随机推荐

  1. 【转】VMware 11.0 简体中文版|附永久密钥

    VMware 11.0 简体中文版|附永久密钥 昨天,VMware虚拟机11.0 简体中文版正式发布,值得注意的是新版抛弃了32位系统支持,安装包体积大幅减小, 新增Windows 10 技术预览版支 ...

  2. C#获取Access数据库中的所有表名和列名

    //C#获取Access数据库中的所有表名和列名    string ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" ...

  3. ecshop忘记管理员密码

    直接修改数据表 ecs_admin_user, 找到对应的管理员, 同时修改 password 为 2fc3ec4c91d51bee94f4a8ccbdbe5383 和 ec_salt 为1819, ...

  4. 高性能MySQL(四)

    Schema与数据类型优化 需要优化的数据类型 更小的通常更好 简单就好 尽量避免NULL 整数类型 存储整数,有TINYINT.SMALLINT.MEDIUMINT.INT.BIGINT,分别使用8 ...

  5. Discuz系列1:安装

    http://www.discuz.net/forum.php     官网,点击“Discuz! 程序发布” 代码库: https://git.oschina.net/ComsenzDiscuz/D ...

  6. java内部类和静态内部类的区别

    1 相同点 使用的时候,import的时候,除了包名,还要带外部类. 2 不同点 2.1 对象创建的方式不同 静态内部类创建对象的时候,独立于外部类及其对象,就好像它是一个独立的类,可以和外部类一样使 ...

  7. Communicating sequential processes

    the-way-to-go_ZH_CN/01.2.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  8. appium(8)-locator strategies

    locator strategies Finding and interacting with elements Appium supports a subset of the WebDriver l ...

  9. eclipse配置SVN

    1.设置 maven 工程svn忽略target 最新maven写法忽略的文件,还需忽略target.*/logs. Windows -> Preferences -> Team -> ...

  10. 【转】hibernate懒加载的问题,failed to lazily initialize a collection of role

    hibernate懒加载的问题,failed to lazily initialize a collection of role hibernate懒加载的问题,failed to lazily in ...