ParamQuery grid support forum
General Category => ParamQuery Pro Evaluation Support => Topic started by: 杨万里 on November 19, 2019, 12:54:51 pm
-
How to use filter and mergeCells at the same time?I merged the first row with mergeCells.When I use filter to do the search, when the search results to the second row, then the table will only show the second row of data, so that the second row will be merged because it becomes the first row.
https://paramquery.com/pro/demos/filter_local (https://paramquery.com/pro/demos/filter_local)
-
hideRows suboption in filterModel helps with this:
filterModel: { hideRows: true },
Ex: https://paramquery.com/pro/demos/import-xlsx
-
Thank you for your answer.But I used "hideRows: true" and it didn't work.I'm going to merge the first row, but when I filter it, no matter which row was filtered to the first row, it's going to merge. Is there something wrong with my code?Thank you.:)
Here is my code:
function filterhandler() {
var $toolbar = this.toolbar(),
$value = $toolbar.find(".filterValue"),
value = $value.val(),
condition = $toolbar.find(".filterCondition").val(),
dataIndx = $toolbar.find(".filterColumn").val(),
filterRules;
if (dataIndx == "") {
//search through all fields when no field selected.
filterRules = this.getColModel().map(function(column){
return { dataIndx: column.dataIndx, condition: condition, value: value };
})
}
else {
//search through selected field.
filterRules = [{dataIndx: dataIndx, condition: condition, value: value}];
}
//call to grid filter method.
this.filter({
oper: 'replace',
rules: filterRules
});
}
//filterRender to highlight matching cell text.(optional)
function filterRender(ui) {
var val = ui.cellData,
filter = ui.column.filter,
crules = (filter || {}).crules;
if (filter && filter.on && crules && crules[0].value) {
var condition = crules[0].condition,
valUpper = val.toUpperCase(),
txt = crules[0].value,
txt = (txt == null) ? "" : txt.toString(),
txtUpper = txt.toUpperCase(),
indx = -1;
if (condition == "end") {
indx = valUpper.lastIndexOf(txtUpper);
//if not at the end
if (indx + txtUpper.length != valUpper.length) {
indx = -1;
}
}
else if (condition == "contain") {
indx = valUpper.indexOf(txtUpper);
}
else if (condition == "begin") {
indx = valUpper.indexOf(txtUpper);
//if not at the beginning.
if (indx > 0) {
indx = -1;
}
}
if (indx >= 0) {
var txt1 = val.substring(0, indx);
var txt2 = val.substring(indx, indx + txt.length);
var txt3 = val.substring(indx + txt.length);
return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
}
else {
return val;
}
}
else {
return val;
}
}
obj = {
toolbar: {
items: [
{
type: 'textbox',
label: 'Filter: ',
attr: 'placeholder="Enter your keyword"',
cls: "filterValue",
listener: { keyup: filterhandler }
},
{
type: 'select', cls: "filterColumn",
listener: filterhandler,
options: function (ui) {
var opts = [{ '': '[ All Fields ]'}];
this.getColModel().forEach(function(column){
var obj = {};
obj[column.dataIndx] = column.title;
opts.push(obj);
})
return opts;
}
},
{
type: 'select',
cls: "filterCondition",
listener: filterhandler,
options: [
{ "begin": "Begins With" },
{ "contain": "Contains" },
{ "end": "Ends With" },
{ "notcontain": "Does not contain" },
{ "equal": "Equal To" },
{ "notequal": "Not Equal To" },
{ "empty": "Empty" },
{ "notempty": "Not Empty" },
{ "less": "Less Than" },
{ "great": "Great Than" },
{ "regexp": "Regex" }
]
}
]
},
height: "100%",
editable: true,
sortModel: {
on: false
},
columnTemplate: {render: filterRender},
filterModel: { mode: 'OR',hideRows: true },
// rowHt:19,
showTitle: true,
title: titlename,
colModel: colModel,
freezeCols: datast + 4,//冻结列
numberCell: {show: false},
autoRow: false,
dragColumns: {enabled: false},//禁止拖动列
mergeCells: mergeCells,
trackModel: {on: true, dirtyClass: "pq-cell-dirty"},
editor: {
select: true
},
dataModel: {
data: resdata,
recIndx: 'id'
},
history: function (evt, ui) {
var $grid = this.toolbar();
if (ui.canUndo != null) {
$("button.changes", $grid).button("option", {disabled: !ui.canUndo});
}
if (ui.canRedo != null) {
$("button:contains('重做')", $grid).button("option", "disabled", !ui.canRedo);
}
$("button:contains('撤销')", $grid).button("option", {label: '撤销 (' + ui.num_undo + ')'});
$("button:contains('重做')", $grid).button("option", {label: '重做 (' + ui.num_redo + ')'});
},
cellSave(event, ui) {
if (ui.dataIndx.indexOf('count') > -1) {
//console.log(ui)
var ndataIndx = ui.dataIndx.replace(/count/, 'price');
// console.log(ndataIndx)
var newRow = {};
newRow[ndataIndx] = ui.newVal * ui.rowData['matprice'];
this.updateRow({
rowList: [
{rowIndx: ui.rowIndx, newRow}
]
});
}
$("#" + gridselector).pqGrid( "refreshView" );
},
rowInit: function (ui) {
if (!ui.rowData['id']) {
return {cls: 'fl'};
}
}
}
$("#" + gridselector).pqGrid(obj);
-
filterModel.hideRows feature is available since v6.2.4. Which version of grid are you using?
-
Thank you paramvir.
-
filterModel.hideRows feature is available since v6.2.4. Which version of grid are you using?
However, when I hide the rows, I use filtering, which will filter out the hidden rows as well. Could you please tell me how to solve this problem?
-
filterModel.hideRows feature and hidden rows can't be used at same time.