kendoui学习笔记（查询、表格自适应高度、自定义操作command、弹框window）
司寇星海
用于查询的写法：
第一种写法
$("#search").click(function () {
var name = $("#name").val();
grid.data("kendoGrid").dataSource.filter([
{ field: "Name", value: name },
{ field: "Age", value: 123 }
]);
});第二种写法
read: {
type: "post",
url: that.crudServiceBaseUrl + "/read",
dataType: "json",
data: function () {
return that.getPara();
}
}, $(that.dv).on('click', 'a,button,.btns', function () {
var v = $(this).data('command');
if (v == 'search') {
that.search();
}
}) getPara: function () {
var myMap = {};
var num = $("input[name='num']").val().trim();
if (num !== "") {
myMap['num'] = num;
}
var nickname = $("input[name='nickname']").val().trim();
if (nickname !== "") {
myMap['nickname'] = nickname;
}
return {where: JSON.stringify(myMap)};
},
search: function () {
this.dataSource.read();
},
表格自适应高度：
this.size();
$(window).resize(function () {
that.size();
}); size: function () {
var headerHeight = $(".layui-header").outerHeight();
var tabsHeight = $("#LAY_app_tabs").outerHeight();
var toolbarHeight = $(this.dv).find('.toolbar').outerHeight() + 15;
var gridheight = window.innerHeight - headerHeight - tabsHeight - toolbarHeight - 2 * 15;
var otherElements = this.grid.children().not(".k-grid-content"), otherElementsHeight = 0;
otherElements.each(function () {
otherElementsHeight += $(this).outerHeight();
});
var dataArea = this.grid.find(".k-grid-content");
dataArea.height(gridheight - otherElementsHeight - 2);
}另外附上两个参考链接：
http://jsbin.com/yumexugo/1/edit?html,css,js,output
http://jsfiddle.net/dimodi/SDFsz/
自定义操作：
{
name: "details",
click: function(e) {
e.preventDefault();
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var data = this.dataItem(tr);
console.log("Details for: " + data.name);
}
} 在command内自定义模板，不能根据id或者class引入外部模板，如下写法是行不通的，不能识别模板变量nickname
{
command: [
{name: "edit", text: {edit: "编辑", update: "保存", cancel: "取消"}},
{name: "reset", text: "重设密码", click: that.reset},
{template: kendo.template($(".update_active").html())}
], title: "操作", width: "250px"
}],<script class="update_active" type="text/x-kendo-template">
<div class='employee-name'>#: nickname #</div>
</script>后来尝试如下写法，依然不行，浏览器会报错，提示status_switch没有定义
template:
"<a class='k-button' href='index.php?r=apply/admin/showapply&apply_id=#=apply_id#&apply_from=#=apply_from#' style='min-width:24px'>查看</a><a class='k-button' style='min-width:24px' onclick='IfGoToDistributePermission(#=apply_id# ,#=apply_status_en#)'>分配</a>" +
"# if (status_switch == 2) { #" +
"<a class='k-button' onclick='RecyclePermission(#=apply_id#)'>回收</a>" +
"# } #",另外在其他文章中看到另外一种写法，可以将用户禁用和启用的状态，绑定到方法中，但是我自己的程序没办法用that.函数名这种方式实现，这个还有待研究
$("#grid").kendoGrid({
dataSource: dataSource,
columns: [
{ field: "item" },
{ field: "foo" },
{ template: '<a class="k-button k-grid-CustomCommand" href="\\#">#= determineName(data) #</a>' }
]
});
//hook up to the click event
$("#grid").data("kendoGrid").tbody.on("click", ".k-grid-CustomCommand", function(e) {
console.log("click fired");
});
//function that calculates the command text
function determineName(data) {
return (data.foo % 2) ? "odd" : "event";
}我现在使用如下方式绑定
this.grid.data("kendoGrid").tbody.on("click", ".k-grid-disable",that.disable);由于在command内部添加启用/禁用按钮，通过绑定模板或者直接在command内部写模板，都是行不通的，都提示找不到if里面的变量。最后只能将操作里面的按钮全部模板化，这样才可以识别模板变量的值。
columns: [
{field: "num", title: "登录名", width: "100px"},
{field: "nickname", title: "真实姓名", width: "100px"},
{field: "", title: "所属角色", width: "100px"},
{field: "ucreation_date", title: "创建时间", width: "100px"},
{field: "lastlogin", title: "最后登陆时间", width: "100px"},
{field: "status_switch", title: "状态", width: "100px"},
{template: $(".usermanage_operater").html(), title: "操作", width: "150px"}
],
editable: {
mode: "popup",
template: kendo.template($(".usermanage_edit").html())
},<script class="usermanage_operater" type="text/x-kendo-template">
<a role="button" class="k-button k-button-icontext k-grid-edit"><span class="k-icon k-i-edit"></span>修改</a>
<a role="button" class="k-button k-button-icontext k-grid-delete"><span class="k-icon k-i-close"></span>删除</a>
# if (status_switch == 1) { #
<a role="button" class="k-button k-button-icontext k-grid-disable">禁用</a>
# } else {#
<a role="button" class="k-button k-button-icontext k-grid-disable">启用</a>
#}#
</script>通过这种方式，在新增的时候看，又提示报错，于是在model里面加入status_switch
schema: {
model: {
id: "id",
fields: {
status_switch: {type: "boolean"},
}
},自定义弹框window：
<script>
var wnd,
detailsTemplate;
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
pageSize: 20,
data: createRandomData(50)
},
pageable: true,
height: 550,
columns: [
{ field: "FirstName", title: "First Name", width: "140px" },
{ field: "LastName", title: "Last Name", width: "140px" },
{ field: "Title" },
{ command: { text: "View Details", click: showDetails }, title: " ", width: "180px" }]
}).data("kendoGrid");
wnd = $("#details")
.kendoWindow({
title: "Customer Details",
modal: true,
visible: false,
resizable: false,
width: 300
}).data("kendoWindow");
detailsTemplate = kendo.template($("#template").html());
});
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
</script>
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<h2>#= FirstName # #= LastName #</h2>
<em>#= Title #</em>
<dl>
<dt>City: #= City #</dt>
<dt>Birth Date: #= kendo.toString(BirthDate, "MM/dd/yyyy") #</dt>
</dl>
</div>
</script>showDetails方法将dataItem传递给模板templete，wnd.center().open() 打开自定义弹框，但是不清楚如何在模板中添加一些复杂的组件，上述情况更适合查看详情类弹框
类似资料：