Усовершенствованный сеточный фильтр dojo - программно установить столбец A больше, чем некоторое число - PullRequest
Новая
       30

Усовершенствованный сеточный фильтр dojo - программно установить столбец A больше, чем некоторое число

1 голос
/ 08 июля 2011

Я пытаюсь установить фильтр в сетке додзё программным способом, чтобы некоторый столбец был больше некоторого числа.
У меня есть столбец количества, и я хочу установить фильтр, чтобы количество было больше (или отличалось)чем ноль.

Спасибо!

Так что код будет выглядеть так: 

dojo.require("dojox.grid.EnhancedGrid");
var storage = new dojo.data.ItemFileWriteStore({data: data});
var layout = [ { field: 'id', name: '# ID', width: '60px' },
               { field: 'name', name: 'Nume produs', width: '200px' },
               { field: 'qty', name: 'QTY', alwaysEditing: true, editable: true }
];
var grid = new dojox.grid.EnhancedGrid({
    store: storage,
    structure: layout,
    plugins: { filter : true },
}, 'grid');
grid.startup();

Я предполагаю, что должен сделать фильтр или запрос, но я действительно нене знаю, как сравнивать две вещи, единственное, что я обнаружил, - это то, что я могу использовать запрос с RegEx, но .. вот и все

Ответы [ 2 ]

0 голосов
/ 22 января 2012

Вот как я в итоге сделал нечто подобное:

Основная идея - добавить невидимый столбец.Когда значение, которое вы хотите проверить, соответствует вашим критериям (больше, чем некоторое значение, или в моем случае в некотором диапазоне), тогда установите невидимый столбец на «Y», в противном случае установите его на «N».Тогда фильтр прост: invisibleColumn: 'Y'.

Ниже приведена сетка со значениями Column_B в диапазоне 100-500.Нажмите кнопку, чтобы активировать фильтр для отображения только значений в диапазоне 150-350.Это полный рабочий пример из трех частей (javascript, HTML, CSS):

JavaScript (script.js) 

dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.Button");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");


dojo.ready(function(){  
var appLayout = new dijit.layout.ContentPane({
    id: "appLayout"
}, "appLayout");

var data = {
  'items': [
    {'Column_A': 'alpha', 'Column_B': 100},
    {'Column_A': 'beta',  'Column_B': 200},
    {'Column_A': 'gamma', 'Column_B': 300},
    {'Column_A': 'delta', 'Column_B': 400},
    {'Column_A': 'epsilon', 'Column_B': 500}
  ]
};
var store = new dojo.data.ItemFileReadStore({
    data: data      
});


var layout = [[ 
  {name : 'A', field : 'Column_A', width : '125px'},
  {name : 'B', field : 'Column_B', width : '125px%'}
]];


var grid = new dojox.grid.DataGrid({
    structure : layout,
    store: store,
    queryOptions: {ignoreCase: true}
});


var filterButton = new dijit.form.Button({
    label: "Filter",
    onClick: function () {
        var determineRange = function (items, request) {
            for (var i = 0; i < items.length; ++i) {
                items[i].invisibleColumn = (items[i].Column_B > 150 && items[i].Column_B < 350) ? 'Y' : 'N';
            }
            grid.filter({invisibleColumn: 'Y'});
        };
        store.fetch({onComplete: determineRange});  
    }
});


filterButton.placeAt(appLayout.domNode);
grid.placeAt(appLayout.domNode);


appLayout.startup();
});

HTML (index.html) 

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Filter by range</title>

    <link rel="stylesheet" href="style.css" media="screen"/>   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/document.css" />   
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/layout/resources/ExpandoPane.css" />
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css">

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" type="text/javascript"></script>
    <script src="script.js" type="text/javascript"></script>
  </head>

  <body class="claro">
    <div id="appLayout"></div>
  </body>
</html>

И, наконец, CSS (style.css) 

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0; 
  overflow: hidden;     
}   

#appLayout {
  width 100%; height: 100%;
}
0 голосов
/ 09 июля 2011

делает 

var grid = new dojox.grid.EnhancedGrid({
    query: { 'qty' : new RegExp('^[1-9]+[0-9]*$') }, 
    store: storage,
    structure: layout,
    plugins: { filter : true },
}, 'grid');

работает, но я считаю, что это довольно неэффективно, и я надеялся на более хорошее, чистое и быстрое решение.

...