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

Popular posts from this blog

gridview - Yii2 DataPorivider $totalSum for a column -

java - Suppress Jboss version details from HTTP error response -

Sass watch command compiles .scss files before full sftp upload -