1、首先打开Jquery-Easy-UI官方网站http://www.jeasyui.net/，打开网站后如下图，点击菜单栏Easy-UI下载，如下所示：
2、第二步，下载我们所需要的插件包保存在本地，如下图所示：
3、第三步 下载完成后使用解压工具进行解压，并保存在本地文件夹中，稍后提取所需要的包和样式库，如下图所示：
4、第四步 创建网页项目demo用于展示开发效果，在本地磁盘目录下创建项目文件夹并创建文件ce盟敢势袂llediting.html文件如下图所示：部分源码展示
5、第五步 提取源码包中的所需文件，打开Easy-UI解压的文件夹提取如下图所示，从解压包中复制下面的文件到项目文件夹目录，如下图所示：
6、第六步，修改项目文件cellediting.html,源码如下，关键代码已经加粗显示：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Cell Editing in DataGrid - jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="./src/css/easyui.css"><link rel="stylesheet" type="text/css" href="./src/css/icon.css"><link rel="stylesheet" type="text/css" href="./src/css/demo.css"><script type="text/javascript" src="./src/js/jquery.min.js"></script><script type="text/javascript" src="./src/js//jquery.easyui.min.js"></script></head><body style="margin:0 auto;text-align:center"><h2>Cell Editing in DataGrid</h2><p>Click a cell to start editing.</p><div style="margin:20px 0;"></div> <div style="margin:0 auto;text-align:center"> <body class="easyui-layout"><div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"><table id="dg" class="easyui-datagrid" title="Cell Editing in DataGrid" style="height:auto;text-align:center"data-options="iconCls: 'icon-edit',singleSelect: true,url: './json/datagrid_data1.json',method:'get'"><thead><tr><th data-options="field:'itemid',width:80">Item ID</th><th data-options="field:'productid',width:100,editor:'text'">Product</th><th data-options="field:'listprice',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}">List Price</th><th data-options="field:'unitcost',width:80,align:'right',editor:'numberbox'">Unit Cost</th><th data-options="field:'attr1',width:250,editor:'text'">Attribute</th><th data-options="field:'status',width:60,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">Status</th></tr></thead></table></div></body> </div><script type="text/javascript">$.extend($.fn.datagrid.methods, {editCell: function(jq,param){return jq.each(function(){var opts = $(this).datagrid('options');var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));for(var i=0; i<fields.length; i++){var col = $(this).datagrid('getColumnOption', fields[i]);col.editor1 = col.editor;if (fields[i] != param.field){col.editor = null;}}$(this).datagrid('beginEdit', param.index);var ed = $(this).datagrid('getEditor', param);if (ed){if ($(ed.target).hasClass('textbox-f')){$(ed.target).textbox('textbox').focus();} else {$(ed.target).focus();$(ed.target).css({'background':'red','color':'#ffffff'});}for(var i=0; i<fields.length; i++){var col = $(this).datagrid('getColumnOption', fields[i]);col.editor = col.editor1;}}});},enableCellEditing: function(jq){return jq.each(function(){var dg = $(this);var opts = dg.datagrid('options');opts.oldOnClickCell = opts.onClickCell;opts.onClickCell = function(index, field){ var thisSty = dg.datagrid('getColumnOption',field); // 当前单元格点击事件if (opts.editIndex != undefined){if (dg.datagrid('validateRow', opts.editIndex)){dg.datagrid('endEdit', opts.editIndex);opts.editIndex = undefined;} else {return;}}dg.datagrid('selectRow', index).datagrid('editCell', {index: index,field: field});opts.editIndex = index;opts.oldOnClickCell.call(this, index, field);}});}});$(function(){$('#dg').datagrid('reload').datagrid('enableCellEditing');})</script></body></html>保存文件并使用谷歌或者其他浏览器打开文件（推荐使用谷歌浏览器）。效果展示如下：点击单元格，并出现项目效果：
