相关资料 (测试请在服务器运行)
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.页面
demo
3.测试数据格式
/**
*测试数据.json
*/
{
"total": 40,//总数
"data": [//返回的当前数据
{
"userId": "uuid",
"username": "ZHANGSHAN",
"password": "123456",
"email": "[email protected]",
"number": "XXX001",
"fName": "张三"
}
//.......
]
}
效果