问题
I have this grid which displays some data, that is retrieved from database. I am retrieving the data as a JSON string which comes in the form ::
[{"ActID":16,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"},{"ActID":17,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"}]
Let me put my code first ::
<script type="text/javascript">
function getInfoFromServer(){
$.get("http://anandkr08:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
success:postToPage(result),
alert('Load was performed.');
},"json");
}
function postToPage(data){
alert(data);
var storedata = {
identifier:"ActID",
items: data
};
alert(storedata);
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
var gridStructure =[[
{ field: "ActID",
name: "Activity ID",
classes:"firstName"
},
{
field: "Assigned To",
name: "Assigned To",
classes: "firstName"
},
{ field: "Activity Type",
name: "Activity Type",
classes:"firstName"
},
{
field: "Status",
name: "Status",
classes: "firstName"
},
{
field: "Assigned Date",
name: "Assigned Date",
classes: "firstName"
},
{
field: "Assigned Time",
name: "Assigned Time",
classes: "firstName"
},
{
field: "Email",
name: "SendMail",
formatter: sendmail,
classes: "firstName"
},
{
field: "ActID",
name: "Delete",
formatter: deleteact,
classes: "firstName"
}
]
];
//var grid = dijit.byId("gridDiv");
//grid.setStore(store1);
var grid = new dojox.grid.DataGrid({
store: store1,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true
},'gridDiv');
grid.startup();
dojo.connect(grid, "onRowClick", grid, function(){
var items = grid.selection.getSelected();
dojo.forEach(items, function(item){
var v = grid.store.getValue(item, "ActID");
getdetailsfordialog(v);
function showDialog(){
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
showDialog();
}, grid);
});
}
</script>
HTML code ::
<button id="pendingbutton" type="button" style="height: 50px; width: 100px;" onclick="getInfoFromServer()" value="Get Activities">Get Activities</button></center><br><br><br>
<center><div id="gridDiv" title="Simple Grid">
</div></center>
Now in the above code $.get is called on click of a button (HTML code given above)an data is retrieved from database and grid is displayed for the first time on the page without refreshing the page(as it is called using $.get). Now what i want is when i click the button again. A new data is retrieved( which is working fine, have checked it from alert(data)) but grid is not refreshing itself. I want to refresh the grid without page refreshing. I have tried using setstore(commented out) function but it ain't working for me. Though when i click on a button to get a new data i do get the error in javascript console of google chrome that ::
Tried to register widget with id==gridDiv but that id is already registered
I think its gotta do something with assigning a new id every time a button is clicked. please help me out with the problem. Thanks.
The edited part ::
function initGrid(){
var gridStructure =[[
{ field: "ActID",
name: "Activity ID",
classes:"firstName"
},
{
field: "Assigned To",
name: "Assigned To",
classes: "firstName"
},
{ field: "Activity Type",
name: "Activity Type",
classes:"firstName"
},
{
field: "Status",
name: "Status",
classes: "firstName"
},
{
field: "Assigned Date",
name: "Assigned Date",
classes: "firstName"
},
{
field: "Assigned Time",
name: "Assigned Time",
classes: "firstName"
},
{
field: "Email",
name: "SendMail",
formatter: sendmail,
classes: "firstName"
},
{
field: "ActID",
name: "Delete",
formatter: deleteact,
classes: "firstName"
}
]
];
dojo.ready(function(){
initGrid();
});
My postToPage function ::
function postToPage(data){
alert(data);
var storedata = {
identifier:"ActID",
items: data
};
alert(storedata);
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
grid = dijit.registry.byId("gridDiv");
grid.set("store", store1);
grid.filter();
dojo.connect(grid, "onRowClick", grid, function(){
var items = grid.selection.getSelected();
dojo.forEach(items, function(item){
var v = grid.store.getValue(item, "ActID");
getdetailsfordialog(v);
function showDialog(){
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
showDialog();
}, grid);
});
}
Here i am getting error ::
Cannot call method 'set' of undefined.
I think i have not defined my grid to be a dojogrid. Like this ::
var grid = new dojox.grid.DataGrid
Can u please elaborate what else i need to write in my initgrid() function. Do i need to make any changes in my HTML code. I have defined structure but not assigned the structure. One more i have more than one dojogrid on same page. But my initgrid function is only one, containing only one structure. what changes i need to made so as i will be able to display other grids also ? My other grid are having different structure and each is represented by an ID in <div> element. Like above having an ID "gridDiv". thanks.
回答1:
You get this error because you are trying to create new grid widget each time button is clicked. There are 2 possible solutions: manually destroy existing widget, or create only one instance of grid widget and reuse it.
I think, you don't need to recreate your grid every time data is received from the server. I suggest you to move all your grid initialization logic (including structure, but except store assignment) into new method like initGrid, that will create empty grid. And call it one page load:
dojo.ready(function() {
initGrid();
});
Then, when data received from the server, you can initialize data store and update grid (adjust your postToPage function):
function postToPage(data){
var storedata = {
identifier:"ActID",
items: data
};
var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
var grid = dijit.registry.byId("gridDiv");
grid.set("store", store1);
grid.filter();
}
This should work. Also I suggest you not to use inline CSS styles and center tag.
Update:
You don't need to connect to onRowClick event each time data is updated, so it should be done in initGrid too.
Your initGrid method should look like this:
function initGrid() {
var gridStructure =[[
// declare your structure here
]];
var grid = new dojox.grid.DataGrid({
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true
},'gridDiv');
dojo.connect(grid, "onRowClick", grid, function(){
// onRowClick handler
});
grid.startup();
}
来源：https://stackoverflow.com/questions/10280815/refreshing-dojogrid