c#-在Odata Controller中基于ImageKey将图像加载到igGrid列中
作者：互联网
我已经建立了这个模型：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace aSa.Web.Scheduling.Models
{
public class Trailer
{
[Key]
public int TrailerKey { get; set; }
public string TrailerID { get; set; }
public string TrailerDesc { get; set; }
public string FabLocID { get; set; }
public double MaxWgt { get; set; }
public int TrailerImgKey { get; set; }
}
}
我为其设置了带有实体框架的Web API 2 OData控制器.我正在使用来自此控制器的odata来填充我的IgniteUI igGrid.这是我对此网格的设置：
$('#gridTrailers').igGrid({
odata: true,
autoGenerateColumns: false,
autoGenerateLayouts: true,
responseDataKey: 'value',
dataSource: clientDS,
updateUrl: '/odata/Trailers',
primaryKey: 'TrailerKey',
width: '100%',
height: '500',
enableCheckBoxes: true,
columns: [
{ headerText: 'Trailer Key', key: 'TrailerKey', dataType: 'string', width: '100px' },
{ headerText: 'Trailer ID', key: 'TrailerID', width: '200px' },
{ headerText: 'Description', key: 'TrailerDesc', width: '100px' },
{ headerText: 'FabLocID', key: 'FabLocID', width: '100px' },
{ headerText: 'Max Weight', key: 'MaxWgt', width: '100px' },
{ headerText: 'Trailer', key: 'TrailerImgKey', width: '100px' },
],
features:
[
{
name: 'Sorting',
type: 'local'
},
{
advancedModeEditorsVisible: true,
name: 'Filtering',
caseSensitive: false,
type: 'local', //I think this can be local now
//mode: 'advanced',
FilterExprUrlKey: 'filter',
columnSettings: [
{ columnKey: 'TrailerKey', allowFiltering: false },
{ columnKey: 'TrailerImgKey', allowFiltering: false }
]
},
{
name: 'ColumnMoving'
},
{
mouseDragSelect: false,
multipleSelection: true,
touchDragSelect: false,
name: 'Selection',
},
{
editMode: 'cell',
startEditTriggers: 'dblclick',
name: 'Updating',
enableAddRow: true,
enableDeleteRow: true
},
{
name: 'Resizing'
},
{
name: 'Hiding'
}
],
});
当前,我正在使用一个具有TrailerImageKey的旧数据库,该数据库与该应用程序旧版中的其他数据库已加载的特定图片相关.现在,我的项目中有一个名为“ TrailerImages”的文件夹.我目前正在尝试寻找一种方法来设置网格的最后一列,以基于TrailerImageKey显示特定的预告片图像.
我知道我在这里设置专栏：
columns: [
{ headerText: 'Trailer Key', key: 'TrailerKey', dataType: 'string', width: '100px' },
{ headerText: 'Trailer ID', key: 'TrailerID', width: '200px' },
{ headerText: 'Description', key: 'TrailerDesc', width: '100px' },
{ headerText: 'FabLocID', key: 'FabLocID', width: '100px' },
{ headerText: 'Max Weight', key: 'MaxWgt', width: '100px' },
{ headerText: 'Trailer', key: 'TrailerImgKey', width: '100px' },
],
我想知道是否可以做类似的事情：
{ headerText: 'Trailer', key: 'TrailerImgKey', width: '100px', dataType: "object",
template: "<img width='100' height='90' src={{>val}}></img>", formatter: function(val){
switch(TrailerImageKey) {
case 1:
val = 'C:\Source_Code\Web\MyApp\TrailerImages\RedTrailer.png'
break;
case 2:
val = 'C:\Source_Code\Web\MyApp\TrailerImages\RedTrailer.png'
break;
default:
val = ''
}
}
},
我觉得自己已经接近正确的想法,但是对IgniteUI和基础设施相当陌生,并且很难使其正常工作.如果有人对我如何基于Odata中的TrailerImageKey将图像加载到igGrid中提出建议,我将不胜感激.
解决方法:
我想通了：
{ headerText: 'Trailer', key: 'TrailerImgKey', width: '100px', dataType: 'object', template: "<img width='150' height='90' src='${TrailerImgKey}' />", formatter: LoadImages}
LoadImages函数：
function LoadImages(val){
switch (val) {
case 1: val = '/Images/TrailerImages/FlatbedBlueEmpty.gif'; break;
case 2: val = '/Images/TrailerImages/FlatBedGreenEmpty.jpg'; break;
case 3: val = '/Images/TrailerImages/FlatBedPurpleEmpty.jpg'; break;
case 4: val = '/Images/TrailerImages/PickupBlueEmpty.jpg'; break;
case 5: val = '/Images/TrailerImages/PickupGreenEmpty.jpg'; break;
case 6: val = '/Images/TrailerImages/PickupRedEmpty.jpg'; break;
case 7: val = '/Images/TrailerImages/SmallFlatbedBlueEmpty.jpg'; break;
case 8: val = '/Images/TrailerImages/SmallFlatbedGreenEmpty.jpg'; break;
case 9: val = '/Images/TrailerImages/SmallFlatbedPurpleEmpty.jpg'; break;
default: val = '';
}
return val;
}
标签：infragistics,odata,iggrid,c,entity-framework 来源： https://codeday.me/bug/20191029/1958890.html