jqgrid

图片描述以下是模拟的数据,当input的value变化了,数据回来,页面却无法刷新
$(".btn").click(function () {

        $("#gbox_grid-table").empty()
        if($(".inps").val()=="1"){
        var colNames = [' 81', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes', "7", "8", "9", "10", "11", "12", "13", "14", "15"]
                console.log(1111111)
        }else{
        var colNames = [' 88', 'ID', 'Last Sales', 'Name', 'Stock', 'Ship via', 'Notes', "7", "8", "9", "10", "11", "12", "13", "14", "15"]        
        console.log(22222)
        }
        var colModel = [
            {
                name: 'myac', index: '', width: 80, fixed: true, sortable: false, resize: false,
                formatter: 'actions',
                formatoptions: {
                    keys: true,
                    delOptions: { recreateForm: true },
                    //editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
                }
            },
            { name: '0', index: '0', width: 150, editable: true },
            { name: '1', index: '1', width: 150, editable: true, },
            { name: '2', index: '2', width: 150, editable: true, },
            { name: '3', index: '3', width: 150, editable: true },
            { name: '4', index: '4', width: 150, editable: true, },
            { name: '5', index: '5', width: 150, editable: true },
            { name: '6', index: '6', width: 150, editable: true },
            { name: '7', index: '7', width: 150, editable: true },
            { name: '8', index: '8', width: 150, editable: true },
            { name: '9', index: '9', width: 150, editable: true },
            { name: '10', index: '10', width: 150, editable: true },
            { name: '11', index: '11', width: 150, editable: true },
            { name: '12', index: '12', width: 150, editable: true },
            { name: '13', index: '13', width: 150, editable: true },
            { name: '14', index: '14', width: 150, editable: true },



        ]
        var colName = [
            ["08020092", "AVX", "1200m", "120", "0.3", "30u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020098", "KEMET", "1200m", "120", "1.0", "100u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],
            ["08020000", "VISHAY", "1200m", "120", "2.5", "250u", "AVX", "AVX", "AVX", "AVX", "AVX",],



        ]
        var grid_data = [];
        colName.forEach(function (item) {
            var temp = {};
            item.forEach(function (value, index) {
                temp[index] = value;
            });
            grid_data.push(temp);
        })
        //console.log(grid_data);
        var grid_data1 =
            [
                { "id1": "1", "name": "Desktop Computer", "note": "note", "stock": "Yes", "ship": "FedEx", "sdate1": "2007-12-03" },

            ];
        jQuery(function ($) {
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            jQuery(grid_selector).jqGrid({
                //direction: "rtl",
                data: grid_data,
                datatype: "local",
                height: 250,
                colNames: colNames,//表头
                colModel: colModel,
                viewrecords: true,
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: pager_selector,
                altRows: true,
                //toppager: true,
                multiselect: true,
                //multikey: "ctrlKey",
                multiboxonly: true,
                loadComplete: function () {
                    var table = this;
                    setTimeout(function () {
                        styleCheckbox(table);
                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },

                editurl: $path_base + "/dummy.html",//nothing is saved
                caption: "周晓虎",
                autowidth: true
            });

            //enable search/filter toolbar
            //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})

            //switch element when editing inline
            function aceSwitch(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=checkbox]')
                        .wrap('<label class="inline" />')
                        .addClass('ace ace-switch ace-switch-5')
                        .after('<span class="lbl"></span>');
                }, 0);
            }
            //enable datepicker
            function pickDate(cellvalue, options, cell) {
                setTimeout(function () {
                    $(cell).find('input[type=text]')
                        .datepicker({ format: 'yyyy-mm-dd', autoclose: true });
                }, 0);
            }


            //navButtons
            jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                {     //navbar options
                    edit: true,
                    editicon: 'icon-pencil blue',
                    add: true,
                    addicon: 'icon-plus-sign purple',
                    del: true,
                    delicon: 'icon-trash red',
                    search: true,
                    searchicon: 'icon-search orange',
                    refresh: true,
                    refreshicon: 'icon-refresh green',
                    view: true,
                    viewicon: 'icon-zoom-in grey',
                },
                {
                    //edit record form
                    //closeAfterEdit: true,
                    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
                    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
                    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);

                        form.data('styled', true);
                    },
                    onClick: function (e) {
                        alert(1);
                    }
                },
                {
                    //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,
                    /**
                    multipleGroup:true,
                    showQuery: 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) {
                //enable datepicker on "sdate" field and switches for "stock" field
                form.find('input[name=sdate]').datepicker({ format: 'yyyy-mm-dd', autoclose: true })
                    .end().find('input[name=stock]')
                    .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');

                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>')

                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').remove();
                buttons.eq(0).append('<i class="icon-chevron-left"></i>');
                buttons.eq(1).append('<i class="icon-chevron-right"></i>');
            }
            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></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', 'icon-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-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) {
                /**
                    $(table).find('input:checkbox').addClass('ace')
                    .wrap('<label />')
                    .after('<span class="lbl align-top" />')
            
            
                    $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                    .find('input.cbox[type=checkbox]').addClass('ace')
                    .wrap('<label />').after('<span class="lbl align-top" />');
                */
            }


            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                var replacement = 
                {
                    'ui-icon-pencil' : 'icon-pencil blue',
                    'ui-icon-trash' : 'icon-trash red',
                    'ui-icon-disk' : 'icon-ok green',
                    'ui-icon-cancel' : 'icon-remove red'
                };
                $(table).find('.ui-pg-div span.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]);
                })
                */
            }

            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement =
                    {
                        'ui-icon-seek-first': 'icon-double-angle-left bigger-140',
                        'ui-icon-seek-prev': 'icon-angle-left bigger-140',
                        'ui-icon-seek-next': 'icon-angle-right bigger-140',
                        'ui-icon-seek-end': 'icon-double-angle-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' });
            }

            //var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');


        });
        })
        jQuery("#grid_id").trigger("reloadGrid")

阅读 2.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题