使用ShieldUI同时进行列过滤

Question

我是web开发的新手，还接触过ShieldUI的grid小部件。他们的演示版本提供了许多易于自定义的代码，但我无法同时进行列过滤。我在工具栏(底部)中创建了选择选项，但这些选择过滤器彼此独立。我想要的是使用表格底部的select过滤器同时过滤列。

请在这里查看jsfiddle。这是我正在做的事情的示例screenshot。

这是我目前所做的: js文件，css文件，html文件。

请注意，有加载的js来使此工作，请参阅fiddle。

谢谢你们所有人。

​

		$(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>

​

Answer 1

要根据两个条件进行筛选，应将dataSource.filter设置为筛选器的数组或字典。

有关更多详细信息，请查看this documentation page。