不确定之前是否曾询问过此事。
我有一个div类.row(我正在使用bootstrap)。在行内有多个列,每个列都有一个标签。
我必须按照其中的标签过滤行(使用标签组合)。我怎么能这样做呢?
我有以下代码,但它不起作用。这是因为我不能按标签过滤。目前,过滤器按任何项目过滤!
创建行的代码:
function FillSelectSupplier(returnedInformation, chkButton) {
var rows = returnedInformation.split('~');
rows.splice(rows.length - 1, 1);
if (rows.length > 0) {
$('#divJobsContainer').css('max-height', '585px');
var html = '<div class="row row-large-gap"><div class="col-sm-1"><label>Q-Num</label></div><div class="col-sm-1"><label>C-Num</label></div><div class="col-sm-5"><label>Name</label></div><div class="col-sm-5"><label>Client Name</label></div></div>';
for (var row in rows) {
var dataItems = rows[row].split('|');
if (dataItems.length > 0) {
var name = dataItems[3].toLowerCase();
name = (name.length > 34 ? name.substring(0, 33) + "..." : name);
var clientName = dataItems[4].toLowerCase();
clientName = (clientName.length > 34 ? clientName.substring(0, 33) + "..." : clientName);
html += '<div class="row rowToFilter"><hr /><div class="col-sm-1"><label class="text-left">' + dataItems[1] + '</label></div>' +
'<div class="col-sm-1"><label class="text-left">' + dataItems[2] + '</label></div>' +
'<div class="col-sm-5"><label class="text-left pull-left marginLeft">' + name + '</label></div>' +
'<div class="col-sm-5"><label class="text-left pull-left lblClientName">' + clientName + '</label><input type="button" class="pull-right btn btn-primary btn-xs btnSelectChoice" value="' + (chkButton ? "Change" : "Select") + '" id="' + dataItems[0] + '" /></div></div>';
} else {
html = '<div class="singleSupplierArea"><label class="text-danger">No Data Found</label></div>';
$('#divJobsContainer').append(html);
return;
}
}
$('#divJobsContainer').append(html);
if (chkButton) {
var moreHtml = '<div class="row row-large-gap-bottom" id="changeDateDiv"><div class="col-sm-12 text-center"><div class="input-group input-group-sm"><span class="input-group-addon" id="chgDate">Change Date</span><input type="text" id="txtChangeDate" class="form-control"><span class="input-group-btn"><button runat="server" id="btnChangeNewDate" class="btn btn-default" type="button">Go!</button></span></div></div></div>';
$('#divJobsContainer').css('max-height', '485px');
$('.modal-body').prepend(moreHtml);
$(document).on('focus', '#txtChangeDate', function () {
$(this).datepicker({
autoclose: true,
clearBtn: true,
endDate: "0d",
format: "dd/mm/yyyy",
todayBtn: true,
todayHighlight: true,
});
});
}
}
}
onkeyup的代码:
$('#txtClientName, #txtProjectName, #txtCnoFilter, #txtQnoFilter').keyup(function () {
var rows = $('#divJobsContainer').find("div.rowToFilter").hide();
var clientName = $('#txtClientName').val();
var txtProjectName = $('#txtProjectName').val();
var txtCNo = $('#txtCnoFilter').val();
var txtQnoFilter = $('#txtQnoFilter').val();
if (txtQnoFilter == "" && clientName == "" && txtProjectName == "" && txtCNo == "") {
rows.show();
} else {
rows.filter(":containsIgnoreCase('" + clientName + "')")
.filter(":containsIgnoreCase('" + txtProjectName + "')")
.filter(":containsIgnoreCase('" + txtCNo + "')")
.filter(":containsIgnoreCase('" + txtQnoFilter + "')").show();
}
});
$.extend($.expr[':'].containsIgnoreCase = function (n, i, m) {
return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
}
);
编辑:已添加:containignoreCase