Question

我尝试从shieldui创建gridview所以我试试这个

<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数组对象作为其dataSource。

示例代码

＆＃13;

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                 
            }
        });
    });

＆＃13;

<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>

＆＃13;

排序，分页，选择和列定义的其他设置是

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

您可以从表中初始化控件，如以下示例所示： http://demos.shieldui.com/web/grid-databinding/initialization-from-table

在shieldui中的gridview风格

2 个答案: