我的项目中有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¶m2=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>
提前致谢。
答案 0 :(得分:1)
您的代码存在一些问题。主要错误是您错过了JavaScript代码末尾的});
。您在jQuery(function(){...
中使用jQuery(function(){...
的另一个问题是使代码难以读取。我建议你另外减少全局功能的数量。在您当前的代码中,函数loadCompleteHandler
,select1
和select2
在顶层定义并且是全局的。您最好将代码置于任何函数内部(如jQuery(function(){...});
内部)。更好的是定义内联函数。下一个备注:您应该始终在parseInt
函数中使用radix参数(在您的情况下为10)并且不包括尾随逗号(请参阅},]
的定义和colModelData
)。 / p>
还应该定义一个变量:lastSel
。 $page
对我来说也不清楚。在我修改您的代码时,您会发现here我只是将其替换为1.无论如何,您可以在演示中看到navButtonAdd
方法在修改后的代码中正常工作。
我建议您使用JSLint来帮助您提高代码质量。