我是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;
}
呈现如下:
但是在选择任何值之后,它不会影响我做错的行。 类似的实现正在进行here。