vue2+kendo ui整合(grid示例)

相关资料 (测试请在服务器运行)
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.页面

    
        
         
        
            
            
            
            
            
            
            
            
            
            
            
            
        
    

    
        

            
            

                

                    新增
                    删除
                
                

                    
                    

                        
                        搜索
                    
                
            
            
            

                

                    
                    

                
            
        
        
     

3.测试数据格式

/**
*测试数据.json
*/
{
    "total": 40,//总数
    "data": [//返回的当前数据
         {
            "userId": "uuid",
            "username": "ZHANGSHAN",
            "password": "123456",
            "email": "[email protected]", 
            "number": "XXX001",
            "fName": "张三"
        } 
             //.......
    ] 
}

效果