3

私はSlickGridにかなり慣れていません。SlickGrid フィルターを機能させようとしていますが、うまくいきません。私は例に従っています(http://mleibman.github.io/SlickGrid/examples/example4-model.html)。以下は私のソースコードです。

    $(document).ready(function() {
    var tName;
    $('#submit').click(function(e) {
        tName = $('#source option:selected').text();// name1
        tName = tName.trim();
        $.ajax({
            url : 'someUrl',
            type : 'GET',
            cache : false,
            success : function(d) {
                var grid;
                var searchString = "";
                var data = [];
                var columns = new Array();
                var cols = d[0].columns;
                var pkColNames = d[0].pkColNames;
                for (var j=0; j< cols.length; j++) {
                    var key = {id: cols[j].colName, name: cols[j].colName, field: cols[j].colName, width: 200, sortable:true, editor: Slick.Editors.LongText};
                    columns[j] = key;
                }                   

                var options = {
                        editable: true,
                        enableAddRow: false,
                        enableCellNavigation: true,
                        asyncEditorLoading: false,
                        enableColumnReorder:true,
                        multiColumnSort: false,
                        autoEdit: false,
                        autoHeight: false
                };

                function myFilter(item, args) {
                    return true;// Let us return true all time ?
                }

                for (var i = 0; i < d.length; i++) {
                    var tempData = (data[i] = {});
                    var title = null;
                    var val = null;
                    for (var q = 0; q < d[i].columns.length; q++) {
                        title = d[i].columns[q].colName;
                        val = d[i].columns[q].colValue;
                        tempData[title] = val;
                    }
                }

                var dataView = new Slick.Data.DataView({ inlineFilters: true });

                grid = new Slick.Grid("#myGrid", dataView, columns, options);
                dataView.setPagingOptions({
                   pageSize: 25
                });
                var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));
                var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

                grid.setSelectionModel(new Slick.CellSelectionModel());

                grid.onAddNewRow.subscribe(function(e, args) {
                    // Adding a new record is not yet decided.
                });

                grid.onCellChange.subscribe(function (e) {
                    var editedCellNo = arguments[1].cell;
                    var editedColName = grid.getColumns()[editedCellNo].field;
                    var newUpdatedValue= arguments[1].item[grid.getColumns()[editedCellNo].field];
                    var editedColType = "";
                    for (var cnt = 0;  cnt < cols.length; cnt++) {
                        if (editedColName == cols[cnt].colName) {
                            editedColType = cols[cnt].colType;
                            break;
                        }
                    }
                    var pkKeyValue="";

                    for (var v=0; v <pkColNames.length;v++) {
                        for (var p=0; p<grid.getColumns().length; p++) {
                            if (pkColNames[v] == grid.getColumns()[p].field) {
                                var value = arguments[1].item[grid.getColumns()[p].field];
                                pkKeyValue += "{"+pkColNames[v] + '~' +getColDbType(grid.getColumns()[p].field) + ":"+value+"},";
                                break;
                            }
                        }
                    }

                    function getColDbType(colName) {
                        for (var c = 0;  c < cols.length; c++) {
                            if (colName == cols[c].colName) {
                                return cols[c].colType;
                            }
                        }
                    }

                    pkKeyValue = pkKeyValue.substring(0, pkKeyValue.length-1);
                    $.ajax({
                        url: 'anotherUrl',
                        type:'GET',
                        dataType:'text',
                        success: function(f) {
                            bootbox.alert("Data updated successfully");
                        },
                        error: function() {
                            bootbox.alert("Error - updating data. Please ensure you are adding the data in right format.");
                            grid.invalidateAllRows();
                            grid.render();


                        }
                    });
                });

                grid.onClick.subscribe(function (e) {
                    //do-nothing
                });

                dataView.onRowsChanged.subscribe(function(e, args) {
                    grid.updateRowCount();
                    grid.invalidateRows(args.rows);
                    grid.render();
                });

                grid.onSort.subscribe(function(e, args) {
                      // args.multiColumnSort indicates whether or not this is a multi-column sort.
                      // If it is, args.sortCols will have an array of {sortCol:..., sortAsc:...} objects.
                      // If not, the sort column and direction will be in args.sortCol & args.sortAsc.

                      // We'll use a simple comparer function here.
                      var comparer = function(a, b) {
                        return a[args.sortCol.field] > b[args.sortCol.field];
                      }

                      // Delegate the sorting to DataView.
                      // This will fire the change events and update the grid.
                      dataView.sort(comparer, args.sortAsc);
                });

                // wire up the search textbox to apply the filter to the model
                $("#txtSearch").keyup(function (e) {
                    console.log('Called...txtSearch');
                  Slick.GlobalEditorLock.cancelCurrentEdit();

                  // clear on Esc
                  if (e.which == 27) {
                    this.value = "";
                  }

                  searchString = this.value;
                  updateFilter();
                });

                function updateFilter() {
                  console.log("updateFilter");
                  dataView.setFilterArgs({
                    searchString: searchString
                  });
                  dataView.refresh();
                }

                dataView.beginUpdate();
                dataView.setItems(data, pkColNames);
                dataView.setFilterArgs({
                    searchString: searchString
                  });
                dataView.setFilter(myFilter);
                dataView.endUpdate();
            },
            error : function() {
                bootbox.alert("Invalid user");
            }
        });
    });
});
4

1 に答える 1

3

関数myFilter()は常に返さtrueれるため、もちろん機能しません。あなたが見た例は、特定のものをフィルタリングすることでした。次の例を参照して、汎用フィルターを使用することをお勧めします。例から、選択した列に見ているテキストを入力し、結果を見てください...以下の例を参照してください(SlickGridの例から)。
クイック フィルターに固定ヘッダー行を使用

する より詳細な条件フィルター (> 10、<> 10 など) が必要な場合は、この種のフィルター処理を可能にする方法に関する以前の回答を参照してください。以下の以前の回答:
SlickGrid 列の種類

それがあなたを助けることを願っています

于 2013-10-09T21:23:25.313 に答える