easyui grid单元格类型

在实际应用中可能会碰到不同的需求，比如会根据每行不同的参数或属性设置来设置同列不同的editor类型，这时原有的例子就显的有点太过简单，不能实现我们的需求，现在应用我在项目中的操作为例，显示下实现同列不同操作的情况：（在这，我把例子的情况完全整合到了js里面配置实现，如有习惯于js实现方式的也可参考）

html:

<table id="comTypeAndPropertyTree"></table>//个人觉得这样更显的页面清晰，所有的配置都放到js里实现

js:

var types = [
{typeId:0,typeName:‘Normal‘},
{typeId:1,typeName:‘URL‘},
{typeId:2,typeName:‘Symbol‘}
];

$(function(){
var lastIndex;
$(‘#comTypeAndPropertyTree‘).treegrid({
title:‘产品库配置‘,
height:550,
rownumbers: true,
animate:true,
url:‘getComTypeAndPropertyTreeRoot.action‘,
idField:‘id‘,//id=productId_propId_largetypeId_midlletypeId_comtypeId;
treeField:‘name‘,
frozenColumns:[[
{title:‘名称‘,field:‘name‘,width:300,
formatter:function(value){
return ‘<span style="color:red">‘+value+‘</span>‘;
}
}
]],
columns:[[
{title:‘library‘,field:‘library‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(!row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}},
{title:‘显示名称‘,field:‘displayName‘,width:100,editor:‘text‘},
{title:‘type‘,field:‘type‘,width:100,
editor:{type:‘combobox‘,options:{valueField:‘typeId‘,textField:‘typeName‘,data:types}},
formatter:function(value,row){
if(row.leaf){
for(var i=0; i<types.length; i++){
if (types[i].typeId == value) return types[i].typeName;
}
return types[0].typeName;
}else{
return ‘‘;
}
}
},
{title:‘Expose‘,field:‘expose‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}},
{title:‘Annotate‘,field:‘annotate‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Load‘,field:‘load‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Name Available‘,field:‘nameAvailable‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Value Available‘,field:‘valueAvailable‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Export As OAT‘,field:‘exportAsOAT‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Required‘,field:‘required‘,width:100,editor:{type:‘checkbox‘,options:{on:‘1‘,off:‘0‘}},
formatter:function(value,row){
if(row.leaf){
if(value==1){
return ‘<img src="images/checkbox_checked.jpg"/>‘;
}else{
return ‘<img src="images/checkbox_unchecked.jpg"/>‘;
}
}else{
return ‘‘;
}
}
},
{title:‘Units‘,field:‘units‘,width:100,editor:‘text‘,
formatter:function(value,row){
if(row.leaf){
return value;
}else{
return ‘‘;
}
}},
{title:‘VM‘,field:‘vm‘,width:100,editor:‘text‘,
formatter:function(value,row){
if(row.leaf){
return value;
}else{
return ‘‘;
}
}}
]]
,onClickRow:function(row){//运用单击事件实现一行的编辑结束，在该事件触发前会先执行onAfterEdit事件
var rowIndex = row.id;
if (lastIndex != rowIndex){
$(‘#comTypeAndPropertyTree‘).treegrid(‘endEdit‘, lastIndex);
}
}
,onDblClickRow:function(row){//运用双击事件实现对一行的编辑
var rowIndex = row.id;
if (lastIndex != rowIndex){
$(‘#comTypeAndPropertyTree‘).treegrid(‘endEdit‘, lastIndex);
$(‘#comTypeAndPropertyTree‘).treegrid(‘beginEdit‘, rowIndex);
lastIndex = rowIndex;
}
}
,onBeforeEdit:function(row){
beforEditRow(row);//这里是功能实现的主要步骤和代码
}
,onAfterEdit:function(row,changes){
var rowId = row.id;
$.ajax({
url:"saveProductConfig.action" ,
data: row,
success: function(text){
$.messager.alert(‘提示信息‘,text,‘info‘);
}
});
}
});
});
function beforEditRow(row){//这个是核心的，很有用的，如有同样需求的话可以借鉴实现
var libraryCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘library‘);
var exposeCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘expose‘);
var annotateCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘annotate‘);
var loadCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘load‘);
var nameAvailableCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘nameAvailable‘);
var valueAvailableCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘valueAvailable‘);
var exportAsOATCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘exportAsOAT‘);
var requiredCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘required‘);

var unitsCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘units‘);
var vmCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘vm‘);

var typeCoclum = $(‘#comTypeAndPropertyTree‘).treegrid(‘getColumnOption‘,‘type‘);

var checkboxOptionsObj = new Object();
checkboxOptionsObj.on=‘1‘;
checkboxOptionsObj.off=‘0‘;
var checkboxEditorObj = new Object();
checkboxEditorObj.type=‘checkbox‘;
checkboxEditorObj.options=checkboxOptionsObj;

var comboboxOptionsObj = new Object();
comboboxOptionsObj.valueField=‘typeId‘;
comboboxOptionsObj.textField=‘typeName‘;
comboboxOptionsObj.data=types;
var comboboxEditorObj = new Object();
comboboxEditorObj.type=‘combobox‘;
comboboxEditorObj.options=comboboxOptionsObj;
if(row.leaf){
libraryCoclum.editor=null;
exposeCoclum.editor=checkboxEditorObj;
annotateCoclum.editor=checkboxEditorObj;
loadCoclum.editor=checkboxEditorObj;
nameAvailableCoclum.editor=checkboxEditorObj;
valueAvailableCoclum.editor=checkboxEditorObj;
exportAsOATCoclum.editor=checkboxEditorObj;
requiredCoclum.editor=checkboxEditorObj;

unitsCoclum.editor=‘text‘;
vmCoclum.editor=‘text‘;

typeCoclum.editor=comboboxEditorObj;
}else{
libraryCoclum.editor=checkboxEditorObj;
exposeCoclum.editor=null;
annotateCoclum.editor=null;
loadCoclum.editor=null;
nameAvailableCoclum.editor=null;
valueAvailableCoclum.editor=null;
exportAsOATCoclum.editor=null;
requiredCoclum.editor=null;

unitsCoclum.editor=null;
vmCoclum.editor=null;

typeCoclum.editor=null;
}
}

实现效果图：实现流程：onDblClickRow --（ onBeforeEdit -- onAfterEdit） -- onClickRow，操作上只需要双击和单击两个事件来完成操作，而另两个事件是在中间自动实现完成。

原文：https://www.cnblogs.com/bingru/p/10384252.html