Обновление DojoGrid
У меня есть эта сетка, которая отображает некоторые данные, которые извлекаются из базы данных. Я получаю данные как JSON string который приходит в виде::
[{"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"}]
Позвольте мне поставить мой код первым:
<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 код::
<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>
Теперь в приведенном выше коде $.get вызывается нажатием кнопки (приведенный выше HTML-код), данные извлекаются из базы данных, и сетка впервые отображается на странице без обновления страницы (как это вызывается с помощью $.get). Теперь я хочу снова нажать кнопку. Получены новые данные (которые работают нормально, проверили их из alert(data)) но сетка сама по себе не освежает. Я хочу обновить сетку без обновления страницы. Я пытался использовать setstore(закомментировано) функция, но она не работает для меня. Хотя, когда я нажимаю на кнопку, чтобы получить новые данные, я получаю error в консоли JavaScript Google Chrome, что::
Tried to register widget with id==gridDiv but that id is already registered
Я думаю, что нужно что-то делать с назначением нового идентификатора при каждом нажатии кнопки. пожалуйста, помогите мне с проблемой. Благодарю.
Отредактированная часть::
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();
});
Моя функция 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);
});
}
Здесь я получаю error::
Cannot call method 'set' of undefined.
Я думаю, что я не определил мою сетку, чтобы быть dojogrid. Как это::
var grid = new dojox.grid.DataGrid
Можете ли вы уточнить, что еще мне нужно написать в моем initgrid() функция. Нужно ли мне вносить какие-либо изменения в мой HTML-код. Я определил структуру, но не назначил структуру. Еще один, у меня есть более одного dojogrid на одной странице. Но мой initgrid Функция только одна, содержащая только одну структуру. Какие изменения мне нужно сделать, чтобы я мог отображать и другие сетки? Моя другая сетка имеет различную структуру, и каждый представлен идентификатором в <div> элемент. Как и выше, имея идентификатор "gridDiv", Благодарю.
1 ответ
Вы получаете эту ошибку, потому что вы пытаетесь создать новый виджет сетки каждый раз, когда нажимаете кнопку. Есть 2 возможных решения: вручную уничтожить существующий виджет или создать только один экземпляр виджета сетки и использовать его повторно.
Я думаю, вам не нужно пересоздавать вашу сетку каждый раз, когда данные поступают с сервера. Я предлагаю вам переместить всю вашу логику инициализации сетки (включая структуру, но кроме назначения магазина) в новый метод, такой как initGrid, что создаст пустую сетку. И назовите это загрузкой одной страницы:
dojo.ready(function() {
initGrid();
});
Затем, когда данные получены с сервера, вы можете инициализировать хранилище данных и обновить сетку (настройте postToPage функция):
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 и center тег.
Обновить:
Вам не нужно подключаться к onRowClick событие каждый раз, когда данные обновляются, поэтому это должно быть сделано в initGrid тоже.
Ваш initGrid метод должен выглядеть так:
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();
}