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

【问题标题】：dojo enhanced grid filter - programatically set column A greater than some numberdojo 增强网格过滤器 - 以编程方式设置列 A 大于某个数字
【发布时间】：2011-07-08 10:45:33
【问题描述】：

我正在尝试以编程方式在 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 的查询但是......仅此而已

【问题讨论】：

在主帖中添加了一些代码

标签： javascript dojo grid

【解决方案1】：

在做

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

可行，但我认为它的效率相当低，我希望有一个更好、更清洁、更快的解决方案。

【讨论】：

是的，不幸的是过滤仅限于正则表达式。是否可以使用不同的数据存储实现？
是的，当然。只要它也是可写的。为什么？其他数据存储有将列与某些数据进行比较的实现吗？基本上，“过滤器”插件能够做到这一点，但我找不到任何关于如何以编程方式做到这一点的例子。我只能通过点击来完成。
我只是在想，例如一个 JsonRestStore 您已经可以在后端过滤元素 - 也就是说，当您的网格请求 all 元素时，您只需将 filtered elements 发送给它。跨度>
我正在制作一个仅支持 JavaScript 的应用程序 :)
呵呵，那么我看到你唯一能做的就是继承 ItemFileWriteStore 或通过遍历列单元格并通过 CSS 隐藏单元格来自行过滤。

【解决方案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%;
}

【讨论】：