JSFiddle - React, Tailwind, and code Playground

by minagabriel

HTML

<script src="https://rawgithub.com/minagabriel/jqueryGridView/master/jqueryGridView.js"></script>
<div id="jqueryGrid"></div>

<input type="checkbox" id="myCheck"/>

CSS

.headerTitle {width:50%;float: left;height:50px;padding-left:10px;padding-top:15px} /*div*/ 
           .headerTitle span {color:black;}
           .headerSearch {text-align:right;padding-right:5px} /*div*/
           .headerSearch img {height:20px ; width:20px;margin-left:5px ;margin-top:10px}
           .headerSearch input {width:300px; margin-top:10px}
           
           .gridHeader {border:solid 1px #8b8b8b;border-collapse:collapse;margin-top:10px;width:100%;}
           .gridHeader th{clear:both; background-color:#91b5cc;color:black;text-align:left;height:18px;padding-left:10px;border-bottom:solid 1px #404040;font-weight:normal;font-size:100%;}
           
           .gridBody {border: 1px solid gray;overflow-y:scroll; height:300px}
           .gridBody table{font-size:small;border-bottom:solid 1px #8b8b8b;color:#202020;border-spacing:1px;border-collapse:collapse;width:100%;}
           .gridBody table tbody tr:nth-child(even) {background: white;height:25px }
           .gridBody table tbody tr:nth-child(odd) {background: #DFEFFC;height:25px}
           .gridBody table tbody td{clear:both;font-size:100%;padding-left:10px}
           
           .row{cursor:pointer}
           .onRowClick {font-weight: bold;} 
           .onRowMouseOver {}

JavaScript

$('#jqueryGrid').gridView({
                grid: {
                    data:[{name:'mina',phone:'122555'},{name:'Hello', phone:658445}]
                   },

                   gridHeader: {
                       columns: [{text:'Printer Name',width:'50%'} ,{text:'Printer Location',width:'50%'}] 
                   },

                   gridBody: {
                       columns: [{object:'name',style:'width:50%;padding-left:5px'},                        
                                 {object:'phone',style:'width:50%',type: 'chechbox'}] , 
                       disableClick: false ,
                       onRowClick: function () {
                         
                    }
                   },
                   title: {
                       enabled: false,
                       text: 'result'
                   },
                   search: {
                       enabled: false,
                       imgUrl: 'External_Files/images/search.png',
                       onKeyPress: function () {

                       }
                   }
            }); 
$('#myCheck').change(function(){
     if (!$(this).is(':checked')) {
                
                $.each($('#jqueryGrid_gridBody tr'), function (index, value) {
                    $(':input[type=checkbox]', this).removeAttr('checked');
                });
            } else {
                $.each($('#jqueryGrid_gridBody tr'), function (index, value) {
                    $(':input[type=checkbox]', this).attr('checked', 'checked');
                });

            }
});