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中文网其它相关文章！
相关阅读：
Atas ialah kandungan terperinci vue2+kendo的ui整合. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Penyepaduan dan penggunaan pangkalan data Spring Boot dan NoSQL
Jun 22, 2023 pm 10:34 PM
Dengan perkembangan Internet, analisis data besar dan pemprosesan maklumat masa nyata telah menjadi keperluan penting bagi perusahaan. Untuk memenuhi keperluan tersebut, pangkalan data hubungan tradisional tidak lagi memenuhi keperluan pembangunan perniagaan dan teknologi. Sebaliknya, menggunakan pangkalan data NoSQL telah menjadi pilihan penting. Dalam artikel ini, kita akan membincangkan penggunaan SpringBoot yang disepadukan dengan pangkalan data NoSQL untuk membolehkan pembangunan dan penggunaan aplikasi moden. Apakah pangkalan data NoSQL?
UniApp merealisasikan penyepaduan sempurna rangka kerja Vue.js
Jul 04, 2023 pm 08:49 PM
UniApp merealisasikan penyepaduan sempurna rangka kerja Vue.js Pengenalan: UniApp ialah alat pembangunan merentas platform berdasarkan rangka kerja Vue.js Ia boleh menyusun projek Vue.js ke dalam aplikasi untuk berbilang platform berbeza, seperti iOS, Android, Program kecil dll. Kelebihan UniApp ialah ia membenarkan pembangun menulis hanya satu set kod untuk menyesuaikan diri dengan berbilang platform pada masa yang sama, mempercepatkan kecekapan pembangunan dan mengurangkan kos pembangunan. Berikut akan memperkenalkan cara menggunakan UniApp untuk mencapai penyepaduan sempurna rangka kerja Vue.js
Perubahan dalam Vue3 berbanding Vue2: penyepaduan perpustakaan permintaan rangkaian yang lebih berkuasa
Jul 08, 2023 pm 08:34 PM
Perubahan dalam Vue3 berbanding Vue2: Penyepaduan perpustakaan permintaan rangkaian yang lebih berkuasa Memandangkan Vue.js terus membangun dan mengemas kini, Vue3, sebagai versi Vue.js yang seterusnya, membawa beberapa perubahan dan peningkatan yang menarik. Salah satu perubahan yang paling ketara ialah penyepaduan perpustakaan permintaan rangkaian yang lebih berkuasa. Dalam Vue2, kami biasanya menggunakan perpustakaan pihak ketiga seperti axios untuk membuat permintaan rangkaian Dalam Vue3, pasukan pembangunan Vue telah menyediakan perpustakaan permintaan rangkaian terbina dalam, yang memberikan kami kaedah yang lebih intuitif dan fleksibel.
Petua praktikal untuk menyepadukan PHPcms dengan sistem lain
Mar 15, 2024 am 08:18 AM
Petua praktikal untuk menyepadukan PHPcms dengan sistem lain Dengan perkembangan berterusan teknologi Internet, bidang pembangunan laman web menjadi lebih pelbagai dan kompleks. Dalam projek sebenar, kita sering menghadapi situasi di mana sistem yang berbeza perlu disepadukan, yang memerlukan kita mempunyai kemahiran dan pengalaman tertentu untuk menyelesaikan masalah ini. Artikel ini akan memperkenalkan beberapa petua praktikal dan contoh kod khusus untuk penyepaduan sistem PHPcms dengan sistem lain untuk membantu pembangun menghadapi cabaran dengan lebih baik. 1. Prinsip Asas Penyepaduan Apabila melakukan penyepaduan sistem, pertama sekali perlu
Integrasi PHP WebDriver: dari pemula hingga mahir
Jun 15, 2023 am 09:52 AM
Dengan perkembangan pesat Internet, permintaan untuk aplikasi Web juga meningkat, dan ujian perisian, sebagai bahagian penting dalam memastikan kualiti aplikasi perusahaan, telah menjadi semakin penting. Walau bagaimanapun, kaedah ujian manual tradisional memakan masa, susah payah, dan mudah ralat. Ujian automatik adalah satu cara untuk menyelesaikan masalah ini Ujian automatik aplikasi web telah menjadi kaedah ujian yang biasa. Artikel ini
Pemahaman mendalam tentang prinsip dan pelaksanaan integrasi Spring dan Mybatis
Feb 20, 2024 am 09:14 AM
Pemahaman mendalam tentang prinsip penyepaduan dan pelaksanaan Spring dan Mybatis 1. Pengenalan Spring dan Mybatis ialah dua rangka kerja sumber terbuka yang digunakan secara meluas dalam pembangunan Java. Spring ialah rangka kerja pembangunan aplikasi komprehensif yang menyediakan banyak ciri seperti suntikan kebergantungan, AOP, dsb. Mybatis ialah rangka kerja kegigihan yang melaluinya pangkalan data boleh dikendalikan dengan mudah. Penyepaduan kedua-duanya boleh memanfaatkan kelebihan mereka dengan lebih baik dan meningkatkan kecekapan pembangunan dan kualiti kod. 2. Spring Prinsip Integrasi I
Bagaimana untuk mengintegrasikan berbilang ppt bersama-sama
Mar 20, 2024 pm 11:10 PM
Apabila melakukan kerja kumpulan, pelajar yang berbeza akan membuat bahagian pembentangan yang berbeza Jadi bagaimana untuk menggabungkan beberapa pembentangan menjadi satu adalah masalah, iaitu, bagaimana untuk mengintegrasikan berbilang ppts bersama-sama? Saya percaya ramai rakan pernah mengalami masalah yang sama, jadi bagaimana untuk menyelesaikan masalah tersebut? Di bawah ini saya akan kongsikan kepada anda kaedah untuk menyelesaikan masalah ini, semoga dapat membantu anda. Mula-mula buka satu daripada beberapa ppt, kemudian pilih "Gunakan Semula Slaid" dalam Slaid Baharu dalam tab Laman Utama. Klik "Semak imbas" dalam slaid yang digunakan semula, pilih ppt yang dibuat oleh ahli pasukan lain, dan anda boleh melihat bahawa semua slaid dipaparkan. Pilih kedudukan di mana anda ingin memasukkan slaid dalam paparan biasa di sebelah kiri (hanya klik pada slaid
Gunakan Webman untuk melaksanakan integrasi media sosial di tapak web anda
Aug 26, 2023 am 11:43 AM
Menggunakan Webman untuk melaksanakan integrasi media sosial di laman web Dengan peningkatan media sosial, semakin banyak laman web mula mengintegrasikan media sosial ke dalam platform mereka sendiri. Langkah ini bukan sahaja dapat meningkatkan kelekatan pengguna laman web, tetapi juga meningkatkan penyertaan dan perkongsian pengguna. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Webman untuk melaksanakan penyepaduan media sosial di tapak web, dan disertakan dengan contoh kod yang sepadan. Webman ialah rangka kerja web yang dibangunkan berdasarkan bahasa Kotlin Konsep reka bentuknya ringkas, ringan dan mudah dipanjangkan. Untuk menggunakan Kami
