我的kendoui的tree和grid

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

@{
    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>
                        <a href="#" class="list-group-item">查询工资信息</a>

                </div>*@
        </div>



        <div class="col-xs-12 col-sm-9">
            <p class="pull-left visible-xs">
                <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">功能菜单</button>

            </p>


            <div id="RightOneNav">
                <div id="ShowNav ">

                    @*<div class='demo-section k-content ShowFiles'>


                            <input name='files' id='files' type='file' /><span></span>

                        </div>*@
                    <div class="BtnNav">
                        <div class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">导入工资信息</div>
                        <div class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModa2">导入年金信息</div>
                        <div class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">导入水电费信息</div>
                        <div class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">导入专项附加扣除信息</div>
                        <div class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">下载</div>
                    </div>
                    <div class="ModesNav">
                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            请选择工资Excel文件上传
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <input name='files' id='files2' type='file' /><span></span>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            关闭
                                        </button>
                                        @*<button type="button" class="btn btn-primary">
                                                提交更改
                                            </button>*@
                                    </div>
                                </div>
                            </div>
                        </div>
                        @*年金*@
                        <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                            &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                            请选择年金Excel文件上传
                                        </h4>
                                    </div>
                                    <div class="modal-body">
                                        <input name='files' id='files_year_salary' type='file' /><span></span>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">
                                            关闭
                                        </button>
                                        @*<button type="button" class="btn btn-primary">
                                                提交更改
                                            </button>*@
                                    </div>
                                </div>
                            </div>
                        </div>
                        @*年金*@

                    </div>




                </div>
                <div>
                    <input id="ShowSelectTime" data-bind="visible: isVisible,
                              enabled: isEnabled,
                              value: selectedDate,
                              events: { change: onChange }">

                    <div class="btn btn-primary btn-sm" onclick="Init.Click_EventS.CheckSelectGrid();">查询</div>
                </div>
                <div id="ShowGride">


                </div>
                <div class="box wide">
                    <h4>Console log</h4>
                    <div class="console"></div>
                </div>
            </div>
            <div id="TopNav">

                <div>
                    <div id="FileUploadNavs">


                    </div>
                </div>
            </div>


            @*<div class="col-xs-12 col-lg-4">
                    <div>导入工资信息</div>
                    <div>导入nc信息</div>

                    <div>导入信息</div>
                </div>*@
            @*<div class="row">
                    <div class="col-xs-6 col-lg-4">
                        k1
                    </div>
                    <div class="col-xs-6 col-lg-4">
                        k1
                    </div><div class="col-xs-6 col-lg-4">
                        k1
                    </div>
                </div>*@
            <div class="ImportNav">
                第二个子功能页面


            </div>

        </div>


    </div>

</div>

<script type="text/javascript">

    var Grids;

    var Init = {
        init: function () {
            Init.LoadTree();//加载树结构
            Init.LoadGride(null, null, null, null);  // 加载 gride
            Init.LoadKendos(); // 加载kendo 的部分

        },
        Tree: {
            ClickTreeID: "",
            ClickTreeParentID: "",
            ClickTreeDataName: "",
            Time:""
        },
        LoadKendos: function () {
            kendo.culture("zh-CN");//设置语言
            //$("#ShowSelectTime").kendoDatePicker({
            //      format: "yyyy-MM",// 显示格式
            //      value: new Date(2019,8),//默认时间
            //      start: "year",//渲染深度
            //      depth: "year",//控制渲染深度
            //      change: function () {
            //          var value = this.value;
            //          alert(value);
            //      },
            //      onChange: function () {
            //          var value = this.value;
            //          alert(333);
            //          alert(value);
            //      }

            //  });
            var myDate = new Date();
            var myy = myDate.getMonth();
            var SelectTime = $("#ShowSelectTime").kendoDatePicker({
                format: "yyyy年M月",// 显示格式
                value: new Date(2019, myy),//默认时间
                start: "year",//渲染深度
                depth: "year",//控制渲染深度

                change: function () {
                    // alert($("#ShowSelectTime").val());
                    var CheckTime = $("#ShowSelectTime").val();
                    Init.Tree.Time = CheckTime;
                    Grids.dataSource.read();// 点击时间进行查询刷新
                }

            }).data("kendoDatePicker");
            SelectTime.element[0].disabled = true;

            $("#treeview").kendoTreeView(); // 从新加图标
            //upload
            $("#files").kendoUpload({
                localization: {
                    select: "选择文件"
                },
                async: {
                    saveUrl: "UploadSubmit",
                    removeUrl: "remove",
                    autoUpload: true
                }
            });
            $("#files2").kendoUpload({
                localization: {
                    select: "选择文件"
                },
                async: {
                    saveUrl: "PostSalary",  // 工资上传excel
                    //  removeUrl: "remove",
                    autoUpload: true
                },
                success: Init.Opention_EventS.Event_kendo_upload_PostSalary
            });
            $("#files_year_salary").kendoUpload({
                localization: {
                    select: "选择文件"
                },
                async: {
                    saveUrl: "PostYearSalary",  //年金上传excel
                    //  removeUrl: "remove",
                    autoUpload: true
                },

                // success: onSuccess
            });
            //upload
        },
      
        LoadTree: function () {
            $.ajax({
                url: "LoadTree",
                // data: kendo.stringify(para),
                type: "POST",
                async: false,
                contentType: 'application/json; charset=utf-8',
                dataType: "json",
                success: function (data, textStatus, jqXHR) {
                    if (data) {
                        //$("#treeview").empty().append('<li data-expanded="true">< span class= "k-sprite folder" ></span ><a href="#">My Web Site</a>');
                        // console.log(data.length);
                        for (var i = 0; i < data.length; i++) {
                            $("#ShowDepartName").append('<li  data-expanded="true"><span class= "k-sprite folder" ></span > <a data-id=' + data[i].ID + ' data-ParentID =' + data[i].ParentID + ' data-Name = ' + data[i].Name + '  onclick="Init.Click_EventS.ClickTree(this);"  href="#">' + data[i].Name + '</a></li >');
                            // console.log(data[i].ID);
                        }
                    } else {
                        // alert(2);
                    }

                },
                error: function (jqXHR, textStatus, errorThrown) {
                    alert(errorThrown);

                }
            });

        },
        LoadGride: function () {
            console.log(Init.Tree.ClickTreeID);
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "LoadGride",
                        dataType: "json",
                        data: function () {
                            return {
                                ClickTreeID: Init.Tree.ClickTreeID,
                                ClickTreeParentID: Init.Tree.ClickTreeParentID,
                                ClickTreeDataName: Init.Tree.ClickTreeDataName,
                                Time: Init.Tree.Time
                            };
                           
                        },
                        type: "POST"
                    }
                },
                pageSize: 10
            });
            // console.log(dataSource);
            //分隔符
            //var Data = null;
            //$.ajax({
            //    url: "LoadGride",
            //    data: {
            //        ClickTreeID : ClickTreeID,
            //        ClickTreeParentID: ClickTreeParentID,
            //        ClickTreeDataName: ClickTreeDataName,
            //        Time:Time
            //    },
            //    type: "POST",
            //    async: false,

            //   // contentType: 'application/json; charset=utf-8',
            //    dataType: "json",
            //    success: function (data, textStatus, jqXHR) {
            //        if (data) {
            //            Data = data;
            //        } else {
            //            // alert(2);
            //        }

            //    },
            //    error: function (jqXHR, textStatus, errorThrown) {
            //        alert(errorThrown);

            //    }
            //});

            Grids  = $("#ShowGride").kendoGrid({

                height: 500,//高度
                change: onChange,
                dataBound: onDataBound,
                dataBinding: onDataBinding,
                selectable: "cell",//字符串‘row’表示可以选中一行,‘cell’ 表示可以选中一列,‘multiple, row’表示可以选中多行,‘multiple, cell’表示可以选中多列。
                resizable: true,// 调整列大小
                sortable: true,//排序
                filterable: false,//头部筛选功能
                // groupable: true,// 是否可以拖放到头部
                sort: onSorting,
                filter: onFiltering,
                group: onGrouping,
                page: onPaging,
                groupExpand: onGroupExpand,
                groupCollapse: onGroupCollapse,

                pageable: {
                    refresh: false,  //启用刷新按钮
                    page: 1,
                    pageSize: 20,
                    pageSizes: false, //可选单页数据量集合 【5, 10, 20, 50, 100】
                    messages: {
                        display: "{0} - {1} 共 {2} 条数据",
                        empty: "没有要显示的数据",
                        page: "Page",
                        of: "of {0}", // {0} is total amount of pages
                        itemsPerPage: "",
                        first: "首页",
                        previous: "前一页",
                        next: "下一页",
                        last: "最后一页",



                    },
                    buttonCount: 5
                },
                columns: [{
                    field: "Id",// create a column bound to the "age" field
                    title: "序号", // set its title to "Age"
                    filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "UserName",// create a column bound to the "name" field
                    title: "名称" // set its title to "Name"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "CostAttribution",// create a column bound to the "age" field
                    title: "费用归集部门" // set its title to "Age"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "GrantSalaryTime",// create a column bound to the "age" field
                    title: "工资发放时间" // set its title to "Age"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "JobDepartment",// create a column bound to the "age" field
                    title: "工作部门" // set its title to "Age"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "JobName",// create a column bound to the "age" field
                    title: "工作岗位名称" // set its title to "Age"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }, {
                    field: "JobLevel",// create a column bound to the "age" field
                    title: "工作岗位分级" // set its title to "Age"
                    , filterable: false,
                    width: "150px",
                    attributes: {
                        style: "text-align: center;"
                    }
                }],
                dataSource: dataSource//Data

                // [{ name: "Jane1", age: 30 }, { name: "John2", age: 33 }, { name: "John3", age: 33 }, { name: "John4", age: 33 }, { name: "John5", age: 33 }, { name: "John6", age: 33 }, { name: "John7", age: 33 }, { name: "John8", age: 33 }, { name: "John9", age: 33 }, { name: "John10", age: 33 }, { name: "John11", age: 33 }, { name: "John12", age: 33 }, { name: "John13", age: 33 }, { name: "John14", age: 33 }, { name: "John15", age: 33 }]
            }).data("kendoGrid");;
        },
        
        Opention_EventS: {
            Event_kendo_upload_PostSalary: function (e) {
                if (e.response.Err && e.response.Err.length > 0) {

                    alert(e.response.Err);
                } else if (e.response.OK) { alert(e.response.OK); }

                // alert(JSON.stringify(e.response));//后台传递过来的数据全部封装在response中
                // 这里根据自己的需要做处理
                $('#myModal').modal('hide');
            }
        },
        Click_EventS: {
            CheckSelectGrid: function () {
                var CheckTime = $("#ShowSelectTime").val();
                Init.Tree.Time = CheckTime;
              

                Grids.dataSource.read();// 进行查询按钮刷新
               
            },
            ClickTree: function (e) {
                var DataId = $(e).attr("data-id");//部门id
                var DataParentID = $(e).attr("data-ParentID");//部门上级id
                var DataName = $(e).attr("data-Name");
                Init.Tree.ClickTreeID = DataId;
                Init.Tree.ClickTreeParentID = DataParentID;
                Init.Tree.ClickTreeDataName = DataName;
                Grids.dataSource.read();// 点击tree进行查询刷新
            }

        }


        //initend
    };
    //init
    //上传
    //



    //loadgride
    function onChange(arg) {
        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
    }

    function onDataBound(arg) {
        kendoConsole.log("Grid data bound");
    }

    function onDataBinding(arg) {
        kendoConsole.log("Grid data binding");
    }

    function onSorting(arg) {
        kendoConsole.log("Sorting on field: " + arg.sort.field + ", direction:" + (arg.sort.dir || "none"));
    }

    function onFiltering(arg) {
        kendoConsole.log("Filter on " + kendo.stringify(arg.filter));
    }

    function onPaging(arg) {
        kendoConsole.log("Paging to page index:" + arg.page);
    }

    function onGrouping(arg) {
        kendoConsole.log("Group on " + kendo.stringify(arg.groups));
    }

    function onGroupExpand(arg) {
        kendoConsole.log("The group to be expanded: " + kendo.stringify(arg.group));
    }

    function onGroupCollapse(arg) {
        kendoConsole.log("The group to be collapsed: " + kendo.stringify(arg.group));
    }
    //loadgride






    Init.init();


</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值