• kendo ui的treeView节点点击事件修改和grid的配置的一点总结


    kendo-ui的treeView节点(node)点击时  可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件。

    可是需求上需要实现:每次点击相同的节点,都要触发该select事件。

    这个需求,是和kendo的select事件相悖的。

    最开始想通过 外部手动触发select事件,但是发现并不能做到.

    后来做了如下配置:

     $("#treeview").kendoTreeView({
                dataSource: [
                    treeData
                ],
                spriteCssClass: "rootfolder",
               //select: onSelect,    //注释select事件
                  template: "<span onClick='onTreeViewNodeClick(this);'>#= item.text # </span>",
                //---
                //其他配置
                //---
    })
    

     实现该需求主要配置是  template.   使用template为每个节点用span包裹起来,并给一个onClick()  

      这样一来  每次点击节点都会触发一个事件。

      但是为什么不直接在onClick中调用之前已经写好的onSelect方法呢?

      原因是 在触发select事件调用onSelect方法时,kendo会给我们自定义方法一个e这个参数,e有很多功能,他知道当前点击节点所有的配置,比如我们想获取当前点击节点的id,

    那么就是e.node.id.

       然而在我们没有用event时间,而选择使用js的onClick来调用自定义的onSelect方法时,kendo 就不会给我们e这个参数,kendo并不知道我们干了什么。

       所以我需要另一个点击时的自定义方法,并且我给这个方法的参数是this.  this在这里指的是什么呢?

       就是当前我们所点击的节点的span元素;使用kendo的dataItem方法就能获取当前的Node了。

       我们把当前的Node传给自定义的onSelect方法   也就自然而然的可以代替e参数了,因为当前Node就什么都知道嘛

    function onTreeViewNodeClick(e){
        var tree=  $("#treeview").data("kendoTreeView");         //
        var node=tree.dataItem(e);                               //get current node   and  give onSelect as param  
        onSelect(node,tree);
    }
    

    最后要说的一个在使用kendo ui的grid需要注意的问题是:

    当我们使用编辑的功能时  (我用的inline,其他的应该也一样,有待验证)

    我们的kendo的核心功能dataSource  一定要指定唯一标识字段  

     schema: {
                                    model: {
                                        id: "ProductID",   //这里是重点
                                        fields: {
                                            ProductID: { editable: false, nullable: true },
                                            ProductName: { validation: { required: true } },
                                            UnitPrice: { type: "number", validation: { required: true, min: 1} },
                                            Discontinued: { type: "boolean" },
                                            UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                                        }
                                    }
                                }
    

      

    代码中已经标识出重点位置,这个唯一字段名称的配置,一定必须是id!   无论在我们json中叫什么名字,这里必须是id.

    要不然编辑的时候,会出现很多问题,可以试试。

  • 相关阅读:
    javascript中replace()
    防止IE6出现BUG的十种常见解决方法
    IE6 重复字符的bug
    IE6 BUG大全
    display:inline
    JavaScript 图片上传预览效果
    用一行代码让w3wp进程崩溃,如何查找w3wp进程崩溃的原因
    近期学习任务
    气死我的存储过程和用户定义函数
    Damn,China Mobile!!!!
  • 原文地址:https://www.cnblogs.com/tdws/p/4964743.html
Copyright © 2020-2023  润新知