Как отфильтровать додзё DataGrid?
У меня есть DataGrid, который я уже отфильтровал с помощью grid.filter (запрос, повторная визуализация). Если я добавляю еще один элемент, после вызова save() я вижу новый элемент в сетке, хотя он не должен отображаться из-за фильтра. Я думаю: "Хорошо, я просто отфильтрую это снова, когда магазин закончит сохранение. Но после вызова grid.filter с тем же запросом все строки исчезнут. Есть идеи, что я могу делать неправильно?
Код для фильтрации сетки:
var filterQuery = dijit.byId("filterTextbox").attr("value");
var grid = dijit.byId("grid");
var queryValue = "*";
if(filterQuery != ""){
queryValue += filterQuery + "*";
}
grid.filter({name: queryValue}, true);
Код для добавления новых элементов в сетку
function addItemToGrid(newItemName){
var newItem = {name: newItemName};
var grid = dijit.byId("grid");
var store = grid.store;
store.addItem(newItem);
store.save();
}
3 ответа
Попробуй использовать:
store.newItem(newItem);
вместо store.addItem(newItem); (addItem не является стандартным методом для добавления предметов в магазин)
Внутри функции addItemToGrid попробуйте добавить прослушиватель onComplete в свой метод сохранения и отсортируйте или отфильтруйте сетку в функции onComplete.
store.save({onComplete: function() {
grid.filter({name: queryValue}, true);
}
});
У меня была та же проблема, и мне удалось ее исправить, только периодически запуская сеточный фильтр в фоновом режиме с помощью некоторого jQuery. Вот пример кода; надеюсь, это поможет кому-то еще, имеющему проблемы с этим.
// ADD JQUERY
<script src="http://code.jquery.com/jquery-latest.js"></script>
,
// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
$(document).ready(function() {
function filterTheDataGrid() {
if (dijit.byId("grid") != undefined) {
dijit.byId("grid").filter({color: "Red"});
}
}
// RUN THE filterTheDataGrid FUNCTION EVERY ONE SECOND (1000 MILLISECONDS) //
// LOWER '1000' FOR FASTER REFRESHING, MAYBE TO 500 FOR EVERY 0.5 SECOND REFRESHES //
var refreshDataGrid = setInterval(function() { filterTheDataGrid(); }, 1000);
}
</script>
,
// PUT THIS IN THE <HEAD> OF THE PAGE
<script type="text/javascript">
// SETUP THE LAYOUT FOR THE DATA //
var layoutItems = [[
{
field: "id",
name: "ID",
width: '5px',
hidden: true
},
{
field: "color",
name: "Color",
width: '80px'
}
]];
// Create an empty datastore //
var storeData = {
identifier: 'id',
label: 'id',
items: []
}
var store3 = new dojo.data.ItemFileWriteStore( {data : storeData} );
</script>
,
// PUT THIS IN THE <HTML> OF THE PAGE
<div id="grid" dojoType="dojox.grid.DataGrid" jsId="grid5" store="store3" structure="layoutItems" query="{ type: '*' }" clientSort="true" rowsPerPage="40"></div>
,
<script type="text/javascript">
function addItemToGrid(formdata) {
// THIS FUNCTION IS CALLED BY A DIALOG BOX AND GETS FORM DATA PASSED TO IT //
var jsonobj = eval("(" + dojo.toJson(formData, true) + ")");
var myNewItem = {
id: transactionItemID,
color: jsonobj.color
};
// Insert the new item into the store:
store3.newItem(myNewItem);
store3.save({onComplete: savecomplete, onError: saveerror});
}
</script>