Dgrid - 显示数字标签(即02 = Cat)我想显示Cat - 而不是数字

时间:2015-06-16 11:59:12

标签: javascript database dojo dgrid

在我的Dgrid中,我有一个列,显示事件的代码(数字格式)。 enter image description here

我想在dgrid中显示标签而不是数字。所以如果1 = Cat。在数据库中它显示为1 - 但我想显示“Cat'在dgrid。无法找到有关如何执行此操作的任何内容。

帮助或指导方向会有所帮助。谢谢!

更新:6.16.15

这是代码。我能展示的内容有限。 enter image description here

这些是一些代码。 02 = XXXXX,03 = XXXXX1,依此类推。现在,dgrid显示数字。它有点像钥匙。我需要它来显示数字在dgrid中表示的内容,而不是数字。所以02应该显示' Traffic Stop'。不知道如何做一个jsfiddle,而且目前还没有多少额外的时间。我限制了我可以提供的信息,所以我必须重新创建一个虚拟版本。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>XXXXXXXX Events</title>
    <link rel="stylesheet" href="/static/web_ui/dgrid/css/skins/slate.css">

<h1>XXXXXXXX Events</h1>

<form id="queryForm">
        <label for="XXXXXField">XXXXX Type contains:</label>
        <input id="XXXXXField" name="event_type">
        <button type="submit">Filter</button>
        <button type="reset">Reset</button>
    </form>


    <script src="/static/web_ui/dojo/dojo.js"
        data-dojo-config="async: true"></script>

    <script>
        require([
            'dojo/_base/declare',
            'dojo/dom',
            'dojo/on',
            'dstore/Rest',
            'dstore/Request',
            'dgrid/extensions/ColumnResizer',
            'dgrid/extensions/ColumnReorder',
            'dgrid/CellSelection',
            'dgrid/extensions/DijitRegistry',
        //  'dstore/Memory',
        //  'dstore/Trackable',
        //   'dstore/Cache',
            'dgrid/OnDemandGrid'
        //  'dojo/domReady!'
], function (declare, dom, on, Rest, Request, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry, OnDemandGrid) {
        var store = new Rest({target:'/api/XXXXXXEvents/?format=json',
            sortParam: 'ordering', ascendingPrefix:'', descendingPrefix:'-'
    });


    //  var cacheStore = Cache.create(store, {
    //      cachedStore: new (Memory.createSubclass(Trackable)) ()
    //  });

        var grid = window.grid = new (declare([OnDemandGrid, ColumnResizer, ColumnReorder, CellSelection, DijitRegistry])) ({
        collection: store,
        selectionMode: 'single',
        sort: 'id',
    //    idProperty: 'id',

        columns: [
            {field: 'id', label:'ID', resizeable: false},
            {field: 'XXXXX_type', label:'XXXXX Type', resizeable: false},
            {field: 'XXXXX_at', label:'XXXXX Time', resizeable: false},
            {field:'XXXXX', label:'XXXXX Count', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false},
            {field:'XXXXX_info', label:'XXXXX Info', resizeable: false},
            {field:'hidden', label:'Hidden', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false},
            {field:'XXXXX', label:'XXXXX', resizeable: false}
        ]

    }, 'grid');

 grid.startup();    

    on(dom.byId('queryForm'), 'submit', function(event) {
                event.preventDefault();
                grid.set('collection', store.filter({
                    // Pass a RegExp to Memory's filter method
                    // Note: this code does not go out of its way to escape
                    // characters that have special meaning in RegExps
                    last: new RegExp("^\d+$")
                }));
            });

            on(dom.byId('queryForm'), 'reset', function() {
                // Reset the query when the form is reset
                grid.set('collection', store);
            });

    });

    </script>

</head>

 <body class="slate">
<div id="grid"></div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

您需要使用列格式化程序功能来渲染数据。

在此处查看jsfiddle

查看here

上的示例

我已经采用this示例并根据您的需要进行了修改。

require([
    'dgrid/Grid',
    'dojo/domReady!'
], function(Grid) {
    var data = [

        { id: 1, number: 7 },
        { id: 2, number: 8 },
        { id: 3, number: 9 }
    ];

    function testFormatter(item){
                //console.log(item,typeof(item));
                var newItem;
                if ( item == 7 ) 
                    newItem = 'Dog'
                else if ( item == 8 )
                    newItem = 'Cat'
                 else if ( item == 9 )
                    newItem = 'Bird'
         return newItem;

    }

    var columnsFormatter = [
                {
                    label: "Number",
                    field: "number",
                    formatter: testFormatter
                }
            ];

    var grid = new Grid({
        columns: columnsFormatter
    }, "gridcontainer");;
    grid.renderArray(data);
});