jgrid

<title>P-Dos # List Of Wells</title>
<link rel="stylesheet" href="<?= base_url() ?>components/_mod/jquery-ui/jquery-ui.css" />
<link rel="stylesheet" href="<?= base_url() ?>components/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="<?= base_url() ?>components/_mod/jqgrid/ui.jqgrid.css" />

<!-- ajax layout which only needs content area -->
<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <table id="grid-table"></table>
        <div id="grid-pager"></div>
        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
var JS_SITE_URL = "<?= site_url() ?>";
var JS_BASE_URL = "<?= base_url() ?>";

var company_id = "<?= $company_id ?>";
var region_id = "<?= $region_id ?>";
var company_name = "<?= $com->company_name ?>";
var region_name = "<?= $reg->region_name ?>";

var scripts = [null,
    JS_BASE_URL + "components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js",
    JS_BASE_URL + "components/jqGrid/js/jquery.jqGrid.js",
    JS_BASE_URL + "components/jqGrid/js/i18n/grid.locale-en.js", null];

$('.page-content-area').ace_ajax('loadScripts', scripts, function () {
    //inline scripts related to this page
    jQuery(function ($) {
        var grid_selector = "#grid-table";
        var pager_selector = "#grid-pager";

        //resize to fit page size
        $(window).on('resize.jqGrid', function () {
            $(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
        })

        //resize on sidebar collapse/expand
        var parent_column = $(grid_selector).closest('[class*="col-"]');
        $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
            if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                //setTimeout is for webkit only to give time for DOM changes and then redraw!!!
                setTimeout(function () {
                    $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                }, 0);
            }
        })

        var selr = jQuery(grid_selector).jqGrid('getGridParam', 'selrow');
        jQuery(grid_selector).setGridParam({
            datatype : 'json',
            page : 1
        }).trigger("reloadGrid");
        jQuery(grid_selector).jqGrid({
            datatype : "json",
            url : JS_SITE_URL + "/well/getListWells",
            height : "100%",
            colNames : ['', 'Wells Id', 'Wells Name', 'Drilling Rig', 'Drilling Contractor', 'Spud Date', 'TD Date', 'TD Depth'],
            colModel :[
                {name:'act',index:'act', width:100,sortable:false},
                {
                    name : 'wells_id',
                    index : 'wells_id',
                    width : 150
                },
                {name:'wells_name',index:'wells_name', width:300, editable:true},
                 {
                    name : 'drilling_rig',
                    index : 'drilling_rig',
                    editable : true,
                    align : 'left',
                    width : 300
                }, {
                    name : 'drilling_contractor',
                    index : 'drilling_contractor',
                    editable : true,
                    align : 'left',
                    width : 300,
                    editoptions : {}
                }, {
                    name : 'spud_date',
                    index : 'spud_date',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                    sorttype : "date",
                    unformat : pickDate,
                    formatter : 'date',
                    formatoptions : {
                        srcformat : 'ISO8601Long',
                        newformat : 'd-m-Y H:i',
                        defaultValue : null
                    }
                }, {
                    name : 'td_date',
                    index : 'td_date',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                    sorttype : "date",
                    unformat : pickDate,
                    formatter : 'date',
                    formatoptions : {
                        srcformat : 'ISO8601Long',
                        newformat : 'd-m-Y H:i',
                        defaultValue : null
                    }
                }, {
                    name : 'td_depth',
                    index : 'td_depth',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                }
            ],
            gridComplete: function(){
                var ids = jQuery(grid_selector).jqGrid('getDataIDs');
                for(var i=0;i < ids.length;i++){
                    var cl = ids[i];
                    be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />";
                    se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />";
                    ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
                    jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
                }
            },
        });
/*
        jQuery(grid_selector).jqGrid({
            datatype : "json",
            url : JS_SITE_URL + "/well/getListWells",
            mtype : "POST",
            height : "100%",
            colNames : ['', 'Wells Id', 'Wells Name', 'Drilling Rig', 'Drilling Contractor', 'Spud Date', 'TD Date', 'TD Depth'],
            colModel : [{
                    name : '',
                    index : '',
                    width : 100,
                    fixed : true,
                    sortable : false,
                    resize : false,
                    formatter : 'actions',
                    formatoptions : {
                        keys : true,
                        deldata : {
                            id : $(selr + 'wells_id').val()
                        },
                        delOptions : {
                            recreateForm : true,
                            beforeShowForm : beforeDeleteCallback,
                        },
                        adwbutton : false
                    },
                    search : false
                }, {
                    name : 'wells_id',
                    index : 'wells_id',
                    editable : false,
                    align : 'center',
                    width : 150,
                    searchoptions : {
                        clearSearch : false
                    }
                }, {
                    name : 'wells_name',
                    index : 'wells_name',
                    editable : true,
                    align : 'left',
                    width : 300,
                    searchoptions : {
                        clearSearch : false
                    }
                }, {
                    name : 'drilling_rig',
                    index : 'drilling_rig',
                    editable : true,
                    align : 'left',
                    width : 300,
                    searchoptions : {
                        clearSearch : false
                    }
                }, {
                    name : 'drilling_contractor',
                    index : 'drilling_contractor',
                    editable : true,
                    align : 'left',
                    width : 300,
                    editoptions : {},
                    searchoptions : {
                        clearSearch : false
                    }
                }, {
                    name : 'spud_date',
                    index : 'spud_date',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                    searchoptions : {
                        clearSearch : false
                    },
                    sorttype : "date",
                    unformat : pickDate,
                    formatter : 'date',
                    formatoptions : {
                        srcformat : 'ISO8601Long',
                        newformat : 'd-m-Y H:i',
                        defaultValue : null
                    }
                }, {
                    name : 'td_date',
                    index : 'td_date',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                    searchoptions : {
                        clearSearch : false
                    },
                    sorttype : "date",
                    unformat : pickDate,
                    formatter : 'date',
                    formatoptions : {
                        srcformat : 'ISO8601Long',
                        newformat : 'd-m-Y H:i',
                        defaultValue : null
                    }
                }, {
                    name : 'td_depth',
                    index : 'td_depth',
                    editable : true,
                    align : 'center',
                    width : 150,
                    editoptions : {},
                    searchoptions : {
                        clearSearch : false
                    }
                }
            ],
            jsonReader : {
                root : "rows",
                page : "page",
                total : "total",
                records : "records",
                repeatitems : true,
                cell : "cell",
                id : "id",
                userdata : "userdata"
            },
            viewrecords : true,
            rowNum : 10,
            rowList : [10, 20, 30, 50, 100],
            pager : pager_selector,
            loadonce : false,
            altRows : true,
            closeAfterAdd : true,
            closeAfterEdit : true,
            multiselect : true,
            multiboxonly : true,
            shrinkToFit : false,
            loadComplete : function () {
                var table = this;
                setTimeout(function () {
                    styleCheckbox(table);
                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
            },
            editurl : JS_SITE_URL + "/well/simpan_wells?cid=" + company_id + "&rid=" + region_id,
            reloadAfterSubmit : true,
            caption : "List of Well " + company_name + "#Region : " + region_name,
            ondblClickRow : function (rowId) {
                location.href = "#docs/file_wells?wid=" + rowId;
            },
            serializeGridData : function (postData) {
                var newPostData = $.extend(postData, {
                        companyID : company_id,
                        regionID : region_id
                    });
                return $.param(newPostData);
            }
        });
*/
        jQuery(grid_selector).jqGrid('filterToolbar', {
            autosearch : true,
            stringResult : true,
            searchOperators : false,
            searchOnEnter : false,
            defaultSearch : "cn",
            enableClear : false
        });

        $(window).triggerHandler('resize.jqGrid'); //trigger window resize to make the grid get the correct size
        //enable datepicker
        function pickDate(cellvalue, options, cell) {
            setTimeout(function () {
                $(cell).find('input[type=text]')
                .datepicker({
                    format : 'dd-mm-yyyy',
                    autoclose : true
                });
            }, 0);
        }

        jQuery(grid_selector).jqGrid('navGrid', pager_selector, { //navbar options
            edit : false,
            editicon : 'ace-icon fa fa-pencil blue',
            add : true,
            addicon : 'ace-icon fa fa-plus-circle purple',
            del : false,
            delicon : 'ace-icon fa fa-trash-o red',
            search : false,
            searchicon : 'ace-icon fa fa-search orange',
            refresh : true,
            refreshicon : 'ace-icon fa fa-refresh green',
            view : false,
            viewicon : 'ace-icon fa fa-search-plus grey',
        }, {
            width : 500,
            editCaption : 'Edit Wells',
            bSubmit : "Simpan",
            bCancel : "Batal",
            closeAfterEdit : true,
            closeOnEscape : true,
            reloadAfterSubmit : true,
            refreshtext : 'Reload',
            recreateForm : true,
            beforeShowForm : function (e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
        }, {
            //new record form
            width : 500,
            addCaption : 'Add Wells',
            closeAfterAdd : true,
            recreateForm : true,
            viewPagerButtons : false,
            beforeShowForm : function (e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                .wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
        }, {
            //delete record form
            width : 300,
            caption : "Delete Wells",
            msg : "Are You Sure?",
            bSubmit : "Hapus",
            bCancel : "Batal",
            recreateForm : true,
            beforeShowForm : function (e) {
                var form = $(e[0]);
                if (form.data('styled'))
                    return false;
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);
            }
        }, {
            //search form
            recreateForm : true,
            afterShowSearch : function (e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                style_search_form(form);
            },
            afterRedraw : function () {
                style_search_filters($(this));
            },
            multipleSearch : true
        }, {
            //view record form
            recreateForm : true,
            beforeShowForm : function (e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
            }
        })

        function style_edit_form(form) {
            //update buttons classes
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide(); //ui-icon, s-icon
            buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
            buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')
            buttons = form.next().find('.navButton a');
            buttons.find('.ui-icon').hide();
            buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
            buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
        }
        function style_delete_form(form) {
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide(); //ui-icon, s-icon
            buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
            buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
        }
        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }
        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        function beforeDeleteCallback(e) {
            var form = $(e[0]);
            if (form.data('styled'))
                return false;
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_delete_form(form);
            //form.data('styled', true);
        }

        function beforeEditCallback(e) {
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_edit_form(form);
        }

        //it causes some flicker when reloading or navigating grid
        //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
        //or go back to default browser checkbox styles for the grid
        function styleCheckbox(table) {}

        function updateActionIcons(table) {}

        //replace icons with FontAwesome icons like above
        function updatePagerIcons(table) {
            var replacement = {
                'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function () {
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if ($class in replacement)
                    icon.attr('class', 'ui-icon ' + replacement[$class]);
            });
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({
                container : 'body'
            });
            $(table).find('.ui-pg-div').tooltip({
                container : 'body'
            });
        }

        $(document).one('ajaxloadstart.page', function (e) {
            $.jgrid.gridDestroy(grid_selector);
            $('.ui-jqdialog').remove();
        });
    });
});

</script>