Стиль gridview в shieldui

Я пытаюсь создать 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

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

Источник

2 ответа

Решение

Из документации сетка 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

Источник

Вы можете инициализировать элемент управления из таблицы, как показано в следующем примере: http://demos.shieldui.com/web/grid-databinding/initialization-from-table

Источник
Другие вопросы по тегам