2014-11-25 4 views
-1

Я ищу всплывающее окно jquery с вертикальной полосой прокрутки, которое позволяет отображать данные так, как если бы они имитировали Datagrid, за исключением того факта, что строки не видны.JQuery popup с полосой прокрутки и выравниванием столбцов

Я имею в виду что-то подобное должно быть показаны во всплывающем окне

Field1 Field2 Field3

Значение1 Значение1 Значение1

Value2 Value2 Value2

И если lentgh элементов, которые формируют столбец длиннее высоты экрана, вертикальная полоса прокрутки должна отображаться и допускать смещение значений.

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

Хотя мне было приказано сделать это с помощью jquery, это не имеет большого значения до тех пор, пока оно работает, поэтому не стесняйтесь называть другие альтернативы, которые все более и менее сделаны, если они существуют, единственное ограничение заключается в том, что это было сделано на стороне клиента с использованием JavaScript, так как остальная часть кода делается на этом.

Благодарим за помощь.

+0

Извините, таблица не отображается должным образом, я пытаюсь ее улучшить. – mylket

+0

Как насчет диалога jquery? Вы уже что-то пробовали? Где код? –

ответ

0

Для диалога вы можете использовать пользовательский интерфейс jQuery. Чтобы удовлетворить остальные требования, просто добавьте немного css. Здесь у вас есть пример вашего дела. Надеюсь, это вам поможет:

<html> 
    <head> 
     <title></title> 
     <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
     <style> 
      #dialog-content { 
       height: 200px; 
       /* Show scrolls if overflows! */ 
       overflow: scroll; 
      } 

      #dialog-content th, 
      #dialog-content td { 
       /* Big rows! */ 
       padding: 20px; 
      } 
     </style> 
     <script> 
      $(document).ready(function() { 
       $("#dialog").dialog(); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="dialog" title="Basic dialog"> 
      <div id="dialog-content"> 
       <table> 
        <thead> 
         <tr> 
          <th>Field1</th> 
          <th>Field2</th> 
          <th>Field3</th> 
          <th>Field4</th> 
          <th>Field5</th> 
         </tr> 
        </thead> 
        <tbody> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
         <tr> 
          <td>Value1</td> 
          <td>Value2</td> 
          <td>Value3</td> 
          <td>Value4</td> 
          <td>Value5</td> 
         </tr> 
        </tbody> 
       </table> 
      </div> 
     </div> 
    </body> 
</html> 
Смежные вопросы