dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
188 lines (186 loc) • 6.07 kB
HTML
<html dir="ltr">
<head>
<title>Test Search plugin of dojox.grid.EnhancedGrid</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<link rel=stylesheet href="support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0.5em;
}
.title {
text-align:center;
margin:1em;
}
#grid{
width: 90em;
height: 30em;
}
.outerdiv{
position: relative;
height: 300px;
width: 300px;
background-color:blue;
}
.innerdiv{
display:block;
position: absolute;
height: 100px;
width: 100px;
left: 50px;
top: 50px;
background-color:red;
}
.innerBtn{
position: absolute;
height: 100px;
width: 100px;
right: 50px;
bottom: 50px;
background-color:yellow;
}
</style>
<script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="isDebug:true, parseOnLoad: true"></script>
<script type="text/javascript" src="../../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Search");
dojo.require("dojo.parser");
var layout = [{
cells: [
{ field: "id", name:"Identity", datatype:"number", width: 4, editable: false},
{ field: "Genre", name:"Genre", datatype:"string", width: 10},
{ field: "Artist", name:"Artist", datatype:"string", width: 10},
{ field: "Year", name:"Year", datatype:"string", width: 2.5},
{ field: "Album", name:"Album", datatype:"string", width: 10},
{ field: "Name", name:"Name", datatype:"string", width: 8},
{ field: "Length", name:"Length", datatype:"string", width: 4},
{ field: "Track", name:"Track", datatype:"number", width: 3},
{ field: "Composer", name:"Composer", datatype:"string", width: 12},
{ field: "Download Date", name:"Download Date", datatype:"date", width: 12},
{ field: "Last Played", name:"Last Played", datatype:"time", width: 6},
{ field: "Heard", name: "Checked", datatype:"boolean", width: 6}
]
}];
var plugins = {
search: true
};
var getInput = function(str){
var start = str.indexOf('/');
var end = str.lastIndexOf('/');
if(start == 0 || end > 1){
var regstr = str.substring(start + 1, end);
var modifiers = str.substring(end + 1, str.length);
str = new RegExp(regstr,modifiers);
}
console.log("input:", str);
return str;
};
var onSearched = function(resultId, rowIdx){
console.log("search result:", rowIdx);
if(rowIdx < 0){
dojo.byId(resultId).innerHTML = "Not Found!";
}else{
dojo.byId(resultId).innerHTML = "Search result is Row " + (rowIdx + 1);
dijit.byId("grid").scrollToRow(rowIdx, true);
}
};
var onSearch = function(){
var args = {};
dojo.query(".searchInput").forEach(function(input){
var v = dojo.trim(input.value);
if(v){
args[input.name] = getInput(v);
}
});
console.log("search arguments:", args);
dijit.byId("grid").searchRow(args, dojo.partial(onSearched, "result2"));
};
var onSearchAll = function(input){
dijit.byId("grid").searchRow(getInput(input), dojo.partial(onSearched, "result1"));
};
</script>
<script type="text/javascript" src="support/test_write_store_music.js"></script>
</head>
<body class="claro">
<h1 class="title" tabindex="0"
onfocus="console.log('focus a'),this.style.color='red';"
onblur="console.log('blur a'),this.style.color='black';">
dojox.grid.EnhancedGrid - Search</h1>
<div id="gridContainer">
<div id="grid" dojoType="dojox.grid.EnhancedGrid" store="test_store[0]" structure="layout" plugins="plugins"></div>
</div><br/>
<br />
Note: Use "/.../" for Regular Expressions. Wildcards (* and ?) are available when not using "/.../".
<hr />
<div>Search all columns for<input id="allcolumnsInput" type="text" size="30" value="/void/i" />
<button onclick="onSearchAll(dojo.byId('allcolumnsInput').value)">Go =></button>
<span id="result1"></span>
<hr />
Search with a query object (extends the functionality of the standard store query).
<table>
<thead>
<tr>
<th>Column</th>
<th>Query String or Regular Expression</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td><input name="id" class="searchInput" type="text" size="30" /></td>
<td rowspan="11" align="center" valign="center" style="padding-left: 50px;">
<button onclick="onSearch()">Search =></button>
<span id="result2"></span>
</td>
</tr>
<tr>
<td>Genre</td>
<td><input name="Genre" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Artist</td>
<td><input name="Artist" class="searchInput" type="text" size="30" value="/an/i" /></td>
</tr>
<tr>
<td>Year</td>
<td><input name="Year" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Album</td>
<td><input name="Album" class="searchInput" type="text" size="30" value="/t.*t/i" /></td>
</tr>
<tr>
<td>Name</td>
<td><input name="Name" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Length</td>
<td><input name="Length" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Track</td>
<td><input name="Track" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Composer</td>
<td><input name="Composer" class="searchInput" type="text" size="30" value="*ss*" /></td>
</tr>
<tr>
<td>Download Date</td>
<td><input name="Download Date" class="searchInput" type="text" size="30" /></td>
</tr>
<tr>
<td>Last Played</td>
<td><input name="Last Played" class="searchInput" type="text" size="30" /></td>
</tr>
</tbody>
</table>
<p><strong>Note:</strong> To see the tundra theme, just append <b style="color:blue;">?theme=tundra</b> to the URL.</p>
</body>
</html>