0

剣道UIにグリッドがあります。ヘッダーのコンテキストメニューもあります。今、私ができるようになりたいことは私です。ヘッダーを右クリックしてこの列を非表示にすることを選択すると、その列(右クリックされた列)が非表示になります。

メニュー：

<ul class ="Menu" id="contextmenu" style=" display:none; position: absolute; background-color:white; border-style:solid; border-width:1px;" >
<li id="hideCol">Hide This Column</li>
<li>show hidden columns</li>

メニューを開き、この列の機能を非表示にします。

 $(document).ready(function() {

        $("table tr").bind('contextmenu', function(event) {
            $("#contextmenu").css({ "top": event.pageY + "px", "left": event.pageX + "px" }).kendoMenu({ orientation: "vertical" }).show();
            event.preventDefault();
        });

        $(document).bind('click', function() {
            $("#contextmenu").hide();
        });
    });

    $("#hideCol").click(function () {
        // Get reference to the Grid
        var grid = $("#Grid").data("kendoGrid");
        // Get th cell index
        var idx = $("table tr").index();
        // Hide column
        grid.hideColumn(idx);
        //$("#Grid").data("kendoGrid").hideColumn();

    });
4

1 に答える 1

2

グリッド ID がgridであるとすると、列のインデックスを見つけて を呼び出す必要がありますhideColumn。

elemそれが、右クリックしたテーブル ヘッド ( ) 要素であると仮定しthます。

// Get reference to the Grid
var grid = $("#grid").data("kendoGrid");
// Get th cell index
var idx = $(elem).index();
// Hide column
grid.hideColumn(idx);

実際の動作を確認するには、次の例のヘッダーを右クリックします: http://jsfiddle.net/OnaBai/9x3H9/

于 2014-03-13T12:21:07.233 に答える