所有邊框的顏色不變（只有底部和右邊框的變化）

Question

驗證JqxGrid時，如果單元格爲空值，我想將單元格邊框更改爲紅色。 我設法突出顯示單元格的邊框，但只有底部和右側邊框處於紅色，我在突出顯示所有邊框時缺少了什麼？

點擊按鈕 '點擊驗證' 看到RED

jsfiddle

$(document).ready(function() { 
 

 
    // prepare the data 
 
    var data = new Array(); 
 

 
    var row1 = {}; 
 
    row1["firstname"] = 'Andrew'; 
 
    row1["secondname"] = 'A'; 
 

 
    var row2 = {}; 
 
    row2["firstname"] = ''; 
 
    row2["secondname"] = ''; 
 

 
    var row3 = {}; 
 
    row3["firstname"] = ''; 
 
    row3["secondname"] = 'C'; 
 

 
    data.push(row1); 
 
    data.push(row2); 
 
    data.push(row3); 
 

 
    var source = { 
 
    localdata: data, 
 
    datatype: "array" 
 
    }; 
 

 
    $("#jqxgrid").jqxGrid({ 
 
    width: "100%", 
 
    source: source, 
 
    autoheight: true, 
 
    editable: true, 
 
    editmode: 'selectedcell', 
 
    selectionmode: 'singlecell', 
 
    columns: [{ 
 
     text: 'First Name', 
 
     datafield: 'firstname', 
 
     width: 150, 
 
     cellsalign: 'left' 
 
     }, 
 

 
     { 
 
     text: 'Second Name', 
 
     datafield: 'secondname', 
 
     width: 150, 
 
     cellsalign: 'left' 
 
     } 
 
    ] 
 
    }); 
 

 
    $("#btn").on('click', function() { 
 
    var columns = ['firstname', 'secondname']; 
 
    $.each(columns, function(colIndex, eachColumn) { 
 
     $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn, 
 
     'cellclassname', 
 
     function(row, columnfield, value) { 
 
      if (value == undefined || value.length == 0) { 
 
      return 'erroredcolumn'; 
 
      } 
 
     }); 
 
    }); 
 
    }); 
 

 
});

.erroredcolumn { 
 
    border-color: red!important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> 
 
    <div id="jqxgrid"></div> 
 
</div> 
 
<input type="button" id="btn" value="click to validate" />

Answer 1

錯誤-ED單元格邊框試試下面的代碼

 $(document).ready(function() { 
 

 
      // prepare the data 
 
      var data = new Array(); 
 
     
 
      var row1 = {}; 
 
      row1["firstname"] = 'Andrew'; 
 
      row1["secondname"] = 'A'; 
 
    \t \t \t \t \t \t 
 
      var row2 = {}; 
 
      row2["firstname"] = ''; 
 
      row2["secondname"] = ''; 
 

 
\t \t \t \t \t \t var row3 = {}; 
 
      row3["firstname"] = ''; 
 
      row3["secondname"] = 'C'; 
 
      
 
      data.push(row1); 
 
      data.push(row2); 
 
      data.push(row3); 
 

 
\t \t \t \t \t \t var source = { 
 
       localdata: data, 
 
       datatype: "array" 
 
      }; 
 
      
 
      $("#jqxgrid").jqxGrid({ 
 
       width: "100%", 
 
       source: source, 
 
       autoheight: true, 
 
       editable: true, 
 
     \t \t  \t editmode: 'selectedcell', 
 
\t \t \t \t \t  \t selectionmode: 'singlecell', 
 
       columns: [{ 
 
        text: 'First Name', 
 
        datafield: 'firstname', 
 
        width: 150, 
 
        cellsalign: 'left' 
 
       }, 
 

 
       { 
 
        text: 'Second Name', 
 
        datafield: 'secondname', 
 
        width: 150, 
 
        cellsalign: 'left' 
 
       }] 
 
      }); 
 
      
 
      $("#btn").on('click', function() { 
 
      \t var columns = ['firstname', 'secondname']; 
 
      $.each(columns, function(colIndex, eachColumn) { 
 
\t \t \t   $('#jqxgrid').jqxGrid('setcolumnproperty', eachColumn, 
 
       \t \t \t 'cellclassname', function (row, columnfield, value) { 
 
        \t if (value == undefined || value.length == 0) { 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t return 'erroredcolumn'; 
 
\t \t \t \t \t \t \t \t \t \t \t } 
 
       \t \t \t }); 
 
\t \t \t   }); 
 
      }); 
 

 
     });

 .erroredcolumn { 
 
      border-color: red !important; 
 
      top:1px; 
 
      border-width:1px 1px 1px 1px !important; 
 
     } 
 
     .jqx-grid-cell{ 
 
      
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;"> 
 
    <div id="jqxgrid"></div> 
 
</div> 
 
<input type="button" id="btn" value="click to validate" />

Answer 2

您使用position所以，當你申請border-color所以它隱藏top-border，因爲你不分配positiontop所以border-top灰色border隱藏。

只需添加下面的CSS

Fiddle link

.erroredcolumn { 
     border: 1px solid red !important; 
     top:1px; 
    }