| Search Invoice | |
| Search ItemName | |
CODE
<html>
<head>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/claro.css"/>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojox/grid/enhanced/resources/claro/EnhancedGrid.css" />
<script src='//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js' data-dojo-config='async: 1, isDebug: 1, parseOnLoad: 1'></script>
</head>
<body class="claro">
<table>
<tr>
<td>Search Invoice</td><td><input data-dojo-type="dijit/form/TextBox" id="filterText1" type="text"></td>
</tr>
<tr>
<td>Search ItemName </td><td> <input data-dojo-type="dijit/form/TextBox" id="filterText2" type="text"></td>
</tr>
<tr>
<td colspan=2>
<button data-dojo-type="dijit/form/Button" onclick="filterGrid()">Search</button>
<button data-dojo-type="dijit/form/Button" onclick="resetFilter()">Clear</button>
</td>
</tr>
</table>
<div style="width: 90%; margin: 10px; height: 450px; min-height: 450px; border: 1px solid #333333;overflow: auto">
<div id="div1" style="height: 445px;width:100%">
</div>
</div>
<br>
<button onclick="alert(JSON.stringify(data))">show current json data</button>
<script>
// load requirements for declarative widgets in page content
require(["dijit/form/TextBox","dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>
<script>
window.getData=function()
{
window.data = [
{ id: 1, col1: "986976", col2: "234", col3: "PC", col4: 234, col5: "Unit", col6: 456, col7: "EGP £" },
{ id: 2, col1: "986976", col2: "354", col3: "Processor", col4: 123, col5: "Unit", col6: 567, col7: "EGP £" },
{ id: 3, col1: "986976", col2: "564", col3: "RAM", col4: 567, col5: "Unit", col6: 234, col7: "EGP £" },
{ id: 4, col1: "986976", col2: "567", col3: "IC", col4: 43, col5: "Unit", col6: 789, col7: "EGP £" },
{ id: 5, col1: "986976", col2: "345", col3: "Mother Board", col4: 766, col5: "Unit", col6: 123, col7: "EGP £" },
{ id: 6, col1: "986976", col2: "24234", col3: "Server", col4: 2334, col5: "Unit", col6: 8797, col7: "EGP £" },
{ id: 7, col1: "3234", col2: "098", col3: "Case", col4: 876, col5: "Unit", col6: 456456, col7: "EGP £" },
{ id: 8, col1: "2342345", col2: "9867", col3: "Mouse", col4: 987, col5: "Unit", col6: 234345, col7: "EGP £" },
{ id: 9, col1: "234535", col2: "876", col3: "Pad", col4: 34, col5: "Unit", col6: 23423, col7: "EGP £" },
{ id: 10, col1: "3242", col2: "8686", col3: "Keyboard", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 11, col1: "234234", col2: "8686", col3: "MAC PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 12, col1: "23423", col2: "8686", col3: "IBM Z Server", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 13, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 14, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 15, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 16, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 17, col1: "23423", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 18, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 19, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 20, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 21, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 22, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 23, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 24, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 25, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" },
{ id: 26, col1: "234234", col2: "8686", col3: "PC", col4: 8777, col5: "Unit", col6: 10, col7: "EGP £" }
];
return data;
}
var grid;
window.startGrid= function(Obj){
require([
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojox/grid/EnhancedGrid",
"dojox/grid/enhanced/plugins/Pagination",
"dojo/domReady!"
], function(cells, cellsDijit, Memory, ObjectStore, locale,EnhancedGrid,Pagination){
gridLayout = [{
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' },
cells: [
{ name: 'Id', field: 'id', editable: false },
{ name: 'Invoice ', field: 'col1', styles: '', width: 10 },
{ name: 'Code ', field: 'col2', styles: '', width: 10 },
{ name: 'ItemName ', field: 'col3', styles: '', width: 10 },
{ name: 'Count', field: 'col4', styles: '', width: 10 },
{ name: 'Unit', field: 'col5', styles: '', width: 10 },
{ name: 'Price', field: 'col6', styles: '', width: 10 },
{ name: 'Currency', styles: 'text-align: center;', field: 'col7', width: 10, type: cells.ComboBox, options: ["EGP £","US $","EURO €"]}
]
}];
data = getData();
var objectStore = new Memory({data:data});
// global var "test_store"
test_store = new ObjectStore({objectStore: objectStore});
grid = new EnhancedGrid({
store: test_store,
structure: gridLayout,
escapeHTMLInData: false,
"class": "grid"
, plugins: {
pagination: {
pageSizes: ["10", "25", "50", "100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 5,
position: "bottom"
}
}
}, document.createElement('div'));
Obj.appendChild(grid.domNode);
grid.startup();
grid._lastScrollTop=grid.scrollTop;
grid._refresh();
grid.on("RowClick", function(evt){
var idx = evt.rowIndex,
rowData = grid.getItem(idx);
console.log(rowData.col1);
}, true);
});
}
startGrid(document.getElementById("div1"));
function filterGrid() {
grid.filter({col1: document.getElementById('filterText1').value+'*',col3:document.getElementById('filterText2').value+'*'});
}
function resetFilter() {
grid.filter({col1: '*',col3: '*'});
document.getElementById('filterText1').value='';
document.getElementById('filterText2').value='';
}
</script>
</body>
</html>
No comments:
Post a Comment