KendoGrid数据过滤器无法正常工作

时间:2017-12-04 13:49:53

标签: javascript angularjs kendo-ui dojo kendo-grid

我是KendoUI的新手并将其用作dataSource。

模板如下:

<div class="analysis-grid" id="sampleRqGridId" kendo-grid="model.sampleRqGrid" k-options="model.sampleRqGridData" ng-show='page.isSample'></div>
    <div kendo-pager k-options="model.sampleRQPager" ng-show='page.isSample'></div>

控制器如下:

function gtFilterData(p) {
                var dataSource = new kendo.data.DataSource({
                    data: p,
                    schema: {
                        model: {
                            fields: {
                                t: { type: "string" },
                                s: { type: "string" },
                                b: { type: "string" },
                                ctM: { type: "string" },
                                ctMA: { type: "string" },
                                ctSE: { type: "string" },
                                dctM: { type: "string" },
                                dctSE: { type: "string" },
                                qM: { type: "string" },
                                qMA: { type: "string" },
                                qSE: { type: "string" },
                                nQM: { type: "string" },
                                nQSE: { type: "string" },
                                fFactor: { type: "string" },
                                ddct: { type: "string" },
                                ddctMinFs: { type: "string" },
                                ddctPlusFs: { type: "string" },
                                rq: { type: "string" },
                                rqMin: { type: "string" },
                                rqMax: { type: "string" }
                            }
                        }
                    }
                });
                return function createMultiSelect(element) {
                    // console.info("element",element);
                    var tmpDta = p._data ? p._data.map(function (i) {
                        return i.t;
                    }):[""];
                    var tmpObj = {};
                    tmpDta.forEach(function (i) {
                        tmpObj[i] = i;
                    });
                    var names = Object.keys(tmpObj);
                        element.removeAttr("data-bind");
                        element.kendoMultiSelect({
                        dataSource: names,
                        change: function(e) {
                            var filter = { logic: "or", filters: [] };
                            var values = this.value();
                            $.each(values, function(i, v) {
                                filter.filters.push({field: "t", operator: "eq", value: v });
                            });
                            if(values) {
                                dataSource.filter(filter);
                            }
                        }
                    });
                };
            }

$scope.model.sampleRqGridData = {
                autoBind : true,
                dataSource: TechReplicateService.getDS(),
                navigatable: true,
                sortable : {
                    mode : "multiple"
                },
                change : function() {
                    if($scope.isSelectionFromPlot){
                        return;
                    }
                    var grid = this;
                    var selectedDataItems = [];

                    grid.select().map(function(i, elem) {
                        selectedDataItems.push(grid.dataItem(elem).id);
                    });

                    $scope.$broadcast(RQConstants.RQPLOT_GRID_SELECTION, selectedDataItems);
                },
                dataBound: function(){
                    var that = this;
                    that.table.kendoTooltip({
                        filter: "td[type=number]",
                        content: function (e) {
                            var target = e.target;
                            var item = that.dataItem($(target).closest("tr"));
                            var index = that.cellIndex($(target));
                            var field = that.columns[index].field;
                            if (!item.se) {
                                if (field === 'nQSE') {
                                    field = 'nQSD';
                                } else if (field === 'qSE') {
                                    field = 'qSD';
                                } else if (field === 'dctSE') {
                                    field = 'dctSD';
                                } else if (field === 'ctSE') {
                                    field = 'ctSD';
                                }
                            }
                            var value = item.get(field);                            
//                          var value = item.get(field);
                            if(value === 0){
                                value = "0.000";
                                // TODO: old project tooltip will not work here
                            }else if(value === null){
                                value = "-";
                            }
                            return value;
                        },
                        autoHide: true,
                        position: "top"
                    });

                    UiService.resetColumnWidth("sampleRqGridId");
                },
                filterable : true,
                resizable : true,
                reorderable : true,
                selectable : "multiple,row",
                columns : [{
                    field : "t",
                    title : "Target",
                    locked : true,
                    width : 120,
                    filterable: {
                        dataSource: TechReplicateService.getDS(),
                        ui : gtFilterData(TechReplicateService.getDS()),
                        extra: false,
                    }
                }, {
                    field : "s",
                    title : "Sample",
                    locked : true,
                    width : 120
                }, {
                    field : "b",
                    title : "Biological Group",
                    width : 164
                // }, {
                    // field : "mCtM",
                    // title : "Max C\u0442",
                    // template : function(dataItem){
                        // return dataItem.mCtM == 'undefined' ? '-' : (dataItem.mCtM == -1 || dataItem.mCtM == null) ? '-' : formatValue(dataItem.mCtM.toFixed(3));
                    // },
                    // width : 100,
                    // filterable : gridDecimalFilter,
                    // attributes: {
                        // type: "number"
                    // }
                }, {
                    field : "ctM",
                    //title : "C\u0442 Mean",
                    title : "Cq Mean",
                    hidden : $scope.model.rqSpace == "ct" ? false : true,
//                  template : "#=(ctM=='undefined')?'-':(ctM==-1)?'-':ctM.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.ctM == 'undefined' ? '-' : (dataItem.ctM == -1 || dataItem.ctM == null) ? '-' : formatValue(dataItem.ctM.toFixed(3));
                    },
                    width : 103,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "ctMA",
                    //title : "Adjusted C\u0442 Mean",
                    title : "Adjusted Cq Mean",
                    hidden : $scope.model.rqSpace == "ct" ? false : true,
//                  template : "#=(ctMA=='undefined')?'-':(ctMA==-1)?'-':ctMA.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.ctMA == 'undefined' ? '-' : (dataItem.ctMA == -1 || dataItem.ctMA == null) ? '-' : formatValue(dataItem.ctMA.toFixed(3));
                    },
                    width : 160,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "ctSE",
                    //title : "C\u0442 SE",
                    title : "Cq",
                    hidden : $scope.model.rqSpace == "ct" ? false : true,
//                  template : "#=(ctMA=='undefined')?'-':(ctMA==-1)?'-':ctMA.toFixed(3)#",
                    template : function(dataItem){
                        if (dataItem.se) {
                            return dataItem.ctSE == 'undefined' ? '-' : (dataItem.ctSE == -1 || dataItem.ctSE == null) ? '-' : formatValue(dataItem.ctSE.toFixed(3));
                        } else {
                            return dataItem.ctSD == 'undefined' ? '-' : (dataItem.ctSD == -1 || dataItem.ctSD == null) ? '-' : formatValue(dataItem.ctSD.toFixed(3));
                        }
                    },
                    width : 100,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "dctM",
                    //title : "\u0394C\u0442 Mean",
                    title : "\u0394Cq Mean",
                    hidden : $scope.model.rqSpace == "ct" ? false : true,
//                  template : "#=(dctM=='undefined')?'-':(dctM==-1)?'-':dctM.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.dctM == 'undefined' ? '-' : (dataItem.dctM == null) ? '-' : formatValue(dataItem.dctM.toFixed(3));
                    },
                    width : 120,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "dctSE",
                    title : "\u0394Cq SE",
                    hidden : $scope.model.rqSpace == "ct" ? false : true,
                    template : function(dataItem) {
                        if (dataItem.se) {
                            return dataItem.dctSE == 'undefined' ? '-' : (dataItem.dctSE == null) ? '-' : formatValue(dataItem.dctSE.toFixed(3));
                        } else {
                            return dataItem.dctSD == 'undefined' ? '-' : (dataItem.dctSD == null) ? '-' : formatValue(dataItem.dctSD.toFixed(3));
                        }
                    },
                    width : 100,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "qM",
                    title : "L-Quant Mean",
                    hidden : $scope.model.rqSpace == "quant" ? false : true,
//                  template : "#=(ctMA=='undefined')?'-':(ctMA==-1)?'-':ctMA.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.qM == 'undefined' ? '-' : (dataItem.qM == -1 || dataItem.qM == null) ? '-' : formatValue(dataItem.qM);
                    },
                    width : 120,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "qMA",
                    title : "Adjusted L-Quant Mean",
                    hidden : $scope.model.rqSpace == "quant" ? false : true,
//                  template : "#=(ctMA=='undefined')?'-':(ctMA==-1)?'-':ctMA.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.qMA == 'undefined' ? '-' : (dataItem.qMA == -1 || dataItem.qMA == null) ? '-' : formatValue(dataItem.qMA);
                    },
                    width : 180,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "qSE",
                    title : "L-Quant SE",
                    hidden : $scope.model.rqSpace == "quant" ? false : true,
//                  template : "#=(dctM=='undefined')?'-':(dctM==-1)?'-':dctM.toFixed(3)#",
                    template : function(dataItem){
                        if (dataItem.se) {
                            return dataItem.qSE == 'undefined' ? '-' : (dataItem.qSE == -1 || dataItem.qSE == null) ? '-' : formatValue(dataItem.qSE.toFixed(3));
                        } else {
                            return dataItem.qSD == 'undefined' ? '-' : (dataItem.qSD == -1 || dataItem.qSD == null) ? '-' : formatValue(dataItem.qSD.toFixed(3));
                        }
                    },
                    width : 120,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "nQM",
                    title : "N-Quant Mean",
                    hidden : $scope.model.rqSpace == "quant" ? false : true,
//                  template : "#=(ctMA=='undefined')?'-':(ctMA==-1)?'-':ctMA.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.nQM == 'undefined' ? '-' : (dataItem.nQM == -1 || dataItem.nQM == null) ? '-' : formatValue(dataItem.nQM.toFixed(3));
                    },
                    width : 120,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "nQSE",
                    title : "N-Quant SE",
                    hidden : $scope.model.rqSpace == "quant" ? false : true,
//                  template : "#=(dctM=='undefined')?'-':(dctM==-1)?'-':dctM.toFixed(3)#",
                    template : function(dataItem){
                        if (dataItem.se) {
                            return dataItem.nQSE == 'undefined' ? '-' : (dataItem.nQSE == -1 || dataItem.nQSE == null) ? '-' : formatValue(dataItem.nQSE.toFixed(3));
                        } else {
                            return dataItem.nQSD == 'undefined' ? '-' : (dataItem.nQSD == -1 || dataItem.nQSD == null) ? '-' : formatValue(dataItem.nQSD.toFixed(3));
                        }
                    },
                    width : 120,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }

                }, {
                    field : "fFactor",
                    title : "F-Factor",
//                  template : "#=(ddct=='undefined')?'-':(ddct==-1)?'-':ddct.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.fFactor == 'undefined' ? '-' : (dataItem.fFactor == null) ? '-' : formatValue(dataItem.fFactor.toFixed(3));
                    },
                    width : 105,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "ddct",
                    title : "\u0394\u0394Cq",
//                  template : "#=(ddct=='undefined')?'-':(ddct==-1)?'-':ddct.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.ddct == 'undefined' ? '-' : (dataItem.ddct == null) ? '-' : formatValue(dataItem.ddct.toFixed(3));
                    },
                    width : 93,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "ddctMinFs",
                    title : "\u0394\u0394Cq - F\u03C3",
//                  template : "#=(ddct=='undefined')?'-':(ddct==-1)?'-':ddct.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.ddctMinFs == 'undefined' ? '-' : (dataItem.ddctMinFs == null) ? '-' : formatValue(dataItem.ddctMinFs.toFixed(3));
                    },
                    width : 114,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "ddctPlusFs",
                    title : "\u0394\u0394Cq + F\u03C3",
//                  template : "#=(ddct=='undefined')?'-':(ddct==-1)?'-':ddct.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.ddctPlusFs == 'undefined' ? '-' : (dataItem.ddctPlusFs == null) ? '-' : formatValue(dataItem.ddctPlusFs.toFixed(3));
                    },
                    width : 114,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "rq",
                    title : "RQ",
//                  template : "#=(rq=='undefined')?'-':(rq==-1)?'-':(rq.toFixed(3)==0.000)?'-':rq.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.rq == 'undefined' ? '-' : (dataItem.rq == -1 || dataItem.rq == null) ? '-' : (dataItem.rq.toFixed(3) === 0.000) ? '-' : formatValue(dataItem.rq.toFixed(3));
                    },
                    width : 70,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "rqMin",
                    title : "RQ Min",
//                  template : "#=(rqMin=='undefined')?'-':(rqMin==-1)?'-':rqMin.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.rqMin == 'undefined' ? '-' : (dataItem.rqMin == -1 || dataItem.rqMin == null) ? '-' : formatValue(dataItem.rqMin.toFixed(3));
                    },
                    width : 110,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }, {
                    field : "rqMax",
                    title : "RQ Max",
//                  template : "#=(rqMax=='undefined')?'-':(rqMax==-1)?'-':(rqMax.toFixed(3)==0.000)?'-':rqMax.toFixed(3)#",
                    template : function(dataItem){
                        return dataItem.rqMax == 'undefined' ? '-' : (dataItem.rqMax == -1 || dataItem.rqMax == null) ? '-' : formatValue(dataItem.rqMax.toFixed(3));
                    },
                    width : 105,
                    filterable : gridDecimalFilter,
                    attributes: {
                        type: "number"
                    }
                }]
            };

getDS定义如下:

getDS : function() {
       var groupId = ResultGroupService.getActiveGroupId();
       ds.options.transport.read.url = "api/projects/" + _projectId + "/groups/" + groupId + "/results/tech-replicates";
       return ds;
   }

呈现如下:

enter image description here

但是在选择任何值之后,它不会影响我做错的行。 类似的实现正在进行here

0 个答案:

没有答案