Question

我想使用dojo工具更改每个单元格的数据网格背景颜色，但我正在尝试一些事情，但我找不到正确的解决方案。

以下代码用于创建数据网格

 var myStore, dataStore, grid;
    require([
            "dojo/store/JsonRest",
            "dojo/store/Memory",
            "dojo/store/Cache",
            "dojox/grid/DataGrid",
            "dojo/data/ObjectStore",
            "dojo/query",
            "dijit/form/Button",
            "dojo/domReady!"
        ], function (JsonRest, Memory, Cache, DataGrid, ObjectStore, query) {
            myStore = Cache(JsonRest({ target: "/Blog/Action/", idProperty: "Id" }), Memory({ idProperty: "Id" }));
            grid = new DataGrid({
                store: dataStore = ObjectStore({ objectStore: myStore }),
                //  items:dataStore.items,
                structure: [
                    { name: "Blog Id", field: "Id", width: "50px", },
                    { name: "Name", field: "Name", width: "200px",classes:"Name" },
                    { name: "Phone Number", field: "Phone Number", width: "200px",classes:"test" }
                ]
            }, "grid"); // make sure you have a target HTML element with this id

            grid.startup();

            dojo.query("body").addClass("claro");

            grid.canSort = function () { return false };
        });

下面的代码是尝试根据所选值的索引更改颜色，但没有发生任何事情，我的意思是没有错误，但它根本不会进入脚本。

 <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="parseOnLoad: true">
       dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if (row.index == 0) {
            row.customClasses = "highlightRow";
            row.customStyles += 'background-color:#FFB93F;';
        }

    });
</script>

Answer 1

<script>标记内的代码，其中包含'src'永远不会运行。有关如何以AMD方式提供连接模块的信息，请参阅dojo/_base Documentation

这应该有效

 <script type="text/javascript" src="dojo/dojo.js" data-dojo-config="async:true, parseOnLoad: true"></script>

用网格挂钩

 <script type="text/javascript">
    require(["dojo/_base/connect"], function(connect) {
       connect.connect(grid, 'onStyleRow', this, function (row) {
          var item = grid.getItem(row.index);
          if (row.index == 0) {
             row.customClasses = "highlightRow";
             row.customStyles += 'background-color:#FFB93F;';
          }
       });    
    });
</script>

如果您通过标记声明网格，则可以使用此模式：

<div data-dojo-type="dojox.grid.DataGrid" data-dojo-props="???">
  <script type="dojo/method" event="onStyleRow" args="row">
        var item = grid.getItem(row.index);
        if (row.index == 0) {
            row.customClasses = "highlightRow";
            row.customStyles += 'background-color:#FFB93F;';
        } else {
             this.inherited(arguments);
        }
  </script>
</div>

Dojo 1.7 datagrid根据单元格中的文本更改行颜色

1 个答案: