1
甲酸按鈕(添加,編輯,刪除按鈕不可見)jqGrid的格式按鈕(行爲)不可見
jqGrid的版本:jqgrid EditActionIconsColumn Events
:4.4.4下面的腳本複製,然後從修改
我需要顯示添加,編輯,在這個演示中刪除如按鈕:http://www.ok-soft-gmbh.com/jqGrid/ActionButtons.htm
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.button.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.theme.css" rel="stylesheet" />
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
$("#gridViewEditable").jqGrid({
data: data,
datatype: "local",
cmTemplate: { sortable: false },
colNames: ['Actions', "QuotationDetailID", "QuotationID", "ServiceID", "ServiceDescription", "Unit", "Rate", "Discount", "Frequency", "FrequencyBase", "Total"],
colModel: [
///
{
name: 'Actions', index: 'Actions', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
alert("in onEdit: rowid=" + rowid + "\nWe don't need return anything");
},
onSuccess: function (jqXHR) {
// the function will be used as "succesfunc" parameter of editRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
alert("in onSuccess used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\n\nWe can verify the server response and return false in case of" +
" error response. return true confirm that the response is successful");
// we can verify the server response and interpret it do as an error
// in the case we should return false. In the case onError will be called
return true;
},
onError: function (rowid, jqXHR, textStatus) {
// the function will be used as "errorfunc" parameter of editRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#editrow)
// and saveRow function
// (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing#saverow)
alert("in onError used only for remote editing:" +
"\nresponseText=" + jqXHR.responseText +
"\nstatus=" + jqXHR.status +
"\nstatusText" + jqXHR.statusText +
"\n\nWe don't need return anything");
},
afterSave: function (rowid) {
alert("in afterSave (Submit): rowid=" + rowid + "\nWe don't need return anything");
},
afterRestore: function (rowid) {
alert("in afterRestore (Cancel): rowid=" + rowid + "\nWe don't need return anything");
},
delOptions: {
// because I use "local" data I don't want to send the changes to the server
// so I use "processing:true" setting and delete the row manually in onclickSubmit
onclickSubmit: function (rp_ge, rowid) {
// we can use onclickSubmit function as "onclick" on "Delete" button
alert("The row with rowid=" + rowid + " will be deleted");
// reset processing which could be modified
rp_ge.processing = true;
// delete row
grid.delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
}
return true;
},
processing: true // !!! the most important step for the "local" editing
// skip ajax request to the server
}
}
},
///
{ name: "QuotationDetailID", hidden: true },
{ name: "QuotationID", hidden: true },
{ name: "ServiceID", hidden: true },
{ name: "ServiceDescription", width: 150, editable: true },
{ name: "Unit", width: 75, editable: true },
{ name: "Rate", width: 75, editable: true },
{ name: "Discount", width: 75, editable: true },
{ name: "Frequency", width: 150, editable: true },
{ name: "FrequencyBase", width: 150, editable: true },
{ name: "Total", width: 150, editable: true },
],
rowNum: 10,
rowList: [5, 10, 20],
pager: '#gridViewEditablePager',
gridview: true,
rownumbers: true,
ignoreCase: true,
//sortname: 'invdate',
viewrecords: true,
//sortorder: "desc",
caption: "Quotation Services",
height: "100%",
editurl: 'clientArray',
ondblClickRow: function (id, ri, ci) {
// edit the row and save it on press "enter" key
grid.jqGrid('editRow', id, true, null, null, 'clientArray');
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
// cancel editing of the previous selected row if it was in editing state.
// jqGrid hold intern savedRow array inside of jqGrid object,
// so it is safe to call restoreRow method with any id parameter
// if jqGrid not in editing state
if (typeof lastSel !== "undefined") {
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
}
}).jqGrid('navGrid', '#gridViewEditablePager', { add: false, edit: false }, {},{}, myDelOptions, { multipleSearch: true, overlay: false });
我建議你不要使用復古版本4.4.4。它真的很老了(3.5年前發佈的更多),並且很久以來它不被支持。我建議你升級到[免費jqGrid](https://github.com/free-jqgrid/jqGrid)4.13.4。這是我開發的jqGrid的功能。它包含許多增強功能,例如'formatter:「actions」'。試試[演示](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm)和[這一個](http://www.ok-soft-gmbh.com/jqGrid/ OK/CustomActionButton1.htm)。有關更多詳細信息,請參見[答案](http://stackoverflow.com/a/29735149/315935)。 – Oleg
@Oleg謝謝你,我正在等待你的回答,好的插件, –
@Oleg我正打算在我的博客上用MVC在JqGrid上創建教程 –