我的kendoui的tree和grid

最新推荐文章于 2020-12-25 17:37:23 发布

milijiangjun

最新推荐文章于 2020-12-25 17:37:23 发布

阅读量858

点赞数

分类专栏： net

本文链接：https://blog.csdn.net/milijiangjun/article/details/92777836

版权

本文详细探讨了KendoUI中的Tree和Grid组件的使用，包括它们的配置选项、数据绑定、操作功能以及如何实现交互效果。通过实例展示如何在项目中有效地利用这两个强大的UI组件来提升用户体验。

摘要由CSDN通过智能技术生成

@{
    ViewBag.Title = "OperationSalary";
}

@*kendo upload*@


<link href="~/SourceResBase/KendoUI/styles/kendo.common.min.css" rel="stylesheet" />
<link href="~/SourceResBase/KendoUI/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="~/SourceResBase/KendoUI/styles/kendo.default.min.css" rel="stylesheet" />
@*<link href="~/SourceResBase/KendoUI/styles/kendo.blueopal.min.css" rel="stylesheet" />*@ @*这里显示树菜单显示为蓝色*@
<link href="~/SourceResBase/KendoUI/styles/kendo.common.min.css" rel="stylesheet" />
<script src="~/SourceResBase/KendoUI/js/jszip.min.js"></script>
@*<script src="~/SourceResBase/KendoUI/js/kendo.all.js"></script>*@
<script src="~/SourceResBase/KendoUI/js/kendo.all.min.js"></script>
<script src="~/SourceResBase/KendoUI/js/console.js"></script>
<script src="~/SourceResBase/KendoUI/js/cultures/kendo.culture.zh-CN.min.js"></script>
@*<script src="~/SourceResBase/KendoUI/js/messages/kendo.messages.zh-CN.min.js"></script>*@
@*kendo upload*@
<link href="~/SourceResBase/KendoUI/css/trueview/S.css" rel="stylesheet" />
<style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }

    #ShowNav {
        height: auto;
    }


    .ImportNav {
        display: none;
        /*background-color: #eee;*/
        height: 500px;
        padding-top: 25px;
        /*border:1px solid red;*/
    }

    .ImportBottonNav {
        padding: 30px 0px 0px 30px;
        width: 150px;
        height: 150px;
        border: 1px solid red;
    }

    #TopNav {
        width: 100%;
        height: 35px; /*border:1px solid red;*/
        padding-left: 100px;
    }

        #TopNav div {
            float: right;
        }

    #treeview .k-sprite {
        background-image: url('../../SourceResBase/KendoUI/css/trueview/coloricons-sprite.png');
    }

    .folder {
        background-position: 0 -16px;
    }

    #RightOneNav {
        width: 100%;
        height: auto;
        min-height: 200px;
    }

    #ShowGride {
        clear: both;
    }

        #ShowGride table td {
            min-width: 18px;
        }

    /*.ShowFiles {
        width: 60%;
        float: left;
    }*/
    .BtnNav {
        height: 50px;
    }

        .BtnNav div {
            float: left;
        }

    /*.ShowFilesBtnC {
        width: 15%;
        height: 52px;
        line-height: 52px;
        float: right;
    }

    .ShowFilesBtnR {
        width: 15%;
        height: 52px;
        line-height: 52px;
        float: right;
    }*/
</style>

<script>
</script>
<div class="nav">

    <div class="row row-offcanvas row-offcanvas-left">
        <div class="col-xs-12 col-sm-3 sidebar-offcanvas" id="sidebar">
            <div class="list-group">
                <a href="#" class="list-group-item active">组织结构</a>
                <div href="#" class="list-group-item">
                    @*组织结构*@
                    <div id="example">
                        <div class="demo-section k-content">
                            <ul id="treeview">

                                <li data-expanded="true">
                                    <span class="k-sprite folder"></span>

                                    <a data-id="04F12BEB-D99D-43DF-AC9A-3042957D6BDA" data-Name="安泰环境工程技术有限公司" data-ParentID="00000000-0000-0000-0000-000000000000" onclick="Init.Click_EventS.ClickTree(this);" href="#">安泰环境工程技术有限公司</a>

                                    <ul id="ShowDepartName">
                                        @*tree部门菜单部分*@
                                        @*<li data-expanded="true">
                                                <span class="k-sprite folder"></span><a href="#">resources</a>

                                            </li>
                                            <li data-expanded="true">
                                                <span class="k-sprite folder"></span><a href="#">resources</a>

                                            </li>*@

                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    @*组织结构*@

                </div>




            </div>
            @*<div class="list-group">
                    <a href="#" class="list-group-item active">组织结构</a>
                    <a href="#" onclick="ImportMenu();" class="list-group-item">公司组织结构部分</a>
                    <a href="#" class="list-group-item">导出相关数据</a>