Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1 
var jqGridBasic = function() {
2 
 
3 
    var grid;
4 
 
5 
    var demo1 = function() {
6 
 
7 
        grid = $("#jqgrid");
8 
 
9 
        // adjust grid width on resize
10 
        var adjustGridWith = function() {
11 
            grid.jqGrid('setGridWidth', $(".ui-jqgrid").parent().width());
12 
        }
13 
 
14 
        // datepicker init function
15 
        var initDatepicker = function( cellvalue, options, cell ) {
16 
            setTimeout(function(){
17 
                $(cell).find('input[type=text]').datepicker({format:'yyyy-mm-dd' , autoclose:true});
18 
            });
19 
        }
20 
 
21 
        var data = [
22 
            { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
23 
            { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
24 
            { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
25 
            { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
26 
            { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
27 
            { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
28 
            { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
29 
            { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
30 
            { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
31 
            { id: "10", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
32 
            { id: "11", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
33 
            { id: "12", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
34 
            { id: "13", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
35 
            { id: "14", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
36 
            { id: "15", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
37 
            { id: "16", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
38 
            { id: "17", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
39 
            { id: "18", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
40 
            { id: "19", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
41 
            { id: "20", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
42 
            { id: "21", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
43 
            { id: "22", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
44 
            { id: "23", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
45 
        ];
46 
 
47 
        grid.jqGrid({
48 
 
49 
            datatype: "local",
50 
            data: data,
51 
            height: 300,
52 
 
53 
            rowNum : 10,
54 
            rowList : [10, 20, 30],
55 
            pager : '#jqgrid_pager',
56 
 
57 
            sortname : 'id',
58 
            toolbarfilter: true,
59 
 
60 
            multiselect : true,
61 
            multiselectWidth: 34,
62 
            autowidth : true,            
63 
            viewrecords: true, // show the current page, data rang and total records on the toolbar
64 
 
65 
            gridComplete: function(){
66 
                Metronic.initUniform();
67 
                adjustGridWith();
68 
 
69 
                var ids = grid.jqGrid('getDataIDs');
70 
                for(var i=0;i < ids.length;i++){
71 
                    var edit    = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jqGridBasic.getGrid().editRow('"+ids[i]+"');\"><i class='fa fa-pencil'></i></button>";
72 
                    var save    = "&nbsp;<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jqGridBasic.getGrid().saveRow('"+ids[i]+"');\"><i class='fa fa-check'></i></button>";
73 
                    var cancel  = "&nbsp;<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jqGridBasic.getGrid().restoreRow('"+ids[i]+"');\"><i class='fa fa-times'></i></button>";  
74 
                    grid.jqGrid('setRowData',ids[i],{act: edit + save + cancel});
75 
                }  
76 
            },
77 
 
78 
            colModel: [
79 
                {label: 'Inv No', name: 'id', width: 75, key: true, editable : true},
80 
                {label: 'Date', name: 'invdate', width: 90, editable : true, unformat: initDatepicker},
81 
                {label: 'Client', name: 'name', width: 100, editable : true},
82 
                {label: 'Amount', name: 'amount', width: 80, editable : true},
83 
                {label: 'Tax', name: 'tax', width: 80, editable : true},
84 
                {label: 'Total', name: 'total', width: 80, editable : true},
85 
                {label: 'Notes', name: 'note', width: 150, editable : true},
86 
                {label: 'Actions', name : 'act', index:'act', width: 80, sortable:false },
87 
            ]
88 
        });
89 
 
90 
        // add navigation bar with some built in actions for the grid
91 
        grid.navGrid('#jqgrid_pager', {
92 
            edit: true,
93 
            add: true,
94 
            del: true,
95 
            search: true,
96 
            refresh: true,
97 
            view: true,
98 
            position: "left",
99 
            cloneToTop: false
100 
        });
101 
 
102 
        adjustGridWith();
103 
 
104 
        Metronic.addResizeHandler(function(){
105 
            adjustGridWith();
106 
        });
107 
    }
108 
 
109 
    return {
110 
 
111 
        //main function to initiate the module
112 
        init: function() {
113 
            demo1();
114 
        },
115 
 
116 
        getGrid: function() {
117 
            return grid;
118 
        }
119 
 
120 
    };
121 
 
122 
}();