vue2+kendo的ui整合-js教程-PHP中文網

首頁

web前端

js教程

vue2+kendo的ui整合

php中世界最好的语言

Mar 12, 2018 am 09:47 AM

整合

這次帶給大家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);
    $(&#39;.k-grid.dynamicHeight,.dynamic-height.k-grid&#39;).each(function() {        var grid = $(this),
            h1 = grid.find(&#39;div.k-grid-toolbar&#39;).outerHeight() || 0,
            h2 = grid.find(&#39;div.k-grouping-header&#39;).outerHeight() || 0,
            h3 = grid.find(&#39;div.k-grid-header&#39;).outerHeight() || 0,
            h4 = grid.find(&#39;div.k-grid-pager&#39;).outerHeight() || 0,
            ch = containerHeight - 2 - h1 - h2 - h3 - h4; 
        if(ch > 0) {
            grid.find(&#39;div.k-grid-content&#39;).css(&#39;maxHeight&#39;, ch + &#39;px&#39;);
            grid.find(&#39;div.k-grid-content-locked&#39;).css(&#39;maxHeight&#39;, ch + &#39;px&#39;);
        } 
    });
}function getDataSourceConfig(idField, readUrl, filter) { //表格配置初始化
    return {        schema: {            model: {                id: idField
            },            data: function(response) {                return response.data || response;
            },            total: &#39;total&#39;
        },        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 || &#39;application/json&#39;,        dataType: dataType || &#39;json&#39;,        type: type || &#39;POST&#39;,        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=&#39;&#39;"><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=&#39;修改&#39;  onclick=\"app.addPage(&#39;create?userId=#= userId #&#39;)\" >#= 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": "张三"
        } 
             //.......
    ] 
}

vue2+kendo的ui整合

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

H5如何做圖片上傳預覽元件

#python3與JS有什麼不同

flv.js的使用詳解

以上是vue2+kendo的ui整合的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。