2013-05-14 5 views
0

내 JQGrid에서 편집 및 삭제 버튼을 추가해야 사용자가 해당 버튼을 클릭 할 때 삭제할 다른 페이지로 리디렉션되고 특정 레코드를 편집 할 수 있습니다. 현재 잘 작동하지만 버튼에 CSS 문제가 있습니다. 어떻게하면 단추의 스타일을 무시할 수 있습니다.JqGrid 수정/삭제 버튼 CSS 클래스

다음은 PKId_formatter 기능의 내부 <a> 요소 ui-icon 클래스를 사용하여 내 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

답변

1

입니다. 따라서 <a> 요소의 CSS 스타일은 display: block입니다. 여러 가지 방법으로 문제를 해결할 수 있습니다. 예를 들어 style="display:inline-block"<a> 개의 요소에 추가 할 수 있습니다.

사용자 정의 형식화 프로그램 대신 formatter: "actions" (예 : here 참조)을 사용해야합니다.