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;
}//......以下是根据自己的项目进行配置<!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>/**
*测试数据.json
*/{ "total": 40,//总数
"data": [//返回的当前数据
{ "userId": "uuid", "username": "ZHANGSHAN", "password": "123456", "email": "ZHANGSHAN@xx.xxx",
"number": "XXX001", "fName": "张三"
}
//.......
]
}
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！
関連書籍:
H5で画像アップロードプレビューコンポーネントを作成する方法python3とJSの違いは何ですかflv.jsの使用方法の詳細な説明以上がvue2+kendo の ui 統合の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7491
15
1377
52
77
11
19
41
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 の利点は、開発者が同時に複数のプラットフォームに適応するコード セットを 1 つだけ作成できるため、開発効率が向上し、開発コストが削減されることです。以下では、UniApp を使用して Vue.js フレームワークの完全な統合を実現する方法を紹介します。
Vue2 と比較した Vue3 の変更点: より強力なネットワーク リクエスト ライブラリの統合
Jul 08, 2023 pm 08:34 PM
Vue2 と比較した Vue3 の変更点: より強力なネットワーク リクエスト ライブラリの統合 Vue.js の開発と更新が続く中、Vue.js の次のバージョンである Vue3 には、いくつかの興味深い変更と改善が加えられています。最も重要な変更の 1 つは、より強力なネットワーク リクエスト ライブラリの統合です。 Vue2 では、通常、ネットワーク リクエストを作成するために axios などのサードパーティ ライブラリを使用しますが、Vue3 では、Vue 開発チームが組み込みのネットワーク リクエスト ライブラリを提供し、より直感的で柔軟な方法を提供します。
PHPcms を他のシステムと統合するための実践的なヒント
Mar 15, 2024 am 08:18 AM
PHPcms を他のシステムと統合するための実践的なヒント インターネット技術の継続的な発展に伴い、Web サイト開発の分野はより多様かつ複雑になってきました。実際のプロジェクトでは、異なるシステムを統合する必要がある状況に直面することが多く、これらの問題を解決するには一定のスキルと経験が必要です。この記事では、開発者が課題にうまく対処できるように、PHPcms システムと他のシステムを統合するための実践的なヒントと具体的なコード例を紹介します。 1. 統合の基本原則 システム統合を行う際には、まず以下のことが必要です。
PHP WebDriver の統合: 初心者から熟練者まで
Jun 15, 2023 am 09:52 AM
インターネットの急速な発展に伴い、Web アプリケーションの需要も増加しており、エンタープライズ アプリケーションの品質を保証する重要な部分として、ソフトウェア テストの重要性がますます高まっています。ただし、従来の手動テスト方法は時間と労力がかかり、エラーが発生しやすくなります。この問題を解決するのが自動テストです。Web アプリケーションの自動テストは一般的なテスト方法になっており、その中でも WebDriver を使用して Web アプリケーションの自動テストを行う方法は非常に一般的です。この記事
Spring と Mybatis の統合の原則と実装についての深い理解
Feb 20, 2024 am 09:14 AM
Spring と Mybatis の統合原則と実装についての深い理解 1. はじめに Spring と Mybatis は、Java 開発で広く使用されている 2 つのオープン ソース フレームワークです。 Spring は、依存関係注入、AOP などの多くの機能を提供する包括的なアプリケーション開発フレームワークです。 Mybatis は、データベースを簡単に操作できる永続化フレームワークです。 2 つを統合すると、それぞれの利点をより適切に活用し、開発効率とコード品質を向上させることができます。 2. 統合原理 Spring I
複数の ppt を統合する方法
Mar 20, 2024 pm 11:10 PM
グループワークを行う場合、異なる学生がプレゼンテーションの異なる部分を作成するため、複数のプレゼンテーションを 1 つに統合する方法、つまり複数の ppt を統合する方法が問題になります。多くの友人が同様の問題に遭遇していると思いますが、そのような問題を解決するにはどうすればよいですか?以下にこの問題を解決する方法を紹介しますので、お役に立てれば幸いです。まず、いくつかの ppt の 1 つを開き、[ホーム] タブの [新しいスライド] で [スライドを再利用] を選択します。再利用したスライドの「参照」をクリックし、他のチームメンバーが作成したpptを選択すると、すべてのスライドが表示されていることがわかります。左側の通常ビューでスライドを挿入する位置を選択します (スライドをクリックするだけです)
Webman を使用して Web サイトにソーシャル メディア統合を実装する
Aug 26, 2023 am 11:43 AM
Webman を使用して Web サイトにソーシャル メディア統合を実装する ソーシャル メディアの台頭により、ますます多くの Web サイトがソーシャル メディアを独自のプラットフォームに統合し始めています。この動きにより、Web サイトへのユーザーの定着率が高まるだけでなく、ユーザーの参加と共有も増加します。この記事では、Webman フレームワークを使用して Web サイトにソーシャル メディア統合を実装する方法と、対応するコード例を紹介します。 Webman は Kotlin 言語をベースに開発された Web フレームワークであり、その設計コンセプトは、シンプル、軽量、拡張が容易です。ご利用にあたって
