刷新DojoGrid [英] Refreshing DojoGrid
问题描述
JSON字符串检索数据，格式为： [{ActID：16Assigned 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，活动类型：fdsf，状态：新建，分配日期：2012-04-20 00:00:00，分配时间：1899-12-30 17:44:00，电子邮件：rakesh.shukla@gmail.com}]
让我先放我的代码::
< script type =text / javascript>
函数getInfoFromServer（）{
$ .get（http：// anandkr08：8080 / 2_8_2012 / jsp / GetJson.jsp？random =+ new Date（）。getTime（），function ）{
success：postToPage（result），
alert（'Load was perform。'）;
}，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，
名称：活动ID，
类：firstName
{
field：Assigned To，
name：Assigned To，
classes：firstName
}
{field：活动类型，
名称：活动类型，
类：firstName
}，
{
字段：状态，
名称：状态，
类：firstName
}，
{
fie ld：Assigned Date，
name：Assigned Date，
classes：firstName
}，
{
field：Assigned时间，
名称：分配时间，
类：firstName
}，
{
字段：电子邮件，
名称：SendMail，
formatter：sendmail，
类：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代码::
< button id =pendingbuttontype =buttonstyle =height：50px; width：100px; onclick =getInfoFromServer（）value =获取活动>获取活动< / button>< / center>< br>< br>< br>
< center>< div id =gridDivtitle =简单网格>
< / div>< / center>
现在上面的代码 $。get 在点击按钮（上面给出的HTML代码）中调用数据，并从页面上首次显示网格，而不刷新页面（因为它使用$ .get调用）。现在我想要的是当我再次点击按钮。检索到一个新的数据（它工作正常，从 alert（data）中检查，但是网格不会自动刷新。我想刷新网格而不刷新页面。我尝试使用 setstore （注释掉）功能，但它不适用于我。虽然当我点击一个按钮来获取一个新的数据时，我会在google chrome的javascript控制台中获得错误，
尝试使用id == gridDiv注册窗口小部件，但该ID已经注册
我认为每次点击一个按钮时，都必须分配一个新的ID。请帮我解决问题。谢谢。
编辑的部分::
function initGrid（）{
var gridStructure = [[
{field：ActID，
名称：活动ID，
类：firstName
}，
{
字段：Assigned To，
名称：Assigned To，
类：firstName
}，
{field：活动类型，
名称：活动类型，
类：firstName
}，
{
字段：状态，
名称：状态，
类：firstName
}
{
字段：分配日期，
名称：分配日期，
类：firstName
}，
{
field：Assigned Time，
name：Assigned Time，
classes：firstName
}，
{
字段：电子邮件，
名称：SendMail，
格式化程序：sendmail，
类：firstName
}，
{
field：ActID，
name：Delete，
formatter：deleteact，
课程：firstName
}
]
];
dojo.ready（function（）{
initGrid（）;
}）;
我的postToPage函数::
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）;
}）;
}
这里我得到错误 ::
无法调用未定义的方法'set'。
我想我没有将我的网格定义为一个 dojogrid。 code>像这样::
var grid = new dojox.grid.DataGrid
你可以详细说明我需要在我的 initgrid（）函数中写什么。我需要对我的HTML代码进行任何更改。我已经定义了结构，但没有分配结构。还有一个我在同一页上有多个dojogrid。但是我的 initgrid 函数只有一个，只包含一个结构。我需要做什么改变，以便我能够显示其他网格？我的其他网格具有不同的结构，每个都由< div> 元素中的ID表示。像上面的ID gridDiv。谢谢。
您会收到此错误，因为您尝试在每次点击按钮时创建新的网格小部件。有两种可能的解决方案：手动破坏现有窗口小部件，或仅创建一个网格窗口实例并重新使用它。
我认为，每次从服务器收到数据时，都不需要重新创建网格。我建议您将所有网格初始化逻辑（包括结构，但存储分配除外）移动到新的方法，如 initGrid ，这将创建空网格。并将其称为一页加载：
dojo.ready（function（）{
initGrid（）;
}）;
然后，当从服务器收到数据时，可以初始化数据存储和更新网格（调整您的 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（）;
}
这应该可以工作。另外我建议你不要使用内联CSS样式和中心标签。
更新：
每次数据更新时，不需要连接到 onRowClick 事件，因此应该完成在 initGrid 中。
您的 initGrid 方法应该像这样：
function initGrid（）{
var gridStructure = [[
//声明你的结构这里
]];
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（）;
}
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.
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();
}
这篇关于刷新DojoGrid的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
