所有边框的颜色不变（只有底部和右边框的变化）

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; 
    }