jqGrid navButtonAdd不起作用

时间:2011-11-01 09:47:55

标签: javascript jquery jqgrid

我的项目中有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>

提前致谢。

1 个答案:

答案 0 :(得分:1)

您的代码存在一些问题。主要错误是您错过了JavaScript代码末尾的});。您在jQuery(function(){...中使用jQuery(function(){...的另一个问题是使代码难以读取。我建议你另外减少全局功能的数量。在您当前的代码中,函数loadCompleteHandlerselect1select2在顶层定义并且是全局的。您最好将代码置于任何函数内部(如jQuery(function(){...});内部)。更好的是定义内联函数。下一个备注:您应该始终在parseInt函数中使用radix参数(在您的情况下为10)并且不包括尾随逗号(请参阅},]的定义和colModelData)。 / p>

还应该定义一个变量:lastSel$page对我来说也不清楚。在我修改您的代码时,您会发现here我只是将其替换为1.无论如何,您可以在演示中看到navButtonAdd方法在修改后的代码中正常工作。

我建议您使用JSLint来帮助您提高代码质量。