jqGrid navButtonДобавить не работает

Question

У меня есть jqGrid в моем проекте, и я хотел бы добавить пользовательские кнопки, но в сетке нет кнопок, и, насколько я вижу, нет проблемы с синтаксисом.Я попытался упростить свою сетку, но кнопка так и не появилась.Я использую шаблонный движок Velocity, поэтому в моем коде есть символ $, который не относится к jQuery.Я использую jqGrid 3.8.2.

Вот как я строю сетку:

      <script type="text/javascript">

                function loadCompleteHandler(){
                    jQuery("#listTable").jqGrid('setGridHeight', Math.min(500,parseInt(jQuery(".ui-jqgrid-btable").css('height'))));
                }

                function select1() {
                    return ": ;false:no;true:yes";
                }

                function select2(){
                            return ": ; 1:Select1;2:Select2;3:Select3";
                }

        var colModelData = [
                    {name:'1', index:'1',width:'5%', hidden: true, align:'center', sortable: false, resizable:false},
                    {name:'2', index:'2',width:'10%', align:'center', formatter: 'checkbox', sortable: false, editable: true, stype: 'select', edittype: 'checkbox', editoptions: {value: "Yes:No"}, searchoptions: { value: select1()}, resizable:false},
                    {name:'3', index:'3', width:'35%', sortable: false, resizable:false, defaultValue: ''},
                    {name:'4', index:'4', width:'30%', sortable: false, resizable:false, defaultValue: ''},
                    {name:'5', index:'5', width:'20%', sortable: false, defaultValue: '$selectedValue', stype: 'select', searchoptions: {value: select2()}, resizable:false},
                    ]

        jQuery(function(){
            jQuery("#listTable").jqGrid({
            url: '$urlManager.getURL("/myPath/My.json")' + '?param1=param1Value&param2=param2Value',
            datatype: 'json',
            postData: {
                filters: '{"groupOp":"AND","rules":' + 
                         '[{"field":"field3","op":"eq","data":"$selectedValue"}]}'
            },
            mtype: 'POST',
            colNames:['', '<input type="checkbox" id="selectionCheckbox" onclick="checkboxClick(this)">', 'column3', 'column4', 'column5'],
            colModel : colModelData,
            width:'768',
            height: 500,
            pager: '#pagerDiv',
            gridview: true,
            rowNum: 50,
            rowTotal: 500,
            sortorder: 'desc',
            onSelectRow: function(id){
                    if (id){
                        if (id !== lastSel) {
                            jQuery('#listTable').restoreRow(lastSel);
                            jQuery('#listTable').editRow(id, true);
                            lastSel=id;
                        } else {
                            jQuery('#listTable').editRow(id, true);
                        }
                    }
                },        
            editurl: '$urlManager.getURL("myPath/MyScreen.vm")',
            caption: 'Caption',
            hidegrid: false,
            viewrecords: true,
            loadComplete: loadCompleteHandler,
            ignoreCase: true,
            search: true,
            page: $page
        });

            jQuery(function(){
                jQuery("#listTable").jqGrid('filterToolbar',{
                                    stringResult: true,
                                    searchOnEnter: false });
            });


            jQuery("#listTable").jqGrid('navGrid',"#pagerDiv",{edit:false,add:false,del:false})
                                .jqGrid('navButtonAdd', '#pagerDiv', {caption: "Edit",
                                    onClickButton:function(){
                                        console.log('Button clicked');
                                    }});
    <script type="text/javascript">

    <table id = "listTable"> </table>
    <div id = "pagerDiv"></div>

Заранее спасибо.

Answer 1

Ваш код имеет некоторые проблемы.Основная ошибка в том, что вы пропускаете }); в конце вашего кода JavaScript.Другая проблема, которую вы используете jQuery(function(){... внутри jQuery(function(){..., делает код плохо читаемым.Я предлагаю вам дополнительно уменьшить количество глобальных функций.В вашем текущем коде функции loadCompleteHandler, select1 и select2 определены на верхнем уровне и являются глобальными.Вам лучше разместить код внутри любой функции (например, внутри jQuery(function(){...});).Лучше определить встроенные функции.Следующие замечания: вы всегда должны использовать параметр radix (в вашем случае 10) в функции parseInt и не включать запятые (см. },] в определении colModelData).

Oneболее переменная: lastSel должно быть определено.$page также неясны для меня.В моей модификации вашего кода, которую вы найдете здесь , я просто заменил ее на 1. В любом случае вы можете увидеть, что метод navButtonAdd отлично работает в модифицированном коде.

Я рекомендую вам использовать JSLint , который может помочь вам улучшить качество вашего кода.