1.  <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.  <html>
  3.  <head>
  4.      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.      <meta name="keywords" content="jquery,ui,easy,easyui,web">
  6.      <meta name="description" content="easyui help you build your web page easily!">
  7.      <title>DataGrid inline editing - jQuery EasyUI Demo</title>
  8.      <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/themes/default/easyui.css">
  9.      <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/themes/icon.css">
  10.      <link rel="stylesheet" type="text/css" href="/easyui/jquery-easyui-1.4/easyui/demo/demo.css">
  11.      <script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.min.js"></script>
  12.      <script type="text/javascript" src="/easyui/jquery-easyui-1.4/jquery.easyui.min.js"></script>
  13.      <script>
  14.          var data = {"total":28,"rows":[
  15.              {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
  16.              {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
  17.              {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-11"},
  18.              {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-12"},
  19.              {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-13"},
  20.              {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-14"},
  21.              {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-15"},
  22.              {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-16"},
  23.              {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-17"},
  24.              {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-18"}
  25.          ]};
  26.  
  27.          var products = [
  28.              {productid:'FI-SW-01',name:'Koi'},
  29.              {productid:'K9-DL-01',name:'Dalmation'},
  30.              {productid:'RP-SN-01',name:'Rattlesnake'},
  31.              {productid:'RP-LI-02',name:'Iguana'},
  32.              {productid:'FL-DSH-01',name:'Manx'},
  33.              {productid:'FL-DLH-02',name:'Persian'},
  34.              {productid:'AV-CB-01',name:'Amazon Parrot'}
  35.          ];
  36.          $(function(){
  37.              $('#tt').datagrid({
  38.                  title:'Editable DataGrid',
  39.                  iconCls:'icon-edit',
  40.                  width:660,
  41.                  height:250,
  42.                  singleSelect:true,
  43.                  idField:'itemid',
  44.                  data:data,
  45.                  columns:[[
  46.                      {field:'itemid',title:'Item ID',width:60},
  47.                      {field:'productid',title:'Product',width:100,
  48.                          formatter:function(value){
  49.                              for(var i=0; i<products.length; i++){
  50.                                  if (products[i].productid == value) return products[i].name;
  51.                              }
  52.                              return value;
  53.                          },
  54.                          editor:{
  55.                              type:'combobox',
  56.                              options:{
  57.                                  valueField:'productid',
  58.                                  textField:'name',
  59.                                  data:products,
  60.                                  required:true
  61.                              }
  62.                          }
  63.                      },
  64.                      {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
  65.                      {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'},
  66.                      {field:'attr1',title:'Attribute',width:180,editor:'text'},
  67.                      {field:'status',title:'Status',width:50,align:'center',
  68.                          editor:{
  69.                              type:'checkbox',
  70.                              options:{
  71.                                  on: 'P',
  72.                                  off: ''
  73.                              }
  74.                          }
  75.                      },
  76.                      {field:'action',title:'Action',width:80,align:'center',
  77.                          formatter:function(value,row,index){
  78.                              if (row.editing){
  79.                                  var s = '<a href="#" onclick="saverow(this,'+ index +')">Save</a> ';
  80.                                  var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
  81.                                  return s+c;
  82.                              } else {
  83.                                  var e = '<a href="#" onclick="editrow(this,'+ index +')">Edit</a> ';
  84.                                  var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
  85.                                  return e+d;
  86.                              }
  87.                          }
  88.                      }
  89.                  ]],
  90.                  onBeforeEdit:function(index,row)
  91.                  {
  92.                      row.editing = true;
  93.                      updateActions(index);
  94.                  },
  95.                  onAfterEdit:function(index,row)
  96.                  {
  97.                      row.editing = false;
  98.                      updateActions(index);
  99.                  },
  100.                  onCancelEdit:function(index,row)
  101.                  {
  102.                      row.editing = false;
  103.                      updateActions(index);
  104.                  }
  105.              });
  106.          });
  107.          function updateActions(index)
  108.          {
  109.              $('#tt').datagrid('updateRow',{
  110.                  index: index,
  111.                  row:{}
  112.              });
  113.          }
  114.  
  115.          function getRowIndex(target)
  116.          {
  117.              var tr = $(target).closest('tr.datagrid-row');
  118.              return parseInt(tr.attr('datagrid-row-index'));
  119.          }
  120.  
  121.          function editrow(target, index)
  122.          {
  123.              $('#tt').datagrid('beginEdit', getRowIndex(target));
  124.  
  125.              $("#tt").attr('refreshRow',11);
  126.          }
  127.  
  128.          function deleterow(target)
  129.          {
  130.              $.messager.confirm('Confirm','Are you sure?',function(r){
  131.                  if (r){
  132.                      $('#tt').datagrid('deleteRow', getRowIndex(target));
  133.                  }
  134.              });
  135.          }
  136.  
  137.          function saverow(target, index)
  138.          {
  139.              $('#tt').datagrid('endEdit', getRowIndex(target));
  140.  
  141.              var row = $("#tt").datagrid("getRows");
  142.              console.log(row[index]);
  143.          }
  144.  
  145.          function cancelrow(target)
  146.          {
  147.              $('#tt').datagrid('cancelEdit', getRowIndex(target));
  148.          }
  149.  
  150.          function insert()
  151.          {
  152.              var row = $('#tt').datagrid('getSelected');
  153.              if (row){
  154.                  var index = $('#tt').datagrid('getRowIndex', row);
  155.              } else {
  156.                  index = 0;
  157.              }
  158.              $('#tt').datagrid('insertRow', {
  159.                  index: index,
  160.                  row:{
  161.                      status:'P'
  162.                  }
  163.              });
  164.              $('#tt').datagrid('selectRow',index);
  165.              $('#tt').datagrid('beginEdit',index);
  166.          }
  167.      </script>
  168.  </head>
  169.  <body>
  170.      <h2>Editable DataGrid Demo</h2>
  171.      <div class="demo-info">
  172.          <div class="demo-tip icon-tip">&nbsp;</div>
  173.          <div>Click the edit button on the right side of row to start editing.</div>
  174.      </div>
  175.  
  176.      <div style="margin:10px 0">
  177.          <a href="#" class="easyui-linkbutton" onclick="insert()">Insert Row</a>
  178.      </div>
  179.  
  180.      <table id="tt"></table>
  181.  
  182.  </body>
  183.  </html>

easyui datagrid行内编辑的更多相关文章

  1. ASP.NET MVC5+EF6+EasyUI 后台管理系统（83）-Easyui Datagrid 行内编辑扩展

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

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

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

  3. EasyUI 启用行内编辑

    创建数据网格(DataGrid) $(function(){ $('#tt').datagrid({ title:'Editable DataGrid', iconCls:'icon-edit', w ...

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

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

  5. datagrid行内编辑

    编辑属性 :editor: { type: 'text'} $('#listShow').datagrid({ height : 478, pagesize : 20, pageList : [20, ...

  6. datagrid行内编辑时为datetimebox

    $.extend($.fn.datagrid.defaults.editors, { datetimebox: {// datetimebox就是你要自定义editor的名称 init: functi ...

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

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

  8. easyui datagrid行编辑中数据联动

    easyui的datagrid中行内编辑使用数据联动.即:当编辑产品编号时,该行的产品名称自动根据产品编号显示出来. 在编辑中获取当前行的索引 function getRowIndex(target) ...

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

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

随机推荐

  1. tornado长轮询

    1.什么是长轮询顾名思义,长轮询就是不停循环请求服务器,获取最新信息.长轮询分为两类:1)浏览器以固定时间间隔向服务器发送请求缺点是轮询频率要足够快,但又不能太频繁,否则当成百上千个客户端不断请求,会 ...

  2. Lucene用法10个小结 (zhuan)

    http://www.cfanz.cn/index.PHP?c=article&a=read&id=303149 *********************************** ...

  3. spark读取本地文件

    /** * Read a text file from HDFS, a local file system (available on all nodes), or any * Hadoop-supp ...

  4. [Linux]Linux printf 输出重定向

    方法一 #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <sys/st ...

  5. [Java] 一种好的JAVA分页实现

    喃都不说了,贴代码,意思都在代码里面了 Page.java //分页类.定义分页字段信息,供前台页面使用 package com.core.common; import java.util.List; ...

  6. VMware ESXi 启动时提示引导错误：不是VMware引导槽。找不到管理程序(bank6 not a vmware boot bank no hypervisor found)

    VMware ESXi 启动时提示引导错误: bank6 not a vmware boot bank no hypervisor found 大概中文意思是:不是VMware引导槽.找不到管理程序. ...

  7. MyBatis 本是apache的一个开源项目iBatis

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .20 ...

  8. php -- 设计模式 之 单例模式

    实现单例的条件:三私一公 三私:私有化构造方法:不让外部创建对象 私有化克隆方法:不让外部克隆对象 私有静态属性:保存已经产生的对象 一公:公共静态方法:在类内部创建对象 实例: <?php / ...

  9. 【BZOJ】1024: [SCOI2009]生日快乐（dfs）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1024 果然现在弱到连搜索都不会了么..... 一直想二分...但是无论如何也推不出怎么划分... Q ...

  10. SharePoint Survey WebPart 调查 Web部件

    SharePoint Survey WebPart 调查 Web部件 Web部件下载地址 点击此处下载. 安装激活Web部件 过程简单此处省略. 项目描写叙述 调查是SharePoint中协同门户的一 ...