2013-08-28 2 views
0

Я новичок в javascript, можно ли создать контейнер класса, например «Grid» в WPF? желательно без jQuery и т. Д. Мне нужно создать контейнер, подобный Grid, в коде XAML ниже.создать контейнер сетки в JavaScript

 <Window x:Class="WpfApplication1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Title="MainWindow" Height="350" Width="525"> 
<Grid x:Name="grid1"> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="30*"></RowDefinition> 
     <RowDefinition Height="30*"></RowDefinition> 
     <RowDefinition Height="30*"></RowDefinition> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="100*"> 
     </ColumnDefinition> 
    </Grid.ColumnDefinitions> 
    <Grid x:Name="Grid2" Grid.Row="0" Grid.Column="0"></Grid> 
</Grid> 

+1

просто использовать таблицу HTML –

+0

Вы здесь смотрите: http://stackoverflow.com/questions/14462931/how- do-i-create-this-grid-in-html-css-no-js Существуют также теги сетки, специфичные для конкретного поставщика, которые могут использоваться, например, для ms-grid http://msdn.microsoft.com/en-us/library /ie/hh673533(v=vs.85).aspx, но в настоящее время поддерживается только в IE http://caniuse.com/#search=grid. Если это для приложений магазина Windows, это сравнение html и xaml: http://irisclasson.com/2013/01/25/winrt-comparison-jshtml-and-cxaml-using-a-grid-for-app-layout /. –

ответ

0

Вы можете использовать:

HTML разметка:

<table id="grid1"> 
     <tr class="row30"> 
      <td class="column100"> 
       <table id="Grid2"></table> 
      </td> 
      <td></td> 
     </tr> 
     <tr class="row30"> 
      <td class="column100"></td> 
      <td></td> 
     </tr> 
     <tr class="row30"> 
      <td class="column100"></td> 
      <td></td> 
     </tr> 
    </table> 

CSS:

.row30{ height: 30px; } 
.column100 { width: 100px; } 
0

В HTML только элемент Table обеспечивает аналогичное поведение. Он должен быть расширен с помощью css, но затем вы можете создать сетчатый опыт. Если вы хотите больше функций, таких как сортировка, поиск и пейджинг, я могу порекомендовать jQuery DataTables. Он бесплатный, простой в использовании и быстрый.

Вот некоторые простой JavaScript, чтобы обрешетка стол

var container = document.getElementById("container"); 
var newInner = "<table>"; 
newInner += "<thead>"; 
newInner += "<tr>"; 
newInner += "<th>Column1</th>"; 
newInner += "<th>Column2</th>"; 
newInner += "</tr>"; 
newInner += "</thead>"; 
newInner += "<tbody>"; 
for (var i=0;i< 100;i++) 
{ 
    newInner += "<tr>"; 
    newInner += "<td>Content" + i + "_1</td>"; 
    newInner += "<td>Content" + i + "_2</td>";  
    newInner += "</tr>"; 
} 
newInner += "</tbody>"; 
newInner += "</table>"; 
container.innerHTML = newInner; 

I've also created a Fiddle where you can check out jQuery Datatables

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