这次给大家带来vue2+kendo的ui整合，使用vue2+kendo的ui整合的注意事项有哪些，下面就是实战案例，一起来看一下。
/*
* common.js
*///配置区kendo.culture("zh-cn");//中文显示const defaultgridoptions = {
sortable: true, groupable: false, selectable: true, editable: false, resizable: true, reorderable: true, pageable: { refresh: true, pagesize: 20, pagesizes: [20, 50, 100, 200]
}
}; //表格默认配置--用于配置复用//函数区function getcontainerh() { //获取表内容主体(包含头部标题与底部分页栏)高度
var nbar = $(".nav-bar");//<=====我这里定义的是搜索栏
var outerheight = 0;
$(".nav-bar").each(function(i, v) {
outerheight += $(v).outerheight();
}); return window.innerheight - outerheight - 1;
}function resizegrid(containerheight) { //设置表内容高度
containerheight = (containerheight == undefined ? getcontainerh() : containerheight);
$('.k-grid.dynamicheight,.dynamic-height.k-grid').each(function() { var grid = $(this),
h1 = grid.find('div.k-grid-toolbar').outerheight() || 0,
h2 = grid.find('div.k-grouping-header').outerheight() || 0,
h3 = grid.find('div.k-grid-header').outerheight() || 0,
h4 = grid.find('div.k-grid-pager').outerheight() || 0,
ch = containerheight - 2 - h1 - h2 - h3 - h4;
if(ch > 0) {
grid.find('div.k-grid-content').css('maxheight', ch + 'px');
grid.find('div.k-grid-content-locked').css('maxheight', ch + 'px');
}
});
}function getdatasourceconfig(idfield, readurl, filter) { //表格配置初始化
return { schema: { model: { id: idfield
}, data: function(response) { return response.data || response;
}, total: 'total'
}, transport: { parametermap: function(options) { return kendo.stringify(options);
}, read: gettransport(readurl)
}, pagesize: 20, serverpaging: true, serverfiltering: true, serversorting: true, filter: filter, selectable: "row"
};
}function getdatasource(idfield, readurl, filter) { //创建绑定数据
return new kendo.data.datasource(getdatasourceconfig(idfield, readurl, filter));
}function gettransport(url, type, datatype, contenttype) {//数据源地址配置---可用于表格以外kendo ui组件配置
return { contenttype: contenttype || 'application/json', datatype: datatype || 'json', type: type || 'post', async: false, url: url
};
}function togridfilter(o) { //转为表 filter 对象
var filter = { logic: o.logic || "and", filters: []
}; for(var i in o) { var m = o[i]; if(i === "logic") { continue;
} if($.trim(m) && (typeof m === "string" || typeof m === "number")) {
filter.filters.push({ field: i, value: $.trim(m), operator: "eq"
});
} else if(typeof m === "object" && $.trim(m.value)) { if(m.operator === "in") { var value = m.value.split("/");
filter.filters.push({ field: i, value: value, operator: m.operator || "in"
});
} else {
filter.filters.push({ field: i, value: $.trim(m.value), operator: m.operator || "eq"
});
}
} else if(typeof m === "object" && m.type === "range") { if(m.start) filter.filters.push({ field: i, value: m.start, operator: "gte"
}); if(m.end) {
filter.filters.push({ field: i, value: m.end, operator: "lte"
});
}
}
} return filter;
}//......以下是根据自己的项目进行配置
2.页面
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>demo</title>
<head>
<meta charset="utf-8">
<title></title>
<!--以下地址应用根据实际情况使用-->
<link href="../plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../plugins/kendoui/styles/kendo.common-material.min.css" rel="stylesheet">
<link href="../plugins/kendoui/styles/kendo.material.min.css" rel="stylesheet">
<script src="../public/js/vue.min.2.1.10.js"></script>
<script src="../public/js/jquery.3.1.1.min.js"></script>
<script src="../plugins/kendoui/js/kendo.all.min.js"></script>
<script src="../plugins/kendoui/js/cultures/kendo.culture.zh-cn.min.js"></script>
<link href="../public/css/main_layout.css" rel="stylesheet" data-info="这个css是对全局页面样式的覆盖重写">
<script src="./common.js"></script>
</head>
</head>
<body>
<div id="app">
<!--搜索栏+按钮栏-->
<div class="nav-bar">
<div class="btn-group">
<button type="button" data-target="#modal_theme_primary" class="btn btn-default" @click="addpage()"><i class="icon-plus2"></i>新增</button>
<button type="button" class="btn btn-default" @click="del()"><i class="icon-cross2"></i>删除</button>
</div>
<div class="input-group" style="float: right;">
<input type="text" class="form-control" v-model="search.searchtext">
<div class="input-group-btn">
<button type="button" class="btn btn-default" aria-label="help" @click="search.searchtext=''"><span class="icon-rotate-cw3"></span></button>
<button type="button" class="btn btn-default" @click="onsearch"><i class="icon-search4"></i>搜索</button>
</div>
</div>
</div>
<!--主体-->
<div id="main-content">
<div class="grid-wrapper">
<!--kendo grid-->
<div id="griduser" class="dynamic-height"></div>
</div>
</div>
</div>
<script>
/*
*object.assign(obj1,obj3,obj3,...) 用来对象合并 这里讲两个配置合并
*/
var gridoptions2 = object.assign(defaultgridoptions, { datasource: {},//初始化空数据源对象
columns: [{//列头配置-详情请转
field: "rownumber", title: " ", template: (dataitem) => app.datasource.data().indexof(dataitem) + 1,//<===计算表行序号并显示出来
width: 45
}, { title: "用户名",//绑定的id
field: "username",//绑定的文字
template: "<a title='修改' onclick=\"app.addpage('create?userid=#= userid #')\" >#= username# </a>",//自定义显示模板
width: 200
}, { title: "姓名", field: "fname", width: 200
}, { title: "邮箱", field: "email", width: 200
}, { title: "工号", field: "number", width: 200
}/**略**/], selectable: "multiple"//多选----可选值row cell;multiple, row ;multiple cell
}); var app = new vue({ el: "#app", data: { search: { searchtext: "搜索文字",
}, grid: null, //kendo grid对象
gridoptions: gridoptions2, //kendo grid对象配置
datasource: {} //kendo grid对象数据源
}, methods: { reload: function() {//初始化grid
this.gridoptions.datasource = this.datasource = getdatasource("roleid", "./测试数据.json"); this.grid = $("#griduser").kendogrid(this.gridoptions);
resizegrid();
}, addpage: function() {//<====添加页面与修改页面是共用的
alert("弹出添加页面遮罩层");
}, del: function() { var tmpgrid = this.grid.data("kendogrid"); var selectedids = [];//对象id集合
var rows = tmpgrid.select(); //获取表格选中行
if(!rows.length > 0) {
alert("请选择"); return;
}
if(!confirm("确定要删除吗？")) return;
rows.each(function(i, row) { var dataitem = tmpgrid.dataitem(row); if(dataitem) {
selectedids.push(dataitem.userid);
}
});
$.ajax({ type: "post", url: "/删除地址", data: selectedids, success: function(data) { /***成功 **/
}, error: function() { /***错误**/
}
});
}, onsearch: function() { console.log("搜索", this.search, " ", togridfilter(this.search));
app.gridoptions.datasource.filter(togridfilter(this.search)); //
}
}
});
$(window).resize(function() {//表高度自适应
resizegrid();
});
app.reload(); </script>
</body> </html>
3.测试数据格式
/**
*测试数据.json
*/{ "total": 40,//总数
"data": [//返回的当前数据
{ "userid": "uuid", "username": "zhangshan", "password": "123456", "email": "zhangshan@xx.xxx",
"number": "xxx001", "fname": "张三"
}
//.......
]
}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
h5如何做图片上传预览组件
python3与js有什么不同
flv.js的使用详解
以上就是vue2+kendo的ui整合的详细内容。