Ayy*_*udy 3 javascript dojo dojox.grid
我有以下代码与具有两列Column_A和 的DataGrid 一起使用Column_B:
grid.filter({Column_A: '*test*', Column_B: '*'}, true)
Run Code Online (Sandbox Code Playgroud)
这段代码工作正常,并找到所有Column_A包含单词 test 的行...现在,我想做同样的事情,但在任一列中查找...逗号转换为 AND 操作,但我正在寻找一个或运算。
我阅读了AndOrReadStore 规范,根据我的理解,我应该能够执行以下操作:
grid.filter({complexQuery: "Column_A: '*test*' OR Column_B: '*'"}, true)
Run Code Online (Sandbox Code Playgroud)
然而这不起作用,我没有得到任何结果...我什至无法让它与一列一起工作,就像这样
grid.filter({complexQuery: "Column_A: '*test*'"}, true)
Run Code Online (Sandbox Code Playgroud)
我究竟做错了什么?
谢谢
以下是一个有效的编程示例(单击按钮调用过滤器:Column_A 包含 e 或 Column_B 为 300):
JavaScript(script.js):
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojox.data.AndOrReadStore');
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'}
]
};
var store = new dojox.data.AndOrReadStore({
data: data
});
var layout = [[
{name : 'A', field : 'Column_A', width : '125px'},
{name : 'B', field : 'Column_B', width : '100%'}
]];
var grid = new dojox.grid.DataGrid({
structure : layout,
store: store,
queryOptions: {ignoreCase: true}
});
var filterButton = new dijit.form.Button({
label: "Filter",
onClick: function () {
grid.filter({complexQuery: "Column_A: '*e*' OR 'Column_B: '300'"});
}
});
filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);
appLayout.startup();
});
Run Code Online (Sandbox Code Playgroud)
现在是 html (index.html)
<html lang="en">
<head>
<meta charset="utf-8">
<title>DataGrid with AndOrReadStore</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>
Run Code Online (Sandbox Code Playgroud)
最后是 css (style.css)
html, body {
width: 100%; height: 100%;
margin: 0; padding: 0;
overflow: hidden;
}
#appLayout {
width: 100%; height: 100%;
}
Run Code Online (Sandbox Code Playgroud)