dojo 增强网格过滤器 - 以编程方式设置列 A 大于某个数字
Posted
技术标签:
【中文标题】dojo 增强网格过滤器 - 以编程方式设置列 A 大于某个数字【英文标题】：dojo enhanced grid filter - programatically set column A greater than some number 【发布时间】：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 的查询但是......仅此而已
【问题讨论】：
在主帖中添加了一些代码 【参考方案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%;
【讨论】：
以上是关于dojo 增强网格过滤器 - 以编程方式设置列 A 大于某个数字的主要内容，如果未能解决你的问题，请参考以下文章