datagrid 单击单元格如何设置颜色
1、首先打开Jquery-Easy-UI官方网站http://www.jeasyui.net/，打开网站后如下图，点击菜单栏Easy-UI下载，如下所示：
2、第二步，下载我们所需要的插件包保存在本地，如下图所示：
3、第三步 下载完成后使用解压工具进行解压，并保存在本地文件夹中，稍后提取所需要的包和样式库，如下图所示：
4、第四步 创建网页项目demo用于展示开发效果，在本地磁盘目录下创建项目文件夹并创建文件cellediting.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>
Click a cell to start editing.
<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>
保存文件并使用谷歌或者其他浏览器打开文件（推荐使用谷歌浏览器）。效果展示如下：点击单元格，并出现项目效果：
