kendo UI之TreeList、DataSource常用方法总结

2023-10-10 02:30
文章标签 总结 方法 ui 常用 datasource kendo treelist

本文主要是介绍kendo UI之TreeList、DataSource常用方法总结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Kendo UI 简介

Kendo UI 是一个基于 HTML5 和 jQuery 的 UI 框架用来开发时尚Web应用。这个UI框架包括的很多 UI 控制项，数据显示组件，和自适应的手机框架，并支持数据绑定，使用模板，拖放功能。

本人主要使用的是Kendo UI Web端的jQuery的组件，因此本文所有的官网链接都指向的是Kendo UI for jQuery

Kendo UI for jQuery官网链接：https://www.telerik.com/kendo-jquery-ui
Kendo UI for jQuery在线样例：https://demos.telerik.com/kendo-ui/
Kendo UI for jQuery在线文档：https://docs.telerik.com/kendo-ui/introduction

从Kendo UI for jQuery官网链接我们可以看到一些demo样例和下载链接；
从Kendo UI for jQuery在线样例我们可以快速上手，拷贝修改Demo代码即可做出自己的web界面；
从Kendo UI for jQuery在线文档我们可以系统深入的学习Kendo UI，在线样例中的Demo仅仅是介绍了怎么使用
，更深层次的用法需要我们在在线文档中去找寻。它既是我们工作中的KendoUI工具手册。在工作中我常需要看 [API REFERENCE → JavaScript]、[WIDGETS]下的资料（如下图）

2.Kendo UI常用的功能总结

通过看demo可以很快做出很漂亮的界面，但是demo中使用到的功能还是少，并且有些显示文本或样式需要修改成自定义的，这时我们就需要从api 文档中查找相应的方法，但是api文档很庞大，找起来需要耗时间，现我将我在用TreeList时碰到的用法总结如下。
下面是一个简版的使用TreeList控件的完整的代码

<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.bootstrap.min.css">
<link href="https://codeseven.github.io/toastr/build/toastr.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="https://codeseven.github.io/toastr/build/toastr.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<style type="text/css">.btnFR{float:right};.k-icon{vertical-align:middle!important;}.k-button.k-button-icontext .k-icon, .k-button.k-button-icontext .k-image {vertical-align: middle;}.form-control {display: block;width: 90%;height: calc(1.5em + .75rem + 2px);padding: .375rem .75rem;font-size: 1rem;font-weight: 400;line-height: 1.5;color: #495057;background-color: #fff;background-clip: padding-box;border: 1px solid #ced4da;border-radius: .25rem;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}.k-i-none{opacity:0;}
</style>
</head>
<body>
<div class="container-fluid"><div class="group box"><div id="treeList"></div></div>
</div>
<script type="text/javascript">$(function(){$("#treeList").kendoTreeList({toolbar:["create","createchild","edit","destroy",{name:'batchDel',text:"批量删除",className:"btnFR",imageClass:"k-delete",click:function(e){e.preventDefault();var treeList = $("#treeList").data("kendoTreeList");var row = treeList.select();if(row.length==0){toastr.warning('请选择需要删除的行');}var delNames = [];var delIdList = [];for(var i=0;i<row.length;i++){var item = treeList.dataItem(row[i]);delNames.push(item.name);var delId = {id:item.id};delIdList.push(delId);}swal({title: "确定删除["+delNames.join(",")+"]么?",icon: "warning",buttons: true,dangerMode: true,}).then((willDelete) => {if (willDelete) {$.ajax({url:"/delMethod",data:delIdList,dataType:"json",type:"POST",success: function (data) {toastr.success('删除成功');},error: function (XMLHttpRequest, textStatus, errorThrown) {toast.error("删除失败");}});}});}}],resizable:true,selectable:"multiple",scrollable:true,columns:[{field:"id",title:"主键",hidden:true},{field:"name",title:"名称",expandable:true,width:"350px",template:function(item){if(item.name.length>14){return "<a title='"+item.name+"' name='nameCol' href='#'>"+item.name.substr(0,14)+"...</a>";}else{return "<a title='"+item.name+"' name='nameCol' href='#'>"+item.name+"...</a>";}}},{field:"isvisiable",title:"是否可见",template:function(item){if(item.isvisiable=1)return "是";elsereturn "否";},//点击编辑/创建子节点按钮，在行级别显示为下拉选择框editor:function(container,options){if(options.model.isNew()){//如果是新创建的节点,默认设置为1options.model.isvisiable=1;}$("<select name='isvisiable' class='form-control'><option value='1' selected>男</option><option value='0'>女</option>").apppendTo(container);}},{field:"description",title:"描述",//点击编辑/创建子节点按钮，在行级别显示为文本框editor:function(container,options){$("<textarea name='description' class='form-control' rows='5' maxlength='100'></textarea>").apppendTo(container);}},{//行级按钮command:[{name:"createchild",text:"创建子节点"},{name:"edit",text:"编辑"},{name:"del",text:"删除",imageClass:"k-icon k-delete",click:function(e){var tr = $(e.target).closest("tr");var data = this.dataItem(tr);var message = "";if(data.hasChildren==true){message = "确定要删除["+data.name+"]及其子节点么？";}else{message = "确定要删除["+data.name+"]么？";}swal({title: message,icon: "warning",buttons: true,dangerMode: true,}).then((willDelete) => {if (willDelete) {$.ajax({url:"/delMethod",data:[{id:data.id}],dataType:"json",type:"POST",success: function (data) {toastr.success('删除成功');},error: function (XMLHttpRequest, textStatus, errorThrown) {toast.error("删除失败");}});}});}}]					}],messages:{//用于修改默认按钮的显示文本（canceledit默认的显示文本是cancel,update默认的显示文本是updatecommands:{canceledit:"取消",update:"保存"}},dataBound:function(e){//数据在页面中显示后，会触发该事件//用于点击名称，展开树节点$("a[name='nameCol']").unbind("click");$("a[name='nameCol']").click(function(e){e.preventDefault();var tr = $($(this).parent().parent());if(tr.attr("aria-expanded")=="true"){$("#treeList").data("kendoTreeList").collapse(tr);}else{$("#treeList").data("kendoTreeList").expand(tr);}});},dataSource:{transport:{read:{method:"POST",url:"/readTreeNode",dataType:"json",cache:false},create:function(options){$.ajax({url:"/createTreeNode",dataType:"json",data:options.data,cache:false,success:function(res){options.success(res);toastr.success('创建成功');},error:function(res){options.error(res);toastr.error('创建失败');}});},update:function(options){$.ajax({url:"/updateTreeNode",dataType:"json",data:options.data,cache:false,success:function(res){options.success(res);toastr.success('修改成功');},error:function(res){options.error(res);toastr.error('修改失败');}});},destroy:function(options){$.ajax({url:"/delTreeNode",dataType:"json",data:options.data,cache:false,success:function(res){options.success(res);toastr.success('删除成功');},error:function(res){options.error(res);toastr.error('删除失败');}});},},schema:{model:{id:"id",parentId:"pid",fields:{id:{field:"id",type:"string",editable:false},pid:{field:"pid",nullable:true,type:"string"},name:{field:"name",type:"string",validation:{required:true,required:{message:"名称不能为空"}}},isvisiable:{field:"isvisiable",type:"number",validation:{required:true,required:{message:"名称不能为空"}}},description:{field:"description",type:"string"}}}}}});});
</script>
</body>
</html>

上面代码展示效果图如下：
在这里插入图片描述
下面将重点说明下使用TreeList常用但是在demo中没有样例，并且查询文档很费劲的地方

  1. TreeList的数据格式（下面是样例）

[
{ “id”: “0”, “name”: “Item0”, “isvisiable”:1, “description”: “Item0”, “pid”: null ,hasChildren:true},
{ “id”: “1”, “name”: “Item1”, “isvisiable”:1, “description”: “Item1”, “pid”: “0” ,hasChildren:true},
{ “id”: “2”, “name”: “Item2”, “isvisiable”:1, “description”: “Item2”, “pid”: “1” ,hasChildren:false},
{ “id”: “3”, “name”: “Item3”, “isvisiable”:1, “description”: “Item3”, “pid”: “1” ,hasChildren:false},
{ “id”: “4”, “name”: “Item4”, “isvisiable”:1, “description”: “Item4”, “pid”: null ,hasChildren:true},
{ “id”: “5”, “name”: “Item5”, “isvisiable”:1, “description”: “Item5”, “pid”: null ,hasChildren:true},
{ “id”: “6”, “name”: “Item6”, “isvisiable”:1, “description”: “Item6”, “pid”: “5” ,hasChildren:true},
{ “id”: “7”, “name”: “Item7”, “isvisiable”:1, “description”: “Item7”, “pid”: “5” ,hasChildren:true},
{ “id”: “8”, “name”: “Item8”, “isvisiable”:1, “description”: “Item8”, “pid”: “7” ,hasChildren:false},
{ “id”: “9”, “name”: “Item9”, “isvisiable”:1, “description”: “Item9”, “pid”: “7” ,hasChildren:false} ]

  1. 后台成功返回数据，数据格式也正确，但是TreeList一直显示“No records to display”
    出现这个情况，我们应注意两点
    1）.根节点的 parentId是否为null，若不为null，则treeList无法加载数据
    2）.parentId字段名为其他，则我们需要在schema中声明parentId指定为哪个字段，如下代码
    (schema的model属性还能设置校验)
schema:{model:{id:"id",parentId:"pid",fields:{id:{field:"id",type:"string",editable:false},pid:{field:"pidz",nullable:true,type:"string"},name:{field:"name",type:"string",validation:{required:true,required:{message:"名称不能为空"}}},isvisiable:{field:"isvisiable",type:"number",validation:{required:true,required:{message:"名称不能为空"}}},description:{field:"description",type:"string"}},expanded:false}
}
  1. treeList设置为incell（即行内编辑、新增），有些字段需要自定义样式，那么参照如下代码（在columns中，添加editor即可）
columns:[{field:"isvisiable",title:"是否可见",width:"350px",template:function(item){if(item.isvisiable=1)return "是";elsereturn "否";},//点击编辑/创建子节点按钮，在行级别显示为下拉选择框editor:function(container,options){if(options.model.isNew()){//如果是新创建的节点,默认设置一个性别options.model.isvisiable=1;}$("<select name='isvisiable' class='form-control'><option value='1' selected>男</option><option value='0'>女</option>").appendTo(container);}}
]

  1. toolbar默认的name属性有哪些
    toolbar默认的属性有create、createchild、edit、destroy，这些属性直接toolbar[‘create’,‘createchild’,‘edit’,‘destroy’]即可在页面生成对于的button并且有默认的click事件

  2. toolbar想自定义按钮如何实现
    参照如下代码

toolbar:[{name:'batchDel',text:"批量删除",className:"btnFR",imageClass:"k-delete",click:function(e){e.preventDefault();var treeList = $("#treeList").data("kendoTreeList");var row = treeList.select();if(row.length==0){toastr.warning('请选择需要删除的行');}var delNames = [];var delIdList = [];for(var i=0;i<row.length;i++){var item = treeList.dataItem(row[i]);delNames.push(item.name);var delId = {id:item.id};delIdList.push(delId);}swal({title: "确定删除["+delNames.join(",")+"]么?",icon: "warning",buttons: true,dangerMode: true,}).then((willDelete) => {if (willDelete) {$.ajax({url:"/delMethod",data:delIdList,dataType:"json",type:"POST",success: function (data) {toastr.success('删除成功');},error: function (XMLHttpRequest, textStatus, errorThrown) {toast.error("删除失败");}});}});}}
]

这篇关于kendo UI之TreeList、DataSource常用方法总结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/177308。

相关文章

Java 方法重载Overload常见误区及注意事项

Java 方法重载Overload常见误区及注意事项

《Java方法重载Overload常见误区及注意事项》Java方法重载允许同一类中同名方法通过参数类型、数量、顺序差异实现功能扩展,提升代码灵活性,核心条件为参数列表不同,不涉及返回类型、访问修饰符... 目录Java 方法重载（Overload）详解一、方法重载的核心条件二、构成方法重载的具体情况三、不构
阅读更多...
Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式

《Java通过驱动包(jar包)连接MySQL数据库的步骤总结及验证方式》本文详细介绍如何使用Java通过JDBC连接MySQL数据库,包括下载驱动、配置Eclipse环境、检测数据库连接等关键步骤,... 目录一、下载驱动包二、放jar包三、检测数据库连接JavaJava 如何使用 JDBC 连接 mys
阅读更多...
SQL中如何添加数据(常见方法及示例)

SQL中如何添加数据(常见方法及示例)

《SQL中如何添加数据(常见方法及示例)》SQL全称为StructuredQueryLanguage,是一种用于管理关系数据库的标准编程语言,下面给大家介绍SQL中如何添加数据,感兴趣的朋友一起看看吧... 目录在mysql中，有多种方法可以添加数据。以下是一些常见的方法及其示例。1. 使用INSERT I
阅读更多...
Python中反转字符串的常见方法小结

Python中反转字符串的常见方法小结

《Python中反转字符串的常见方法小结》在Python中,字符串对象没有内置的反转方法,然而,在实际开发中,我们经常会遇到需要反转字符串的场景,比如处理回文字符串、文本加密等,因此,掌握如何在Pyt... 目录python中反转字符串的方法技术背景实现步骤1. 使用切片2. 使用 reversed() 函
阅读更多...
Python中将嵌套列表扁平化的多种实现方法

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表（即列表中包含列表）转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert
阅读更多...
Python使用pip工具实现包自动更新的多种方法

Python使用pip工具实现包自动更新的多种方法

《Python使用pip工具实现包自动更新的多种方法》本文深入探讨了使用Python的pip工具实现包自动更新的各种方法和技术,我们将从基础概念开始,逐步介绍手动更新方法、自动化脚本编写、结合CI/C... 目录1. 背景介绍1.1 目的和范围1.2 预期读者1.3 文档结构概述1.4 术语表1.4.1 核
阅读更多...
在Linux中改变echo输出颜色的实现方法

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu
阅读更多...
Conda与Python venv虚拟环境的区别与使用方法详解

Conda与Python venv虚拟环境的区别与使用方法详解

《Conda与Pythonvenv虚拟环境的区别与使用方法详解》随着Python社区的成长,虚拟环境的概念和技术也在不断发展,：本文主要介绍Conda与Pythonvenv虚拟环境的区别与使用... 目录前言一、Conda 与 python venv 的核心区别1. Conda 的特点2. Python v
阅读更多...
Spring Boot中WebSocket常用使用方法详解

Spring Boot中WebSocket常用使用方法详解

《SpringBoot中WebSocket常用使用方法详解》本文从WebSocket的基础概念出发,详细介绍了SpringBoot集成WebSocket的步骤,并重点讲解了常用的使用方法,包括简单消... 目录一、WebSocket基础概念1.1 什么是WebSocket1.2 WebSocket与HTTP
阅读更多...
SQL Server配置管理器无法打开的四种解决方法

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一：桌面图标进入方法二：运行窗口进入检查版本号对照表php方法三：查找文件路径方法四：检查 S
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2