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의 다른 관련 기사를 참조하세요. 중국사이트!
관련 읽기:
H5에서 이미지 업로드 미리 보기 구성 요소를 만드는 방법
위 내용은 vue2+kendo의 UI 통합의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7521
15
1378
52
81
11
54
19
21
70
Spring Boot와 NoSQL 데이터베이스 통합 및 사용
Jun 22, 2023 pm 10:34 PM
인터넷의 발달로 인해 빅데이터 분석과 실시간 정보처리는 기업의 중요한 요구사항이 되었습니다. 이러한 요구 사항을 충족하기 위해 기존 관계형 데이터베이스는 더 이상 비즈니스 및 기술 개발 요구 사항을 충족하지 않습니다. 대신 NoSQL 데이터베이스를 사용하는 것이 중요한 옵션이 되었습니다. 이 기사에서는 NoSQL 데이터베이스와 통합된 SpringBoot를 사용하여 최신 애플리케이션을 개발하고 배포하는 방법에 대해 설명합니다. NoSQL 데이터베이스란 무엇입니까? NoSQL은 SQL이 아닙니다.
UniApp은 Vue.js 프레임워크의 완벽한 통합을 실현합니다.
Jul 04, 2023 pm 08:49 PM
UniApp은 Vue.js 프레임워크의 완벽한 통합을 실현합니다. 소개: UniApp은 Vue.js 프레임워크를 기반으로 하는 크로스 플랫폼 개발 도구로, Vue.js 프로젝트를 iOS, Android 등 다양한 플랫폼용 애플리케이션으로 컴파일할 수 있습니다. 소규모 프로그램 등 UniApp의 장점은 개발자가 하나의 코드 세트만 작성하여 동시에 여러 플랫폼에 적응할 수 있어 개발 효율성을 높이고 개발 비용을 절감할 수 있다는 것입니다. 다음은 Vue.js 프레임워크의 완벽한 통합을 달성하기 위해 UniApp을 사용하는 방법을 소개합니다.
Vue2와 비교한 Vue3의 변경 사항: 더욱 강력한 네트워크 요청 라이브러리 통합
Jul 08, 2023 pm 08:34 PM
Vue2와 비교한 Vue3의 변경 사항: 더욱 강력한 네트워크 요청 라이브러리 통합 Vue.js가 계속 개발 및 업데이트됨에 따라 Vue.js의 다음 버전인 Vue3은 몇 가지 흥미로운 변경 사항과 개선 사항을 가져옵니다. 가장 중요한 변화 중 하나는 더욱 강력한 네트워크 요청 라이브러리 통합입니다. Vue2에서는 일반적으로 axios와 같은 타사 라이브러리를 사용하여 네트워크 요청을 수행합니다. Vue3에서 Vue 개발팀은 보다 직관적이고 유연한 방법을 제공하는 내장 네트워크 요청 라이브러리를 제공합니다.
PHPcm을 다른 시스템과 통합하기 위한 실용적인 팁
Mar 15, 2024 am 08:18 AM
PHPcm을 다른 시스템과 통합하기 위한 실용적인 팁 인터넷 기술의 지속적인 발전으로 인해 웹사이트 개발 분야는 더욱 다양해지고 복잡해졌습니다. 실제 프로젝트에서 우리는 다양한 시스템을 통합해야 하는 상황에 자주 직면하며, 이를 위해서는 이러한 문제를 해결하기 위한 특정 기술과 경험이 필요합니다. 이 기사에서는 개발자가 문제에 더 잘 대처할 수 있도록 PHPcms 시스템을 다른 시스템과 통합하기 위한 몇 가지 실용적인 팁과 구체적인 코드 예제를 소개합니다. 1. 통합의 기본 원칙 시스템 통합을 수행할 때 가장 먼저 해야 할 일은
PHP WebDriver 통합: 초보자부터 숙련자까지
Jun 15, 2023 am 09:52 AM
인터넷의 급속한 발전과 함께 웹 애플리케이션에 대한 수요도 증가하고 있으며, 기업용 애플리케이션의 품질을 보장하는 중요한 부분인 소프트웨어 테스트가 점점 더 중요해지고 있습니다. 그러나 기존의 수동 테스트 방법은 시간이 많이 걸리고 힘들며 오류가 발생하기 쉽습니다. 자동화된 테스트는 이 문제를 해결하는 방법입니다. 웹 애플리케이션의 자동화된 테스트는 일반적인 테스트 방법이 되었습니다. 그 중에서 웹 애플리케이션의 자동화된 테스트를 위해 WebDriver를 사용하는 것은 매우 인기 있는 방법입니다. 이 기사
Spring과 Mybatis 통합의 원리와 구현에 대한 심층적인 이해
Feb 20, 2024 am 09:14 AM
Spring과 Mybatis의 통합 원리와 구현에 대한 심층적인 이해 1. 소개 Spring과 Mybatis는 Java 개발에 널리 사용되는 두 가지 오픈 소스 프레임워크입니다. Spring은 종속성 주입, AOP 등과 같은 많은 기능을 제공하는 포괄적인 애플리케이션 개발 프레임워크입니다. Mybatis는 데이터베이스를 쉽게 운영할 수 있는 영속성 프레임워크입니다. 두 가지를 통합하면 장점을 더 잘 활용하고 개발 효율성과 코드 품질을 향상시킬 수 있습니다. 2. 통합 원리 스프링 I
여러 개의 PPT를 통합하는 방법
Mar 20, 2024 pm 11:10 PM
그룹 작업을 할 때 학생들마다 프레젠테이션의 서로 다른 부분을 만들게 됩니다. 그렇다면 여러 프레젠테이션을 하나로 병합하는 방법, 즉 여러 개의 PPT를 어떻게 통합할 것인가가 문제가 됩니다. 많은 친구들이 비슷한 문제에 직면했다고 생각합니다. 이러한 문제를 해결하는 방법은 무엇입니까? 아래에서는 이 문제를 해결하는 방법을 알려 드리겠습니다. 도움이 되기를 바랍니다. 먼저 여러 ppt 중 하나를 연 다음 홈 탭의 새 슬라이드에서 "슬라이드 재사용"을 선택하세요. 재사용된 슬라이드에서 "찾아보기"를 클릭하고, 다른 팀원들이 만든 ppt를 선택하면 모든 슬라이드가 표시되는 것을 확인할 수 있습니다. 왼쪽 일반 보기에서 슬라이드를 삽입하고 싶은 위치를 선택하세요. (슬라이드를 클릭하시면 됩니다.)
Webman을 사용하여 웹사이트에 소셜 미디어 통합 구현
Aug 26, 2023 am 11:43 AM
Webman을 사용하여 웹사이트에 소셜 미디어 통합 구현 소셜 미디어의 등장으로 점점 더 많은 웹사이트가 소셜 미디어를 자체 플랫폼에 통합하기 시작했습니다. 이러한 움직임은 웹사이트의 사용자 충성도를 높일 뿐만 아니라 사용자의 참여와 공유도 늘릴 수 있습니다. 이 기사에서는 Webman 프레임워크를 사용하여 웹 사이트에 소셜 미디어 통합을 구현하는 방법을 소개하고 해당 코드 예제가 함께 제공됩니다. Webman은 Kotlin 언어를 기반으로 개발된 웹 프레임워크로, 디자인 컨셉이 단순하고 가벼우며 확장이 쉽습니다. 우리를 사용하려면
