Question

在我的JQGrid中，我需要添加编辑和删除按钮，这样当用户点击这些按钮时，用户将被重定向到另一个页面以进行删除并编辑特定记录。目前它工作正常，但我有按钮的CSS问题。如何覆盖按钮的样式。

这是我的MVC视图

 <title>jqGrid for ASP.NET MVC - Demo</title>
    <!-- The jQuery UI theme that will be used by the grid -->    
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/redmond/jquery-ui.css" />
    <!-- The Css UI theme extension of jqGrid -->
    <link rel="stylesheet" type="text/css" href="../../Content/themes/ui.jqgrid.css" />    
    <!-- jQuery library is a prerequisite for jqGrid -->
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script>
    <!-- language pack - MUST be included before the jqGrid javascript -->
    <script type="text/javascript" src="../../Scripts/trirand/i18n/grid.locale-en.js"></script>
    <!-- the jqGrid javascript runtime -->
    <script type="text/javascript" src="../../Scripts/trirand/jquery.jqGrid.min.js"></script>  

    <link rel="stylesheet" type="text/css" href="../../Content/MyStyle.css" />

    <script type="text/javascript">
        var myGrid = $('#list');
        $(function () {
            $("#list").jqGrid({
                url: '/JqGridClients/DynamicGridData/',
                datatype: 'json',
                mtype: 'GET',

                colNames: ['ClientID', 'Address', 'Company', 'Name'],
                colModel: [
          { name: 'ClientID', index: 'ClientID', search: false,  align: 'left', formatter: PKId_formatter },
          { name: 'Address', index: 'Address', search: true, sortable: true, align: 'left' },
          { name: 'Company', index: 'Company', search: true, align: 'left', stype: 'select' },
          { name: 'Name', index: 'Name', search: true, sortable: true, align: 'left', searchoptions: { sopt: ['cn' ,'eq', 'ne']}}],
                pager: jQuery('#pager'),
                rowNum: 10,
                 width: '100%',
                height: '100%',
                rowList: [5, 10, 20, 50],
                sortname: 'ClientID',
                sortorder: "desc",
                viewrecords: true,
                loadonce: true,
                caption: 'Clients',

            }).navGrid('#pager', { search: true, edit: true, add: false, del: true, searchtext: "Search" });

              $("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: 'cn' });

              $("#list").setGridParam({data: results.rows, localReader: reader}).trigger('reloadGrid');
        });

       function PKId_formatter(cellvalue, options, rowObject) {
    return '<a href="Client/Edit?id=' + cellvalue + '" class="ui-icon ui-icon-pencil" ></a> <a href="Client/Delete?id=' + cellvalue + '" class="ui-icon ui-icon-trash" ></a>';
}

  </script>  

    <h2>Index</h2>

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

enter image description here

Answer 1

您对ui-icon函数中的<a>元素使用PKId_formatter类。因此<a>元素将具有display: block CSS样式。您可以通过多种方式解决问题。例如，您可以将style="display:inline-block"添加到<a>元素。

您应该考虑使用formatter: "actions"（例如，请参阅here）而不是使用自定义格式化程序。

覆盖JqGrid编辑/删除按钮CSS类

1 个答案: