Jquery Grid Example - Jquery

How to set grid using jquery?

Snippet Code


  
Rate this page :
  [ 0 votes]

Simple jquery code helps you to create and set grid for datas. Here the jquery code allows you to add row and column to your grid. The sample code to set grid is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src='http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js'></script> <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js'></script> <link rel='stylesheet' type='text/css' href='http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css'> <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css'> <script> $(document).ready(function(){ var data = [[1, "Anu", "25"], [2, "Raj", "40"]]; $("#grid").jqGrid({ datatype: "local", height: 45, colNames: ['S.no', 'Name', 'Age'], colModel: [{ name: 'id', index: 'id', width: 50, sorttype: "int"}, { name: 'thingy', index: 'thingy', width: 90, sorttype: "varchar"}, { name: 'blank', index: 'blank', width: 50}, ], }); var names = ["id", "thingy", "blank"]; var mydata = []; for (var i = 0; i < data.length; i++) { mydata[i] = {}; for (var j = 0; j < data[i].length; j++) { mydata[i][names[j]] = data[i][j]; } } for (var i = 0; i <= mydata.length; i++) { $("#grid").jqGrid('addRowData', i + 1, mydata[i]); } }); </script> <table id="grid"></table>

Tags


Ask Questions

Ask Question