我想在剑道网格的列上创建一个搜索栏，以便在输入值时自动在网格中搜索？这是我的 HTML 和 javascript 代码？
$(document).ready(function () {
var selectedRow = null;
dataSource = new kendo.data.DataSource({
transport: {
batch: true,
read: function (options) {
$.ajax({
url: "/api/Companies/GetAllCompanies2",
type: "GET",
dataType: "json",
cache: false,
crossDomain: true,
processData: true,
contentType: "application/json; charset=utf-8",
async: true,
success: function (result) {
options.success(eval(result));
},
error: function (xhr, status, error) {
alert(error.responseTextss);
}
});
},
},
error: function (e) {
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
batch: false,
pageSize: 20,
schema: {
model: {
fields: {
Id: { type: "int" },
CurrentCurrencyCode: { editable: true, type: "int" },
ShortName: { editable: true, type: "string" },
FullName: { editable: true, type: "string" },
ContactPerson: { editable: true, type: "string" },
Address1: { editable: true, type: "string" },
CompanyCity: { editable: true, type: "string" },
CompanyState: { editable: true, type: "string" },
CompanyCountry: { editable: true, type: "string" },
ZipPostCode: { editable: true, type: "string" },
TelArea: { editable: true, type: "string" }
}
}
}
});
var grid = $("#grid").kendoGrid({
change: function (e) {
selectedRow = this.select();
var item = this.dataItem(selectedRow);
kendo.bind($("#gridEditor"), item);
},
dataSource: dataSource,
selectable: true,
pageable: true,
height: 500,
filterable: {
mode: "row"
},
columns: [{ field: 'Id', width: '150px' },
{
field: 'CurrentCurrencyCode', width: '145px', filterable: {
cell: { operator: "contains" }
}},
],
}).data("kendoGrid");
});
</script>
<ul class="nav nav-pills nav-stacked">
</ul>
<div id="grid"
style=" margin-left: 196px; width: 50%; "></div>
<script type="text/javascript">
function updatedb() {
var id = document.getElementById('id').value;
var ccco = document.getElementById('ccco').value;
var sn = document.getElementById('sn').value;
var fn = document.getElementById('fn').value;
var cp = document.getElementById('cp').value;
var add = document.getElementById('add').value;
var cci = document.getElementById('cci').value;
var cs = document.getElementById('cs').value;
var cco = document.getElementById('cco').value;
var zpc = document.getElementById('zpc').value;
var tl = document.getElementById('tl').value;
$.ajax({
url: "/api/Companies/SaveDefCompny",
type: "POST",
data: '{Id: "' + id + '",CurrentCurrencyCode: "' + ccco + '", ShortName: "' + sn + '" , FullName: "' + fn + '", ContactPerson: "' + cp + '", Address1: "' + add + '", CompanyCity: "' + cci + '", CompanyState: "' + cs + '",CompanyCountry: "' + cco + '",ZipPostCode: "' + zpc + '",TelArea: "' + tl + '"}',
dataType: "json",
cache: false,
crossDomain: true,
processData: true,
contentType: "application/json; charset=utf-8",
async: true,
success: function (result) {
options.success(eval(result));
},
error: function (xhr, status, error) {
alert(error.responseTextss);
}
});
}
</script>
<form >
<div id="gridEditor" style="margin-left: 956px; margin-top: -500px; ">
<input id="ccco" type="text" name="ItemName" class="k-textbox" data-bind="value: CurrentCurrencyCode"><br />
<input id="sn" type="text" name="ItemName" class="k-textbox" data-bind="value: ShortName"><br />
<input id="fn" type="text" name="ItemName" class="k-textbox" data-bind="value: FullName"><br />
<input id="cp" type="text" name="ItemName" class="k-textbox" data-bind="value: ContactPerson"><br />
<input id="add" type="text" name="ItemName" class="k-textbox" data-bind="value: Address1"><br />
<input id="cci" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCity"><br />
<input id="cs" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyState"><br />
<input id="cco" type="text" name="ItemName" class="k-textbox" data-bind="value: CompanyCountry"><br />
<input id="zpc" type="text" name="ItemName" class="k-textbox" data-bind="value: ZipPostCode"><br />
<input id="tl" type="text" name="ItemName" class="k-textbox" data-bind="value: TelArea"><br /><br />
<input id="id" type="text" class="k-textbox" name="ItemName" data-bind="value: Id"><br />
<br />
<br />
<span style="margin-left:10px"><input id="save" class="k-button" onclick="updatedb()" type="button" value="update"></span><br>
</div>
</form>
谁能告诉我如何在所有列上添加搜索框以及如何设置关键更改事件？