本文介绍了用于编辑删除的图标添加搜索和页面接下来变得不可见，同时在jqGrid上应用任何主题，如何使其可见的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
@{
ViewBag.Title = "Grid2";
}
<h2>Grid2</h2>
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/Blue%20theme/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
@*<script src="~/Scripts/my%20script/jquery.jqGrid.min.js"></script>*@
<script src="~/Scripts/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/my%20script/jquery-ui-1.9.2.custom.min.js"></script>
<div class="container-fluid">
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
<script>
var mydata = [
{ action: "", id: "1", invdate: "2007-10-01", name: "test", note: true, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "2", invdate: "2007-10-02", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "3", invdate: "2007-09-01", name: "test3", note: true, amount: "400.00", tax: "30.00", total: "430.00" },
{ action: "", id: "4", invdate: "2007-10-04", name: "test", note: true, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "5", invdate: "2007-10-05", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "6", invdate: "2007-09-06", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
{ action: "", id: "7", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "8", invdate: "2007-10-03", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "9", invdate: "2007-09-01", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
{ action: "", id: "10", invdate: "2007-10-01", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "11", invdate: "2007-10-02", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "12", invdate: "2007-09-01", name: "test3", note: true, amount: "400.00", tax: "30.00", total: "430.00" },
{ action: "", id: "13", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "14", invdate: "2007-10-05", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "15", invdate: "2007-09-06", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" },
{ action: "", id: "16", invdate: "2007-10-04", name: "test", note: false, amount: "200.00", tax: "10.00", total: "210.00" },
{ action: "", id: "17", invdate: "2007-10-03", name: "test2", note: false, amount: "300.00", tax: "20.00", total: "320.00" },
{ action: "", id: "18", invdate: "2007-09-01", name: "test3", note: false, amount: "400.00", tax: "30.00", total: "430.00" }
];
$("#list").jqGrid({ //set your grid id
caption: "<h5>Employee Details</h5>",
data: mydata, //insert data from the data object we created above
datatype: 'local',
width: 500, //specify width; optional
colNames: ['Action', 'Inv No', 'Date', 'Name', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'action', index: 'action', sortable: false, formatter: displayButtons },
{ name: 'id', index: 'id', key: true, width: 70, sorttype: "int" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date" },
{ name: 'name', index: 'name', width: 100,editable:true },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", editable: true },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float", editable: true },
{ name: 'note', index: 'note', width: 150, sortable: false, align: 'center', formatter: 'checkbox',
edittype: 'checkbox', editoptions: { value: 'Yes:No', defaultValue: 'Yes' },editable:true
}],
//define column models
//pager: '#pager', //set your pager div id
sortname: 'id', //the column according to which data is to be sorted; optional
viewrecords: true, //if true, displays the total number of records, etc. as: "View X to Y out of Z" optional
sortorder: "asc",
pager: jQuery("#pager"),
rowNum: 1,
rowList: [10, 20, 30, 40],
height: '100%',
rowId:'id',
viewrecord: true,
loadonce: true,
emptyrecord: "No record to display",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: 0
},
autowidth: true,
multiselect: false,//sort order; optional,
multiSort:true
}).navGrid('#pager', { add: true, edit: true, del: true, search: true, refresh: true },
{
zIndex: 100,
url: '/Home/Edit/',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}, {
zIndex: 100,
url: '/Home/Create/',
closeOnEscape: true,
closeAfterEdit: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}, {
zIndex: 100,
url: '/Home/Delete/',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
msg: "Are you sure you want to delete the data",
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
}, { multipleSearch: true, multipleGroup: true, showQuery: true })
//$("#list").jqGrid('navGrid', '#pager', { add: true, edit: true, del: true, search: true, refresh: true },
// {}, {}, {}, { multipleSearch: true, multipleGroup: true, showQuery: true });
function displayButtons(cellvalue, options, rowObject) {
var edit = "<input style='...' type='button' value='Edit' onclick=\"jQuery('#list').editRow('" + options.rowId + "');\" />",
save = "<input style='...' type='button' value='Save' onclick=\"jQuery('#list').saveRow('" + options.rowId + "');\" />",
restore = "<input style='...' type='button' value='Restore' onclick=\"jQuery('#list').restoreRow('" + options.rowId + "');\" />";
return edit + save + restore;
}
</script>推荐答案
这篇关于用于编辑删除的图标添加搜索和页面接下来变得不可见，同时在jqGrid上应用任何主题，如何使其可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！