GridView стиль в shieldui

Question

Я пытаюсь создать GridView из shieldui Так я попробовать этот

<table id="grid"> 
<tr> 
<th> 
Name 
</th> 
<th> 
Name 
</th> 
<th> 
Name 
</th> 
</tr> 
<tr> 
<td> 
ABC 
</td> 
<td> 
ABC 
</td> 
<td> 
ABC 
</td> 
</tr> 
</table> 

JS

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#grid").shieldGrid 

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

Answer 1

Из документации сетка sheildui ожидает, что массив данных JavaScript будет являться его источником данных.

Пример кода

var sampleData = 
 
[ 
 
    { 
 
     "id": 0, 
 
     "name": "Sue Sharpe", 
 
     "gender": "female", 
 
     "company": "Mitroc", 
 
     "email": "suesharpe@mitroc.com" 
 
    }, 
 
    { 
 
     "id": 1, 
 
     "name": "Nieves Hubbard", 
 
     "gender": "male", 
 
     "company": "Syntac", 
 
     "email": "nieveshubbard@syntac.com" 
 
    }, 
 
    { 
 
     "id": 2, 
 
     "name": "Anastasia Underwood", 
 
     "gender": "female", 
 
     "company": "Gallaxia", 
 
     "email": "anastasiaunderwood@gallaxia.com" 
 
    }, 
 
    { 
 
     "id": 3, 
 
     "name": "Maxine Haley", 
 
     "gender": "female", 
 
     "company": "Songbird", 
 
     "email": "maxinehaley@songbird.com" 
 
    }, 
 
    { 
 
     "id": 4, 
 
     "name": "Bennett Alvarez", 
 
     "gender": "male", 
 
     "company": "Marvane", 
 
     "email": "bennettalvarez@marvane.com" 
 
    } 
 
    ]; 
 
jQuery(function ($) { 
 
     $("#grid").shieldGrid({ 
 
      dataSource: { 
 
       data: sampleData     
 
      } 
 
     }); 
 
    });  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://www.shieldui.com/shared/components/latest/css/light/all.min.css" rel="stylesheet"/> 
 
<script src="https://www.shieldui.com/shared/components/latest/js/shieldui-all.min.js"></script> 
 
<div id="grid"></div>

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

sorting:{ 
    multiple: true 
}, 
paging: { 
    pageSize: 12, 
    pageLinksCount: 10 
}, 
selection:{ 
    type: "row", 
    multiple: true, 
    toggle: false 
}, 
columns: [     
    { field: "id", width: "70px", title: "ID" }, 
    { field: "name", title: "Person Name" }, 
    { field: "company", title: "Company Name" }, 
    { field: "email", title:"Email Address", width: "270px" } 
] 

Документация: http://demos.shieldui.com/web/grid-general/basic-usage

Answer 2

Вы можете INITI как показано в этом примере: http://demos.shieldui.com/web/grid-databinding/initialization-from-table