首页 > 解决方案 > jqgrid 在编辑或添加表单时未显示任何字段

问题描述

我建立了一个非常基本的 jqgrid 表。它显示我提供的 url 的结果,没有问题。如果我单击添加行或编辑行图标,则会出现一个空窗口,没有任何要填写的字段。

这是我的代码:

$('#mygrid').jqGrid({  
        colMenu: true,
        url: 'someurl.php',
        datatype:'json',
        colNames:['NUMB','ACCNAME','MEMO','TOTAL','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC','JAN','FEB','MAR'],
        colModel: [
            { name: "ACCOUNT_NUMBER",  width:60},
            { name: "ACCNAME",  editable: "true"},
            { name: "DETAIL",  editable: "true", edittype:"textarea", editoptions:{size:10} },
            { name: "TOTAL",  width:75, classes:'text-primary', editable: "true",editoptions:{size:10}  },
            { name: "APR", index: "APR",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "MAY", index: "MAY",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JUN", index: "JUN",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JUL", index: "JUL",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "AUG", index: "AUG",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "SEP", index: "SEP",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "OCT",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "NOV",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "DEC",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "JAN",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "FEB",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10} },
            { name: "MAR",  width:75, editable: "true",edittype:"textarea",editoptions:{size:10}  }

        ],
        viewrecords: true,
        emptyrecords: "Nothing to display",
        rowNum: 15,
        styleUI : 'Bootstrap4',
        iconSet : 'Octicons',
        pager : '#gridpager',
        autowidth : true, 
        shrinkToFit : false,
        height : '75%',
        rowList : [10, 20, 30],
        altRows : true,
        toppager : true,
        caption: "something",
        editurl : 'anotherurl.php'


});
$("#mygrid").jqGrid('navGrid','#gridpager',{add:true,edit:true,del:true,search:true,refresh:true});

这里弹出的空窗口:

在此处输入图像描述

标签: jqgridrowadd

解决方案


您遇到的问题是设置可编辑属性。您将其设置为字符串,但它应该是一个布尔值。在 colModel 项目替换

editable : "true"

editable : true

这是 Javascript 的一个很大的不同


推荐阅读