用于编辑删除的图标添加搜索和页面接下来变得不可见，同时在jqGrid上应用任何主题，如何使其可见 [英] Icons for edit delete add search and page next become invisible while applied any theme on jqGrid, how to make it visible

问题描述

@{
    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>

推荐答案

（＃list）。jqGrid（{//设置您的网格ID
标题：< h5>员工详细信息< / h5>，
数据：mydata，//从我们在上面创建的数据对象插入数据
datatype：'local '，

宽度：500，//指定宽度;可选
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，ed itable：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
} ]，
//定义列模型
// Pager：'＃pager'，//设置你的寻呼机div id
sortname：'id'，//列根据哪个数据是待分类;可选
viewrecords：true，//如果为true，则显示记录总数等，如下所示：从Z中查看X到Y可选
sortorder：asc，
pager ：jQuery（＃pager），
rowNum：1，
rowList：[10,20,30,40]，
height：'100％'，
rowId： 'id'，
viewrecord：true，
loadonce：true，
emptyrecord：没有要显示的记录，
jsonReader：{
root：rows，
页面：page，
总计：总计，
记录：记录，
重复项：false，
id：0
} ，
autowidth：true，
multiselect：false，// sort order; optional，
multiSort：true
}）。navGrid（'＃pager'，{add：true，编辑：true，del：true，搜索：true，刷新：true}，
{
zIndex：100，
url：'/ Home / Edit /'，
closeOnEscape：是的，
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：你确定要删除数据，
afterComplete：function（response）{
if（response。 responseText）{
alert（response.responseText）;
}
}
}，{multipleSearch：true，multipleGroup：true，showQuery：true}）

//

("#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, closeAfter true, recreateForm: true, afterComplete: function (response) { if (response.responseText) { alert(response.responseText); } } }, { zIndex: 100, url: '/Home/Create/', closeOnEscape: true, closeAfter true, afterComplete: function (response) { if (response.responseText) { alert(response.responseText); } } }, { zIndex: 100, url: '/Home/Delete/', closeOnEscape: true, closeAfter 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}）;
函数displayButtons（cellvalue，options，rowObject）{
var edit =< input style ='...'type ='button'value ='Edit'onclick = \jQuery（' #list'）。editRow（'options.rowId +'）; \/>，
save =< input style ='...'type ='button'value = '保存'onclick = \jQuery（'＃list'）。saveRow（'options.rowId +'）; \/>，
restore =< input style =' ...'type ='button'value ='Restore'onclick = \jQuery（'＃list'）。restoreRow（'+ options.rowId +'）; \/>;
返回编辑+保存+恢复;
}
< / script>

("#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上应用任何主题，如何使其可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！