标签：infragistics odata iggrid c entity-framework

我已经建立了这个模型：

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。