kendoSplitter 头行结构页面使用案例

成员属性

orientation	分隔的方向，默认horizontal(水平方向)。vertical：垂直方向
panes.collapsed	初始化时，分隔的窗格，是否折叠。默认false(展开)。true：折叠
panes.collapsible	是否支持折叠。默认false(展开)。true：折叠
panes.resizable	是否可以拖拽调整大小。默认true(可以调整大小)。false：不可以调整大小
panes.max	分隔的窗格的最大的值。支持"10%"、"100px"、100三种方式
panes.min	分隔的窗格的最小的值。支持"10%"、"100px"、100三种方式
panes.scrollable	是否可以滚动。默认true(可以滚动)
panes.contentUrl	分隔的窗格的内容url地址

使用场景

当需要实现上下分隔容器效果时，可以采用kendoSplitter来达到想要的效果。仅最基础的效果，实现panel高度可拖动，就用以下代码实现：

<div id="vertical">
    <div id="top-pane">
    </div>
    <div id="bottom-pane">
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        // 初始分隔容器
        $("#vertical").kendoSplitter({
            orientation: "vertical",// 垂直方向，horizontal（水平方向）
        });
    });
</script>

案例介绍

以下案例是以头行表格结构页面做为案例，可实现分隔容器上下拖动时，可实现容器内表格的自适应操作：

CSS代码

<style>
    html, body {
        height: 100%;
        overflow: hidden;
    }

    #vertical {
        height: 100%
    }

    .bottom-grid {
        margin-top: 10px;
    }
</style>

Html代码

<div id="vertical">
    <div id="top-pane">
        <div class="pull-left" id="toolbar-btn" style="padding:10px;">
			<!-- 操作按钮-->
        </div>
		<div style="padding: 0 10px;clear:both">
            <div id="grid"></div>
        </div>
    </div>
    <div id="bottom-pane">
        <div id="line-form" class="bottom-grid">
            <div class="pull-left" id="line-toolbar-btn" style="padding:10px;">
                <!-- 操作按钮-->
            </div>
            <script>kendo.bind($('#line-toolbar-btn'), lineViewModel);</script>
            <div style="padding: 0 10px;clear:both">
                <div id="grid-line"></div>
            </div>
        </div>
    </div>
</div>

Js代码

<script type="text/javascript">
    $(document).ready(function () {
        $("#vertical").kendoSplitter({
            orientation: "vertical",
            panes: [
                {collapsible: false},
                {collapsible: false}
            ]
        });

        // 避免进界面可能出现未加载出高度问题
        setTimeout(function () {
            $("#grid").data('kendoGrid').setOptions({
                autoBind: true
            });
            setGridHeight();
        }, 100);

        // 分隔拖动事件
        $('.k-splitbar-draggable-vertical').mousedown(function () {
            //鼠标脱离事件
            document.onmouseup=function(){
                setGridHeight();
                // 触发后清掉事件，避免非点击导致事件触发
                document.onmouseup=null;
                //阻止默认事件
                return false;
            }
        })
    });

    /**
     * @description 改变表格高度
     */
    function setGridHeight() {
        //改头高，62为默认值，可根据实际情况修改
        $("#grid").data('kendoGrid').setOptions({
            height: (Number($("#top-pane").css('height').replace('px', '')).sub(62))
        });
        //改行高，78为默认值，可根据实际情况修改
        $("#grid-line").data('kendoGrid').setOptions({
            height: (Number($("#bottom-pane").css('height').replace('px', '')).sub(108))
        });
    }
</script>