vue2+kendo的ui整合

来源：动视网责编：小采时间：2020-11-27 20:01:24

vue2+kendo的ui整合

vue2+kendo的ui整合:这次给大家带来vue2+kendo的ui整合，使用vue2+kendo的ui整合的注意事项有哪些，下面就是实战案例，一起来看一下。/* * common.js *///配置区kendo.culture("zh-CN");//中文显示const defaultGridOptions = { sor

推荐度：

点击下载本文 文档为doc格式

导读vue2+kendo的ui整合:这次给大家带来vue2+kendo的ui整合，使用vue2+kendo的ui整合的注意事项有哪些，下面就是实战案例，一起来看一下。/* * common.js *///配置区kendo.culture("zh-CN");//中文显示const defaultGridOptions = { sor

这次给大家带来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": "张三"
 } 
 //.......
 ] 
}

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

vue2+kendo的ui整合

推荐度：

点击下载本文 文档为doc格式

标签： VUE ui kendoui

热门焦点

vue2+kendo的ui整合

vue2+kendo的ui整合

vue2+kendo的ui整合

最新推荐

猜你喜欢

热门推荐