Kendo Grid Пользовательское переупорядочение

Я использую интерфейс Kendo Grid. Ниже приведен пример этого.Kendo Grid Пользовательское переупорядочение

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css" rel="stylesheet" /> 
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" /> 
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" /> 
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" /> 
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" /> 
<link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" /> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script> 


</head> 
<body> 

    <div id="main"> 
<h1 id="exampleTitle"> 
     <span class="exampleIcon gridIcon"></span> 
     <strong>Grid /</strong> Column resizing </h1> 

<div id="theme-list-container"></div> 

<div id="exampleWrap"> 
    <script>preventFOUC()</script> 


    <div id="example" class="k-content"> 
     <div id="grid"></div> 

     <script> 
      $(document).ready(function() { 
      gridDataSource = new kendo.data.DataSource({ 
      transport: { 
             read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
            }, 
           }); 
       $("#grid").kendoGrid({ 
        dataSource: gridDataSource, 
        scrollable: true, 
        resizable: true, 

        columns: [ 
         { 
          field: "OrderID", 
          title: "ID" 

         }, { 
          field: "OrderDate", 
          title: "Order Date" 


         }, 
         { 
          field: "ShipCountry", 
          title: "Ship Country" 

         }, 
         { 
          field: "ShipCity", 
          title: "Ship City" 

         }, 
         { 
          field: "ShipName", 
          title: "Ship Name" 

         }, 
         { 
          field: "ShippedDate", 
          title: "Shipped Date" 

         } 

        ] 
       }); 
      }); 
     </script> 
    </div> 
</div> 
</div>

Я хочу изменить порядок столбцов. Я отключил перетаскивание на OrderID. Но столбцы, отличные от OrderID, могут быть переупорядочены, и эти столбцы можно разместить перед столбцом OrderID.

Есть ли способ, с помощью которого можно отключить столбцы перед OrderID?

источник

2014-02-01 Vivek Parekh

также '$ ("# сетка") .find ("columnId"). kendoDraggable(); 'отключает перетаскивание указанного столбцаId? Это действительно работает, но я имею в виду, правильно ли это делается? –

Если вы можете разместить столбец _before_ 'columnId', в чем разница с возможностью перемещения' columnId'? Я мог бы понять, что вы хотите иметь 'objectId' в качестве первого столбца, но не позволяете его перемещать, но позволяя помещать другие до и после, запутывает. – OnaBai

Я не хочу, чтобы пользователи перемещали 'columnId'. Также я не хочу, чтобы они помещали другие столбцы перед 'columnId' (_i.e., First column_). –

Вы должны сделать это в два этапа:

Отключить сбросив в первой колонке.
Отключить перетаскивание первого столбца.

Для первой части после создания сетки, вы можете сделать:

$("th:nth(0)", "#grid").data("kendoDropTarget").destroy();

Это получает из сетки, идентификатор которой grid и первый руководитель ячейки th:nth(0) KendoUI DropTarget и не разрушает его (уже не действительный целевой показатель).

Для второй части вы должны определить событие dragstart, которое проверяет, что вы перетаскиваете первый столбец, и если это так, вы не можете его перетащить.

$("#grid").data("kendoDraggable").bind("dragstart", function(e) { 
    if (e.currentTarget.text() === "ID") { 
     e.preventDefault(); 
    } 
});

ПРИМЕЧАНИЕ: Здесь я обнаружил первый столбец с просьбой о его текст (ID), но вы можете изменить его, чтобы проверить его положение в списке th в сетке, и если да вызвать preventDefault.

Проверьте это работает здесь: http://jsfiddle.net/OnaBai/jzZ4u/1/

источник

2014-02-03 12:28:21 OnaBai

Он работает идеально. Огромное спасибо.!! :) –

проверить это для более элегантной реализации:

kendo.ui.Grid.fn._reorderable = function (reorderable) { 
    return function() { 
     reorderable.call(this); 

     var dropTargets = $(this.element).find('th.disable-reorder'); 

     dropTargets.each(function (idx, item) { 
      $(item).data("kendoDropTarget").destroy(); 
     }); 

     var draggable = $(this.element).data("kendoDraggable"); 

     if (draggable) { 

      draggable.bind("dragstart", function (e) { 
       if ($(e.currentTarget).hasClass("disable-reorder")) 
        e.preventDefault(); 
      }); 

     } 
    } 
}(kendo.ui.Grid.fn._reorderable);

где класс .disable-перезаказа для отключения колонки

источник

2016-08-01 14:57:23 maciusik

Kendo Grid Пользовательское переупорядочение

ответ

Смежные вопросы