相關資料 (測試請在伺服器運作) Bootstrap kendo ui grid 示例 vue官網
1.建立公共js檔案
/*
* 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": "[email protected]",
"number": "XXX001",
"fName": "張三"
}
//.......
]
}
效果
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)