我正在使用它来填充基于特定列的可用行中存在的多选过滤器值。
我在删除选定行时面临以下问题，即说我已删除第一行，删除后多选过滤器应根据特定列的可用行中存在的值重新计算值（对于 SkillCategory）。我们可以看到删除第一行后，“数据”值仍可用于 SkillCategory 多选过滤器。
删除行/添加/更新后如何重新计算多选过滤器值？
<script type="text/javascript">
function loadCompleteHandler1() {
initializeGridFilterValueSupply();
}
jQuery(function () {
$.extend(true, $.jgrid.search, {
beforeShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
of: window,
at: "center center",
my: "center center"
});
}
});
$.extend($.jgrid.edit, { viewPagerButtons: false });
$grid = $("#listTableSupply"),
myDefaultSearch = "cn",
getColumnIndexByName = function (columnName) {
var cm = $(this).jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
modifySearchingFilter = function (separator) {
var i, l, rules, rule, parts, j, group, str, iCol, cmi, cm = this.p.colModel,
filters = $.parseJSON(this.p.postData.filters);
if (filters && filters.rules !== undefined && filters.rules.length > 0) {
rules = filters.rules;
for (i = 0; i < rules.length; i++) {
rule = rules[i];
iCol = getColumnIndexByName.call(this, rule.field);
cmi = cm[iCol];
if (iCol >= 0 &&
((cmi.searchoptions === undefined || cmi.searchoptions.sopt === undefined)
&& (rule.op === myDefaultSearch)) ||
(typeof (cmi.searchoptions) === "object" &&
$.isArray(cmi.searchoptions.sopt) &&
cmi.searchoptions.sopt[0] === rule.op)) {
// make modifications only for the 'contains' operation
parts = rule.data.split(separator);
if (parts.length > 1) {
if (filters.groups === undefined) {
filters.groups = [];
}
group = {
groupOp: 'OR',
groups: [],
rules: []
};
filters.groups.push(group);
for (j = 0, l = parts.length; j < l; j++) {
str = parts[j];
if (str) {
// skip empty '', which exist in case of two separaters of once
group.rules.push({
data: parts[j],
op: rule.op,
field: rule.field
});
}
}
rules.splice(i, 1);
i--; // to skip i++
}
}
}
this.p.postData.filters = JSON.stringify(filters);
}
},
dataInitMultiselect = function (elem) {
setTimeout(function () {
var $elem = $(elem), id = elem.id,
inToolbar = typeof id === "string" && id.substr(0, 3) === "gs_",
options = {
selectedList: 2,
height: "auto",
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
return;
}
},
$options = $elem.find("option");
if ($options.length > 0 && $options[0].selected) {
$options[0].selected = false; // unselect the first selected option
}
if (inToolbar) {
options.minWidth = 'auto';
}
//$elem.multiselect(options);
$elem.multiselect(options).multiselectfilter({ placeholder: '' });
$elem.siblings('button.ui-multiselect').css({
width: inToolbar ? "98%" : "100%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}, 50);
};
jQuery("#listTableSupply").jqGrid({
url: 'HttpHandler/SupplyHandler.ashx',
ajaxSelectOptions: { cache: false },
postData: { ActionPage: 'TransportType', Action: 'Fill' },
datatype: 'json',
mtype: 'GET',
colNames: ['SupplyId', 'Account', 'AccountPOC', 'COE', 'Type', 'Location', 'EmpId', 'EmpName', 'Designation', 'AvailabilityDate', 'AvailabilityMonth', 'Exp', 'SkillCategory', 'PrimarySkill', 'SecondarySkill', 'OtherSkill', 'Role', 'VisaStatus', 'Country', 'Comments'],
colModel: [
{ name: 'SupplyId', index: 'SupplyId', width: '5%', align: 'center', sortable: true, resizable: true, hidden: true },
{
name: 'Account', index: 'Account', width: '10%', sortable: true, resizable: true, stype: 'select'
},
{ name: 'AccountPOC', index: 'AccountPOC', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'COE', index: 'COE', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'Type', index: 'Type', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'Location', index: 'Location', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{ name: 'EmpId', index: 'EmpId', width: '5%', sortable: true, resizable: true, hidden: true },
{ name: 'EmpName', index: 'EmpName', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'Designation', index: 'Designation', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'AvailabilityDate', index: 'AvailabilityDate', width: '5%', sortable: true, search: true, resizable: true, stype: 'select'
},
{ name: 'AvailabilityMonth', index: 'AvailabilityMonth', width: '5%', sortable: true, resizable: true, hidden: true },
{
name: 'Experience', index: 'Experience', width: '5%', sortable: true, resizable: true, search: true, stype: 'select'
},
{
name: 'SkillCategory', index: 'SkillCategory', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'PrimarySkill', index: 'PrimarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'SecondarySkill', index: 'SecondarySkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'OtherSkill', index: 'OtherSkill', width: '5%', sortable: true, resizable: true, stype: 'select'
},
{
name: 'CurrentRole', index: 'CurrentRole', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{
name: 'VisaStatus', index: 'VisaStatus', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{
name: 'Country', index: 'Country', width: '5%', sortable: true, resizable: true,
stype: 'select'
},
{ name: 'Comments', index: 'Comments', width: '5%', search: false, sortable: false, resizable: true },
],
width: '1192',
height: '300',
loadonce: true,
pager: '#pagerSupply',
gridview: true,
rowNum: 15,
rowList: [15, 30, 45],
rowTotal: 5000,
sortorder: 'asc',
ignoreCase: true,
sortname: 'Account',
viewrecords: true,
rownumbers: true,
toppager: true,
caption: 'Supply',
emptyrecords: "No records to view",
loadtext: "Loading...",
refreshtext: "Refresh",
refreshtitle: "Reload Grid",
loadComplete: loadCompleteHandler1,
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('viewGridRow', rowid);
},
beforeRequest: function () //loads the jqgrids state from before save
{
modifySearchingFilter.call(this, ',');
}
}).jqGrid('bindKeys');
$('#listTableSupply').bind('keydown', function (e) {
if (e.keyCode == 38 || e.keyCode == 40) e.preventDefault();
});
//setSearchSelect("SkillCategory");
$('#listTableSupply').jqGrid('navGrid', '#pagerSupply', {
cloneToTop: true,
refresh: true, refreshtext: "Clear Filter", edit: false, add: false, del: true, search: false
}, {}, {}, {//Del
closeOnEscape: true, //Closes the popup on pressing escape key
drag: true,
recreateForm: true,
//closeAfterEdit: true,
url: 'HttpHandler/SupplyHandler.ashx',
delData: {
ActionPage: 'TransportType', Action: 'Delete',
SupplyId: function () {
var sel_id = $('#listTable').jqGrid('getGridParam', 'selrow');
var value = $('#listTable').jqGrid('getCell', sel_id, 'SupplyId');
return value;
}
},
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({ of: window, my: "center center", at: "center center" });
//$form.closest(".ui-jqdialog").position({of: window,at: "center center",my: "left top"});
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
//$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after del
return [true, '']
}
else {
if (response.responseText == "Record Successfully Deleted!!!") {
//$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
var myInfo = '<div class="ui-state-highlight ui-corner-all">' +
'<span class="ui-icon ui-icon-info" ' +
'style="float: left; margin-right: .3em;"></span>' +
'<span>Record Successfully Deleted!!!</span></div>';
var infoTR = $("table#TblGrid_listTable>tbody>tr.tinfo");
infoTD = infoTR.children("td.topinfo");
infoTD.html(myInfo);
infoTR.show();
setTimeout(function () {
infoTD.children("div").fadeOut('slow',
function () {
infoTR.hide();
});
}, 8000);
initializeGridFilterValueSupply();
return [true, '']
}
else {
return [false, response.responseText]//Captures and displays the response text on th Del window
}
}
}
}, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true
});
jQuery("#listTableSupply").jqGrid('navButtonAdd', '#listTableSupply_toppager_left', { // "#list_toppager_left"
caption: "Refresh",
buttonicon: 'ui-icon-refresh',
onClickButton: function () {
$("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
initializeGridFilterValueSupply();
}
});
jQuery("#listTableSupply").jqGrid('navButtonAdd', '#pagerSupply', { // "#list_toppager_left"
caption: "Refresh",
buttonicon: 'ui-icon-refresh',
onClickButton: function () {
$("#listTableSupply").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid", [{ page: 1 }]);
initializeGridFilterValueSupply();
}
});
});
//]]>
</script>
<script type="text/javascript">
initializeGridFilterValueSupply = function () {
jQuery("#listTableSupply").jqGrid('destroyGroupHeader');
setSearchSelect("Account", jQuery("#listTableSupply"));
setSearchSelect("COE", jQuery("#listTableSupply"));
setSearchSelect("AccountPOC", jQuery("#listTableSupply"));
setSearchSelect("Type", jQuery("#listTableSupply"));
setSearchSelect("Location", jQuery("#listTableSupply"));
setSearchSelect("Designation", jQuery("#listTableSupply"));
setSearchSelect("EmpName", jQuery("#listTableSupply"));
setSearchSelect("AvailabilityDate", jQuery("#listTableSupply"));
setSearchSelect("Experience", jQuery("#listTableSupply"));
setSearchSelect("SkillCategory", jQuery("#listTableSupply"));
setSearchSelect("PrimarySkill", jQuery("#listTableSupply"));
setSearchSelect("SecondarySkill", jQuery("#listTableSupply"));
setSearchSelect("OtherSkill", jQuery("#listTableSupply"));
setSearchSelect("CurrentRole", jQuery("#listTableSupply"));
setSearchSelect("VisaStatus", jQuery("#listTableSupply"));
setSearchSelect("Country", jQuery("#listTableSupply"));
jQuery("#listTableSupply").jqGrid("filterToolbar", {
stringResult: true,
searchOnEnter: true,
defaultSearch: myDefaultSearch,
beforeClear: function () {
$(this.grid.hDiv).find(".ui-search-toolbar .ui-search-input>select[multiple] option").each(function () {
this.selected = false; // unselect all options
});
$(this.grid.hDiv).find(".ui-search-toolbar button.ui-multiselect").each(function () {
$(this).prev("select[multiple]").multiselect("refresh");
}).css({
width: "98%",
marginTop: "1px",
marginBottom: "1px",
paddingTop: "3px"
});
}
});
jQuery("#listTableSupply").jqGrid('setGridHeight', 300);
}
</script>
