Блог

У меня есть 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=param1Valueamp;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>
 

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

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

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

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