vue2+kendo的ui整合
整合
這次帶給大家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": "张三"
}
//.......
]
}登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
相關閱讀：
以上是vue2+kendo的ui整合的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
3 週前
By DDD
Windows 11 KB5054979中的新功能以及如何解決更新問題
2 週前
By DDD
威爾R.E.P.O.有交叉遊戲嗎？
1 個月前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
Spring Boot與NoSQL資料庫的整合使用
Jun 22, 2023 pm 10:34 PM
隨著網路的發展，大數據分析和即時資訊處理成為了企業的重要需求。為了滿足這樣的需求，傳統的關係型資料庫已經不再滿足業務和技術發展的需要。相反，使用NoSQL資料庫已經成為了一個重要的選擇。在這篇文章中，我們將討論SpringBoot與NoSQL資料庫的整合使用，以實現現代應用程式的開發和部署。什麼是NoSQL資料庫?NoSQL是notonlySQL
UniApp實作Vue.js框架的完美整合
Jul 04, 2023 pm 08:49 PM
UniApp實作Vue.js框架的完美整合引言：UniApp是一種基於Vue.js框架的跨平台開發工具，它能夠將一個Vue.js專案編譯成多個不同平台的應用程序，如iOS、Android、小程序等。 UniApp的優點在於能讓開發者只寫一套程式碼，就能夠同時適配多個平台，加快開發效率並降低開發成本。以下將介紹如何使用UniApp實作Vue.js框架的完美整合
Vue3相較於Vue2的變化：更強大的網路請求庫整合
Jul 08, 2023 pm 08:34 PM
Vue3相较于Vue2的变化：更强大的网络请求库整合随着Vue.js的持续发展和更新，Vue3作为Vue.js的下一个版本，带来了一些令人兴奋的变化和改进。其中一个最显著的变化就是更强大的网络请求库整合。在Vue2中，我们通常使用如axios等第三方库来进行网络请求，而在Vue3中，Vue开发团队已经提供了一个内置的网络请求库，它为我们提供了更直观和灵活的方
PHPcms與其他系統整合的實用技巧
Mar 15, 2024 am 08:18 AM
PHPcms與其他系統整合的實用技巧隨著網路技術的不斷發展，網站開發領域也變得愈加多樣化和複雜化。在實際的專案中，我們常常會面對不同系統之間需要整合的情況，這就需要我們具備一定的技巧和經驗來解決這些問題。本文將針對PHPcms系統與其他系統整合的情況，介紹一些實用的技巧和具體的程式碼範例，幫助開發者更好地應對挑戰。一、整合基本原理在進行系統整合時，首先需
PHP WebDriver整合：從入門到精通
Jun 15, 2023 am 09:52 AM
隨著網路的快速發展，Web應用程式的需求也不斷增加，而軟體測試作為保障企業應用程式品質的重要部分，也隨之變得越來越重要。然而，傳統的手工測試方法既費時又費力，而且容易出錯。自動化測試是解決這個問題的一種方法，其中Web應用程式的自動化測試已經成為一種常見的測試方式，其中，使用WebDriver進行Web應用程式自動化測試是一種非常受歡迎的方式。本文
深入理解Spring與Mybatis整合原理與實現
Feb 20, 2024 am 09:14 AM
深入理解Spring與Mybatis整合原理與實作一、引言Spring與Mybatis是Java開發中廣泛使用的兩個開源框架。 Spring是一個全面的應用程式開發框架，提供了許多功能，如依賴注入、AOP等。 Mybatis是一個持久化框架，透過它可以方便地操作資料庫。將兩者整合起來，可以更好地發揮它們的優勢，提升開發效率和程式碼品質。二、整合原理Spring的I
怎麼把多個ppt整合在一起
Mar 20, 2024 pm 11:10 PM
在進行分組作業時，不同的同學會進行不同部分的簡報的製作，那麼最後怎麼將幾個簡報合併為一個就是個問題了，也就是怎麼把多個ppt整合到一起呢？相信很多朋友也曾經遇到這種類似的問題，那麼這類問題該如何解決呢？下面就把解決這種問題的方法跟大家分享一下，希望可以幫助大家。首先開啟幾個ppt中的一個，然後在開始標籤中的新投影片中選擇「重複使用投影片」。在重用幻燈片中點擊“瀏覽”，選好其他組員做的ppt，可以看到所有的幻燈片都顯示出來了。在左邊的普通視圖中選好要插入投影片的位置（就是點擊一下那張幻
利用Webman實現網站的社群媒體整合
Aug 26, 2023 am 11:43 AM
利用Webman實現網站的社群媒體整合隨著社群媒體的興起，越來越多的網站開始將社群媒體整合進自己的平台中。這項措施不僅可以增加網站的使用者黏性，還能夠提升用戶的參與度和分享度。本文將介紹如何利用Webman框架來實現網站的社群媒體整合，並附帶對應的程式碼範例。 Webman是一個基於Kotlin語言開發的Web框架，它的設計理念是簡單、輕量級且易於擴展。要使用We
