Question

我正在尝试以编程方式在dojo网格上设置过滤器，以便某些列大于某个数字。
我有一个数量列，我希望设置一个过滤器，使数量大于（或不同）零。

谢谢！

所以代码看起来像这样：

dojo.require("dojox.grid.EnhancedGrid");
var storage = new dojo.data.ItemFileWriteStore({data: data});
var layout = [ { field: 'id', name: '# ID', width: '60px' },
               { field: 'name', name: 'Nume produs', width: '200px' },
               { field: 'qty', name: 'QTY', alwaysEditing: true, editable: true }
];
var grid = new dojox.grid.EnhancedGrid({
    store: storage,
    structure: layout,
    plugins: { filter : true },
}, 'grid');
grid.startup();

我猜我应该做一个过滤器或查询，但我真的不知道如何比较两件事，我发现的唯一一件事就是我可以使用RegEx的查询但是......这就是

Answer 1

做

var grid = new dojox.grid.EnhancedGrid({
    query: { 'qty' : new RegExp('^[1-9]+[0-9]*$') }, 
    store: storage,
    structure: layout,
    plugins: { filter : true },
}, 'grid');

有效，但我相信它效率很低，我希望有一个更好，更清洁，更快的解决方案。

Answer 2

以下是我最终做类似的事情：

基本思想是添加一个不可见的列。当您要测试的值符合您的条件（大于某个值，或在我的情况下在某个范围内）时，将不可见列设置为“Y”，否则将其设置为“N”。然后过滤很简单：invisibleColumn：'Y'。

以下显示Column_B值介于100-500之间的网格。单击按钮激活过滤器以仅显示150-350之间的值。它是一个完整的工作示例，分为三个部分（javascript，HTML，CSS）：

JavaScript（script.js）

dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");


dojo.ready(function(){  
var appLayout = new dijit.layout.ContentPane({
    id: "appLayout"
}, "appLayout");

var data = {
  'items': [
    {'Column_A': 'alpha', 'Column_B': 100},
    {'Column_A': 'beta',  'Column_B': 200},
    {'Column_A': 'gamma', 'Column_B': 300},
    {'Column_A': 'delta', 'Column_B': 400},
    {'Column_A': 'epsilon', 'Column_B': 500}
  ]
};
var store = new dojo.data.ItemFileReadStore({
    data: data      
});


var layout = [[ 
  {name : 'A', field : 'Column_A', width : '125px'},
  {name : 'B', field : 'Column_B', width : '125px%'}
]];


var grid = new dojox.grid.DataGrid({
    structure : layout,
    store: store,
    queryOptions: {ignoreCase: true}
});


var filterButton = new dijit.form.Button({
    label: "Filter",
    onClick: function () {
        var determineRange = function (items, request) {
            for (var i = 0; i < items.length; ++i) {
                items[i].invisibleColumn = (items[i].Column_B > 150 && items[i].Column_B < 350) ? 'Y' : 'N';
            }
            grid.filter({invisibleColumn: 'Y'});
        };
        store.fetch({onComplete: determineRange});  
    }
});


filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);


appLayout.startup();
});

html（index.html）

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Filter by range</title>

    <link rel="stylesheet" href="style.css" media="screen"/>   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/document.css" />   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/layout/resources/ExpandoPane.css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
  </head>

  <body class="claro">
    <div id="appLayout"></div>
  </body>
</html>

最后是CSS（style.css）

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0; 
  overflow: hidden;     
}   

#appLayout {
  width 100%; height: 100%;
}

dojo增强型网格过滤器 - 以编程方式设置列A大于某个数字

2 个答案: