我是Web开发的新手，我遇到了ShieldUI的网格小部件。他们的演示版提供了许多易于定制的代码，但我无法进行同步列过滤。我在工具栏（底部）中创建了选择选项，但这些选择过滤器彼此独立。我想要的是使用表格底部的选择过滤器进行同步列过滤。
请在此处查看jsfiddle。以下是我正在做的screenshot示例。
这是我到目前为止所做的：js文件，css文件，html文件。
请注意，有加载的js可以使其工作，请参阅小提琴。
谢谢大家。
$(document).ready(function () {
//------------------------Basic Initialization------------------------------------
$("#grid").shieldGrid({
dataSource: {
data: gridData
},
sorting: {
multiple: true
},
rowHover: true,
scrolling: true,
resizing: true,
columnReorder: true,
height: "450px",
filtering: {
enabled: false
},
paging: {
pageSize: 12
},
events: {
detailCreated: detailCreated,
command: command
},
columns: [
{ field: "id", width: "70px", title: "ID" },
{ field: "name", title: "Person Name" },
{ field: "age", title: "Age" },
{ field: "company", width: "170px", title: "Company Name"},
{ field: "balance", title: "Balance" }
],
toolbar: [
{
template: $("#template").html(),
position: "bottom"
}
],
});
$("#Age").shieldDropDown({
events:
{
select: function (e) {
var dataSource = $("#grid").swidget().dataSource,
value = e.item.value;
if (value) {
dataSource.filter = { path: "age", filter: "eq", value: value };
}
else {
dataSource.filter = null;
}
dataSource.read();
}
}
});
$("#Name").shieldDropDown({
events:
{
select: function (e) {
var dataSource = $("#grid").swidget().dataSource,
value = e.item.value;
if (value) {
dataSource.filter = { path: "name", filter: "eq", value: value };
}
else {
dataSource.filter = null;
}
dataSource.read();
}
}
});
$("#Company").shieldDropDown({
events:
{
select: function (e) {
var dataSource = $("#grid").swidget().dataSource,
value = e.item.value;
if (value) {
dataSource.filter = { path: "company", filter: "eq", value: value };
}
else {
dataSource.filter = null;
}
dataSource.read();
}
}
});
//--------------------------------Conditional Hierarchy-------------------------------
function command(e) {
// do not show the friends detail grid for female persons
if (e.commandName == "expandButtonCreate") {
if (e.item.gender == "female") {
e.cancel = true;
}
}
}
function detailCreated(e) {
// add a nested grid to the row, containing the person's friends
$("<div/>")
.appendTo(e.detailCell)
.shieldGrid({
dataSource: {
data: e.item.friends
},
sorting: {
multiple: true
},
paging: {
pageSize: 5
},
columns: [
{ field: "id", width: "100px", title: "Friend ID" },
{ field: "name", title: "Friend Name" }
]
});
}
//-------------------------Search Box 1---------------------------------------------
var TableSource = $("#grid").swidget().dataSource,
input = $("#filterbox input"),
timeout,
value;
input.on("keydown", function () {
clearTimeout(timeout);
timeout = setTimeout(function () {
value = input.val();
if (value) {
TableSource.filter = {
or: [
{ path: "id", filter: "contains", value: value },
{ path: "name", filter: "contains", value: value },
{ path: "company", filter: "contains", value: value },
{ path: "phone", filter: "contains", value: value },
{ path: "age", filter: "contains", value: value }
]
};
}
else {
TableSource.filter = null;
}
TableSource.read();
}, 300);
});
//---------------------Show/Hide Columns------------------
$("#columnChooser").shieldDropDown();
$("#hideColumn").shieldButton({
events: {
click: function (e) {
var columnName = $("#columnChooser").swidget().value();
$("#grid").swidget().hideColumn(columnName);
}
}
});
$("#showColumn").shieldButton({
events: {
click: function (e) {
var columnName = $("#columnChooser").swidget().value();
$("#grid").swidget().showColumn(columnName);
}
}
});
});
/*filterbox*/
#filterbox {
text-align: right;
margin-bottom: 20px;
font-family:Calibri;
font-size: 2em;
}
#filterbox input {
border: 1px solid #C4C4C4;
padding: 8px;
width: 260px;
}
#filterbox a {
display: inline-block;
*display: inline;
width: 26px;
height: 26px;
vertical-align: middle;
}
#filterbox img {
line-height: 0;
}
/*Hide/Show Columns*/
div .grid-config .sui-radiobutton
{
line-height: 15px;
margin-bottom: 15px;
}
.grid-config .sui-dropdown
{
font-family: Arial, sans-serif;
font-size: 14px;
}
/*Grid Div size*/
#grid {
width: 100%;
margin: auto;
}
/*Toolbar*/
.toolbar {
float: left;
padding-right: 10px;
font-size:1em;
font-family:Calibri;
}
.sui-grid .sui-toolbar {
height: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/x-shield-template" id="template">
<div class="toolbar">
<label class="ageLabel" for="age">Filter by Age:</label>
<select id="Age" style="width: 150px">
<option value="">Choose value</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="39">39</option>
<option value="40">40</option>
</select>
<label class="nameLabel" for="name">Filter by Name:</label>
<select id="Name" style="width: 150px">
<option value="">Choose value</option>
<option value="Sue Sharpe">Sue Sharpe</option>
<option value="Juanita Weaver">Juanita Weaver</option>
</select>
<label class="companyLabel" for="company">Filter by Company:</label>
<select id="Company" style="width: 150px">
<option value="">Choose value</option>
<option value="Applidec">Applidec</option>
<option value="Syntac">Syntac</option>
</select>
</div>
</script>
<div id="filterbox">
Search here:
<input type="text" />
</div>
<div id="grid"></div>
<div>
Column:
<select id="columnChooser">
<option value="id">ID</option>
<option value="name">Person Name</option>
<option value="company">Company Name</option>
<option value="balance">Balance</option>
<option value="age">Age</option>
</select>
<button id="hideColumn">Hide Column</button>
<button id="showColumn">Show Column</button>
</div>