C# 未定义jqgrid gridComplete setRowData onclick函数
我现在正在使用JQGrid。C# 未定义jqgrid gridComplete setRowData onclick函数,c#,javascript,jqgrid,C#,Javascript,Jqgrid,我现在正在使用JQGrid。 首先,我想创建具有编辑和删除按钮的列表网格。 由于此网格具有编辑和删除按钮,当用户单击这些按钮时,我希望用户根据单击的行id重定向到下一页。 <script type="text/javascript"> jQuery(document).ready(function () { var test = function () { alert("****"); }; var grid = $("#list");
首先,我想创建具有编辑和删除按钮的列表网格。
由于此网格具有编辑和删除按钮,当用户单击这些按钮时,我希望用户根据单击的行id重定向到下一页。
<script type="text/javascript">
jQuery(document).ready(function () {
var test = function () {
alert("****");
};
var grid = $("#list");
grid.jqGrid({
url: '/Supplier/Select_SupplierByX/',
datatype: 'json',
mtype: 'POST',
postData: {
SupplierName: function () { return $("#txtSupplierName").val(); },
Address: function () { return $("#txtAddress").val(); },
Phone: function () { return $("#txtPhone").val(); }
},
colNames: ['Actions', 'SupplierID', 'SupplierName', 'Address', 'Phone'],
colModel: [
{ name: 'act', index: 'act', width: 25, sortable: false },
{ name: 'SupplierID', index: 'SupplierID', width: 40, align: 'left', editable: false, searchtype: "integer" },
{ name: 'SupplierName', index: 'SupplierName', width: 40, align: 'left', editable: false },
{ name: 'Address', index: 'Address', width: 40, align: 'left', editable: false },
{ name: 'Phone', index: 'Phone', width: 40, align: 'left', editable: false }
],
loadtext: 'Loading Supplier Information...',
pager: jQuery('#pager'),
rowNum: 10,
sortname: 'SupplierName',
sortorder: "asc",
rownumbers: true,
sortable: true,
viewrecords: true,
autowidth: true,
height: 300,
caption: 'Supplier List',
gridComplete: function () {
test();
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
//be = "<input style='width:60px;' type='button' value='Edit' onclick=\"gridRowButtonClick('" + cl + "', 'true');\" />";
//se = "<input style='width:60px;' type='button' value='Delete' onclick=\"gridRowButtonClick('" + cl + "', 'false');\" />";
be = "<input style='width:60px;' type='button' value='Edit' onclick=\"javascript:alert('Testing');\" />";
se = "<input style='width:60px;' type='button' value='Delete' onclick=\"test();\" />";
grid.jqGrid('setRowData', ids[i], { act: be + se });
}
}
/*,gridRowButtonClick: function (id, isEdit) {
alert("This is gridRowButtonClick.\n"+ id +" : "+ isEdit);
}*/
}).navGrid('#pager', { search: false, del: false, add: false, edit: false },
{}, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{}, // search options
{} // view parameters
);
$('#butSearch').click(function () {
grid.trigger("reloadGrid");
});
});
jQuery(文档).ready(函数(){
var测试=函数(){
警报(“****”);
};
风险值网格=$(“#列表”);
grid.jqGrid({
url:“/Supplier/Select_SupplierByX/”,
数据类型:“json”,
mtype:“POST”,
postData:{
供应商名称:函数(){return$(“#txtSupplierName”).val();},
地址:函数(){return$(“#txtAddress”).val()},
Phone:function(){return$(“#txtPhone”).val()}
},
colNames:['Actions','SupplierID','SupplierName','Address','Phone'],
colModel:[
{name:'act',index:'act',宽度:25,可排序:false},
{name:'SupplierID',index:'SupplierID',宽度:40,align:'left',可编辑:false,searchtype:'integer},
{name:'SupplierName',index:'SupplierName',宽度:40,align:'left',可编辑:false},
{name:'Address',index:'Address',width:40,align:'left',editable:false},
{名称:'Phone',索引:'Phone',宽度:40,对齐:'left',可编辑:false}
],
loadtext:“正在加载供应商信息…”,
pager:jQuery(“#pager”),
rowNum:10,
sortname:“供应商名称”,
分拣员:“asc”,
行数:对,
可排序:是的,
viewrecords:是的,
自动宽度:正确,
身高:300,
标题:“供应商名单”,
gridComplete:函数(){
test();
var id=grid.jqGrid('getdataid');
对于(变量i=0;i
根据上面的JavaScript,gridComplete事件被触发,并显示“**”消息。但当我点击删除按钮时,firebug说“测试未定义”
任何建议都将不胜感激。您在
jQuery(document.ready(function(){/*here*/})中定义了test
函数代码>事件处理程序。你应该把它移到外面,使它全球化。必须在全局级别上定义从onclick
调用的函数
还有一句话。您当前添加按钮的实现非常缓慢。如果您尝试使用大约100或1000行的代码,您将清楚地看到这一变化。问题在于setRowData
修改页面上的元素。问题是页面上的每一个更改都会导致重新计算页面上每个现有元素的位置。至少需要这样做。因此,使用cellattr和。此外,还应始终使用jqGrid的gridview:true
选项。按照这种方式,完整的jqGrid主体将首先准备为文本,然后作为one操作放置在页面上(在相应元素的innetHTML
属性中设置HTML片段)。它多次提高了jqGrid的性能
例如,您可以将'act'
列定义为
{ name: 'act', index: 'act', width: 25, sortable: false,
formatter: function (cellvalue, options, rowObject) {
return "<input style='width:60px;' type='button' value='Edit' " +
"onclick=\"javascript:alert('Testing');\" />" +
"<input style='width:60px;' type='button' value='Delete' " +
"onclick=\"test(" + options.rowId + ");\" />";
}}
{name:'act',index:'act',宽度:25,可排序:false,
格式化程序:函数(cellvalue、options、rowObject){
返回“”+
"";
}}
不要忘记将gridview:true
包含到您使用的选项列表中