Javascript

Jqgrid for Dummies

1 Apr , 2015  

Here is a quick snippet of how to using JqGrid for dummies, like get data, delete data, access data or data manipulation.

Setup JQGrid:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$(document).ready(function() {
    // Enable tooltips
$("body").tooltip({
    selector : '[data-toggle="tooltip"]'
});
$(".chosen").chosen();

var permission = $('.permission');

// Define ID for table
var selector = "#table-index";
var pager = '#table-pager';

// Setup url ajax for loading data in table
var url = $(selector).data('url');

// Define last sel for edit
var lastSel;

var colModel =  [
     {name:'id', hidden: true, key:true, editable:true},
     {name:'uuid', hidden: true},
     {name:'hybrid', label:'Hybrid', editable: true, editrules:{number: true}, classes: 'numberonly'},
     {name:'some_date', label:'Date Selection', editable: true,  editoptions:{size:20,
          dataInit:function(el){
                $(el).datepicker({dateFormat:'dd-mm-yy'});
          },
          defaultValue: function(){
            var currentTime = new Date();
            var month = parseInt(currentTime.getMonth() + 1);
            month = month < = 9 ? "0"+month : month;
            var day = currentTime.getDate();
            day = day <= 9 ? "0"+day : day;
            var year = currentTime.getFullYear();
            return day+"-"+month + "-"+year;
          }
        }
      },
 ];

/**
 * Setup Table GRID
 *
 * We need to define colModel with editable and edittype
 * Check to load pager and bind keys
 */
var tableGrid = $(selector).jqGrid({
    url : url,
    datatype : "json",
    colModel : colModel,
    rowNum : 100,
    rowList : [100, 500, 1000],
    pager : pager,
    sortname : 'id',
    sortorder : "desc",
    height: 300,
    jsonReader : {
        repeatitems: false,
        id: "0"
    },
    editurl: $(selector).data('edit-url'),
    viewrecords: true,
    multiselect: true,
    onSelectRow: function(id){
         if(id && id!==lastSel){
            $(selector).restoreRow(lastSel);
            lastSel=id;
         }
   },
});

More…