gridview style in shieldui -
i try create gridview shieldui try
<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
i add links when build , check show simple grid no style soultion?
from documentation, sheildui grid expects javascript array of objects datasource.
sample code
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>
additional settings sorting, paging, selection , column definitions are
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" } ]
documentation: http://demos.shieldui.com/web/grid-general/basic-usage
Comments
Post a Comment