关于Kendo ui 的简单介绍

项目中使用到了，kendo ui 控件，如

列表，

下拉框，

饼图，

树结构，

图表。

这里简单介绍下，列表，下拉框，使用kendo ui 生成的方法（仅js代码）

一，列表（项目中的实际代码，有相关封装，具体使用方式并不完全相同，请注意）

步骤

1，项目中引入kendo ui 控件的js。

2，定义 grid 

var _divUserGrid = $("#divUserGrid");

GridUtils.buildWidget(_divUserGrid, {
 type: "odata",
dataSource: {
transport: {
read: {
url: CONTEXT + "/domain/user/findUser/"+DEPT_ID
}
},
schema: {
model: {
fields: {
keyword: {
type: "string"
},
deptName: {
type: "string"
}
}
}
},
sort: {
field: "loginName",
dir: "asc"
},
requestStart: function(e) {
e.sender.transport.options.read.data = {
keyword: _txtUserKeyword.val(),
includeSub:_cbxUserIncludeSub.prop("checked")
};
},
serverSorting: true,
serverPaging: true

},
sortable: {
mode: "single",
                allowUnsort: false
},
pageable: {
pageSizes: [20, 40, 60, 80, 100],
messages: {
itemsPerPage: "条 / 页"
}
},
columns: [
{
width : 50,
template : "<input type='checkbox' class='e-selector' data='#= id #' />",
title: "<input type='checkbox' οnchange='userListViewPage.selectAll(this.checked);' />",
menu : false
},
{
field: "displayName",
title: "显示名",
template: "#= !Data.isUndefinedOrNull(displayName) ? displayName : '' #",
width: 165
}, {
field: "loginName",
title: "登陆名",
template: "#= !Data.isUndefinedOrNull(loginName) ? loginName : '' #",
width: 120
}, {
field: "status.displayName",
title: "状态",
template: "<span class='e-icon-user-status-#= !Data.isUndefinedOrNull(status.value) ? status.value : '' #'></span>#= !Data.isUndefinedOrNull(status.displayName) ? status.displayName : '' #",
width: 120
} , {
field: "desktopCount",
title: "桌面数",
template: "#= !Data.isUndefinedOrNull(desktopCount) ? desktopCount : '' #",
width: 200
}, {
field: "terminalCount",
title: "终端数",
template: "#= !Data.isUndefinedOrNull(terminalCount) ? terminalCount : '' #",
width: 200
},
{ title: "部门", 
field: "department.displayName", 
template: "#= !Data.isUndefinedOrNull(department) ? department.displayName : '' #" ,
}
, {
command: [{
name : "btnRowEditUser",
text : "编辑",
className : "e-icon-edit",
click : function(evt) {
var grid = this;
var data = grid.dataItem($(evt.currentTarget).closest("tr"));
HttpUtils.ajax({
url:CONTEXT + "/domain/user/get",
data: 
{
userId: data.id

},
success: function(result, textStatus, jqXHR) {


var accountInfoOperationDialog = top.applicationShell.getCreatePlatformResourceMenu().getAccountInfoOperationDialog();
accountInfoOperationDialog.open(REFERENCE.DialogMode.Update.value, result);
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText) {
var data = JSON.parse(jqXHR.responseText);

MessageDialog.loading(false);
MessageDialog.error(data.message);
}
}
});
}
},{
name : "btnRowEditUserPassword",
text : "修改密码",
className : "e-icon-access",
click : function(evt) {
var grid = this;
var data = grid.dataItem($(evt.currentTarget).closest("tr"));
HttpUtils.ajax({
url:CONTEXT + "/system/account/findReferencesForCreation",
success: function(result, textStatus, jqXHR) {
var changePasswordDialog = top.applicationShell.getCreatePlatformResourceMenu().getChangePasswordDialog();
changePasswordDialog.open(REFERENCE.DialogMode.UpdateDomainUser.value, {id: data.id}, result);
},
error: function(jqXHR, textStatus, errorThrown) {
if(jqXHR.responseText) {
var data = JSON.parse(jqXHR.responseText);

MessageDialog.loading(false);
MessageDialog.error(data.message);
}
}
});
}
},{
name : "btnRowUnlock",
text : "解锁",
className : "e-icon-user-unlock",
click : function(evt) {
var grid = this;
var data = grid.dataItem($(evt.currentTarget).closest("tr"));
confrimOperation(data,"确定解锁用户 \"" + data.displayName + "\" ？",CONTEXT + "/domain/user/unlock");
}
}],
title: "<b>操作</b>",
width: 80
}
],
dataBound: function(evt) {
//set visible by permission
$("#divUserGrid").find("> .k-grid-content tr").each(function(index, data) {
var row = $(data);
var btnRowEditUser = row.find("> td > a.k-grid-btnRowEditUser");
var btnRowEditUserPassword = row.find("> td > a.k-grid-btnRowEditUserPassword");
btnRowEditUser.setVisible(true);
btnRowEditUserPassword.setVisible(true);
if(!_updatePermission ) {
btnRowEditUser.setVisible(false);
}
if(!_updatePasswordPermission || _organizationType != "LOCAL"){
btnRowEditUserPassword.setVisible(false);
}
});

$("#divUserGrid td").highlight(_txtUserKeyword.val());
$("#divUserGrid td:nth-child(3)").css({color:"blue"});
$("#divUserGrid td:nth-child(3)").bind("click",function(evt){
evt.preventDefault();
//get id
var dataItem = _divUserGrid.data("kendoGrid").dataItem($(evt.currentTarget).closest("tr"));
var id = dataItem.id;
//add tab
top.applicationShell.addTab("[用户]"+dataItem.displayName,CONTEXT+"/domain/user/"+id);
});
},
resizeExtend: true
});

下拉框：

var _selNetworkCardAddIpType = $("#selNetworkCardAddIpType");

_selNetworkCardAddIpType.kendoDropDownList(WidgetOption.dropDownList({
dataTextField: "displayName",
dataValueField: "id"
}));
DropDownListUtils.setItems(_selNetworkCardAddIpType,[{displayName:"DHCP",id:"true"},{displayName:"手动",id:"false"}]);