kendoUi_treeview

前两天用kendoUI的treeView做了一个给用户角色分配菜单权限的功能，废了老大的劲，写来说明一下，

做出效果如图：

业务流程：点击”分配菜单权限“按钮，弹出一个新的window，并显示出所有的菜单选项，菜单分子父两级，因为这里是修改权限，

显示时，根据行选的用户已有权限需要默认打钩，点击“提交查询”按钮，form提交，根据勾选情况，入库。

下面说说一下实现代码：

1，首先，自定义分配菜单权限按钮，grid 右边一栏为command，

command : [ 
                        {
                            
                            text : "分配菜单权限",
                            
                            click: function(e) {
                                // e.target is the DOM element representing the button
                                var tr = $(e.target).closest("tr"); // get the current table row (tr)
                                // get the data bound to the current table row
                                var data = this.dataItem(tr);
                                showTree(data.id).data("kendoWindow").open();

}
 }, { name : "edit", text : { edit : "信息修改", cancel : "关闭", update : "提交" } }, { name : "destroy", text : "删除" } ],

解释：通过var tr = $(e.target).closest("tr"); var data = this.dataItem(tr); 获得的data对应每一行的一跳数据，格式是json，几对应后台的JavaBean

并将没一行的主键可获取以作为标示，这里data.id 即为点击对应那一行的role的id

2，弹出窗口，展示菜单menu树形结构： showTree(data.id).data("kendoWindow").open();

showTree是一个方法 如下：

function showTree(roleId){
        return $("#menuTree").kendoWindow({
            width: "300px",
            height : "300px",
            position: {
                top: 100,
                left: 500
              },
            title: "分配菜单权限",
            visible: false,
            content: 'role/menuTreePage.do?roleId='+roleId,
            activate : function(){

            },
            close : function(){
                console.log("清除树");
                $("#treeview").data("kendoTreeView").destroy();
            }
        });
    }

menuTree 为在此grid 的jsp中定义的一个占位div

<div id="menuTree"></div>

即通过这个div生成一个弹窗kendoWindow，而这个弹窗中的内容实际上显示的是另外一个jsp页面rolemenu.jsp，content: 'role/menuTreePage.do?roleId='+roleId,
通过这个属性的配置将另一个jsp中的内容包裹到kendoWindow中，rolemenu.jsp中真正的菜单menu的树形结构
3，树形结构的配置

<body>
<div id="treeview" class="demo-section"></div>
<form id="treeForm" action="<spring:url value='/role/assignMenus.do' />" method="post" onsubmit="return  false;">
    <input type="hidden" name="menuIds" id="result" /> 
    <input type="hidden" name="roleId" id="roleId" value="${roleId}"/> 
    <input id="formSub" type="submit" />
</form>
<script type="text/javascript">
$(function() {
    var homogeneous = new kendo.data.HierarchicalDataSource({
        transport : {
            read : {
                url : "role/menuTree.do",
                dataType : "json",
                data: function() {
                    var uproleId= $("#roleId").val();
                    return {roleId:uproleId}
                  }
            }
        },
        schema : {
            model : {
                id : "id",
                hasChildren : "hasChildren",
                children:"items",
                expanded : true,
                checked : "checked"
            },
        }
    });
    
    $("#treeview").kendoTreeView({
        //loadOnDemand : false,// 延迟加载，默认是true，这里设置false是因为在初始化闭合的时候，如果选中根元素，是不法获取子节点id的
        dataSource : homogeneous,
        dataTextField : "name",
        checkboxes : {
            checkChildren : true
        }
    });


    var options = {
        success : function(data) {
            console.log(data);
            //location.href = "http://localhost:8085/csop_monitor/index.do";
            $("#menuTree").data("kendoWindow").close();
        }
    };

    $("#formSub").click(function() {
        var result = $("#result").val();
        var oldRs = $("#oldResult").val();
        if(result == ""){
            $("#menuTree").data("kendoWindow").close();
            return false;
        }else{
                $("#result").val(result);        
        }
        //alert("re="+result);
        $("#treeForm").ajaxSubmit(options);

    });
    


// show checked node IDs on datasource change
$("#treeview").data("kendoTreeView").dataSource.bind("change",    getChangeValue);

function getChangeValue(){

    var checkedNodes = [],
    treeView = $("#treeview").data("kendoTreeView"),
    message;
    checkedNodeIds(treeView.dataSource.view(), checkedNodes);


    if (checkedNodes.length > 0)
        message = checkedNodes.join(",");
    $("#result").val(message);
    console.log("改变后result : " + $("#result").val());
}

//function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
    for (var i = 0; i < nodes.length; i++) {
        if (nodes[i].checked) {
            console.log("checked node : " + nodes[i].id);
            checkedNodes.push(nodes[i].id);
        }

        if (nodes[i].hasChildren) {
            checkedNodeIds(nodes[i].children.view(), checkedNodes);
        }

    }
}




});
</script>
</body>

treeView的完成，首先定义个个datasource，我这里定义了一个 HierarchicalDataSource，这个本身就是一个树形结构的datasouce

值得注意的是schema的配置

schema : {
            model : {
                id : "id",
                hasChildren : "hasChildren",
                children:"items",
                expanded : true,
                checked : "checked"
            },
        }

hasChildren，children，checked 都对应后台传递过来的javabean中的属性

checked，hasChildren 为Boolean类型

children 如果有，会自动生成一个树形，但是这个有一个问题就是JavaBean中必须定义为items，否则treeview找不到，我不知道是不是treeview那边还需要配置一个属性。

checked 由于我的树形前有checkbox，如果未true，kendo也会自动选中，

然后就简单了，同样通过一个div来显示treeview

<div id="treeview" class="demo-section"></div>

 $("#treeview").kendoTreeView...
这样就可以显示了，后台对menus的操作等下再说
我这里还定义了一个form，用于提交，用户进行选择，操作之后的数据保存，通过tree的change事件保存下所选的menuIds，即可

此文来源于转载：http://www.cnblogs.com/whatadiors/p/3795613.html

posted @ 2016-07-05 10:08 Reyco 阅读(697) 评论(0) 收藏举报

刷新页面返回顶部

H-SMouses

kendoUi_treeview

公告