创建数据网格(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. 调用Camera返回为空的分析及处理方法

    前言 大家可能遇到了这种情况.调用Camera,然后指定自己定义的保存路径,结果返回的Intent为空.我们来分析一下原因. 分析 首先看Camera的部分逻辑,在源代码中的Camera.java的d ...

  2. 优化梯度计算的改进的HS光流算法

    前言 在经典HS光流算法中,图像中两点间的灰度变化被假定为线性的,但实际上灰度变化是非线性的.本文详细分析了灰度估计不准确造成的偏差并提出了一种改进HS光流算法,这种算法可以得到较好的计算结果,并能明 ...

  3. C++基本数据类型及类型转换

    http://blog.csdn.net/pipisorry/article/details/25346379 c++基本数据类型 什么样的数据算是byte类型,int类型,float类型,doubl ...

  4. WPF中的数据绑定Data Binding使用小结

    完整的数据绑定的语法说明可以在这里查看: http://www.nbdtech.com/Free/WpfBinding.pdf MSDN资料: Data Binding: Part 1 http:// ...

  5. HDU 6076 Security Check DP递推优化

    Security Check Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K (Java/Others) ...

  6. Sping中Bean配置的深入探讨

    一.p命名空间的使用 Spring 从 2.5 版本开始引入了一个新的 p 命名空间,可以通过 <bean> 元素属性的方式配置 Bean 的属性.使用 p 命名空间后,基于 XML 的配 ...

  7. ETF到底是什么?

    ETF(交易所交易基金)是一种证券产品,它可以跟踪一些相关的资产,不论是股票.债券.商品,还是数字货币. ETF基金会负责跟踪指定的资产.然后放出部分股份,这些股份代表着对资产的拥有权. 交易ETF股 ...

  8. socket基本使用

    UDP发送和接收 MainRecv.cpp #include <iostream> #include <WinSock2.h> #include <sstream> ...

  9. 在c中break的使用

    break语句通常用在循环语句和开关语句中.当break用于开关语句switch中时,可使程序跳出switch而执行switch以后的语句:如果没有break语句,则会从满足条件的地方(即与switc ...

  10. Oracle查询正在执行的SQL语句

    查看 Oracle 正在执行的 sql 语句以及发起的用户 SELECT b.sid oracleID, b.username 用户名, b.serial#, paddr, sql_text 正在执行 ...