[jqGrid] div를 이용한 퍼센테이지바 percentage bar

[.js][software] 2017. 9. 11. 15:14

/* 특정 컬럼에 퍼센테이지 바 넣기 */

/*  percentage bar */

 

 
<html>
<head>
<style type="text/css">
 <!--
  #base1 {
  background-color: #D42121;
  height: 12px;
  position:relative;
  top: 0px;
  }
 
 //-->
 </style>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="./jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jqGrid/css/ui.jqgrid.css" />  
<style type="text/css">
</style>
<script src="./jqGrid/js/jquery-3.2.1.min.js"></script>
<script src="./jqueryUi/jquery-ui.js"></script>
<script src="./jqGrid/js/jquery.jqGrid.min.js"></script>
<script language='javascript' >


var value1 = '';


 $(function(){
     var gridData = [
        {seq:"1",date1:"2017/09/01",name1:"Homer",name2:"note",name3:"100",hitnum:"100"},
        {seq:"2",date1:"2017/09/01",name1:"Homer",name2:"note",name3:"70",hitnum:"100"},
        {seq:"3",date1:"2017/09/01",name1:"Homer",name2:"note",name3:"30",hitnum:"100"},                
        {seq:"4",date1:"2017/10/02",name1:"Marge",name2:"note2",name3:"80",hitnum:"350"}  ];


     $("#list").jqGrid({
        datatype: "local",
        height: 300,
        width:500,
        sortable: false ,
        shrinkToFit : false,
        colNames:['seq','name1', 'name2', 'name3', 'date','hit'],
        colModel:[
                {name:'seq' , frozen:true , width:100 },
                {name:'name1'  , frozen:true  , width:100 },
                {name:'name2' , width:100 },
                {name:'name3' , width:100 , formatter:abc },                
                {name:'date1' , width:100  },
                {name:'hitnum' , width:100 }
        ],
        caption: " title aa ",
        gridComplete: function() {


            $('#list').on("selectstart", function(event){ return false; });
            $('#list').on("dragstart", function(event){ return false; });
        }
     });


     for(var i=0;i<=gridData.length;i++){
        $("#list").jqGrid('addRowData',i+1,gridData[i]);
     }
     $("#list").jqGrid( 'setFrozenColumns' );


})


function abc(  cellvalue, options, rowObject ){
  return "  <div id='base1' style=' width:"+cellvalue+"%  ' > </div> ";
}


</script>
<body>


<table id="list"></table>


</body>
</html>

 

 

'[.js][software]' 카테고리의 다른 글

[realGrid] 기타  (0) 2018.09.14
[extJs] 헤더(컬럼) 동적으로 추가하기  (0) 2017.09.14
[jqGrid] jqGrid 틀고정 Fixed frame  (0) 2017.09.11
[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
Posted by 혜화초보
,

[jqGrid] jqGrid 틀고정 Fixed frame

[.js][software] 2017. 9. 11. 13:55

jqGrid 틀고정

 

 

/*  add  

  1.  frozen:true 

  2.  shrinkToFit : false,

  3.  ("#list").jqGrid( 'setFrozenColumns' );

*/

 

 

 


<html>
<head>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="./jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jqGrid/css/ui.jqgrid.css" />  
<style type="text/css">
</style>
<script src="./jqGrid/js/jquery-3.2.1.min.js"></script>
<script src="./jqueryUi/jquery-ui.js"></script>
<script src="./jqGrid/js/jquery.jqGrid.min.js"></script>
<script language='javascript' >
var value1 = '';


 $(function(){
     var gridData = [
        {seq:"1",date1:"2017/09/01",name1:"Homer",name2:"note",name3:"note",hitnum:"100"},
        {seq:"2",date1:"2017/10/02",name1:"Marge",name2:"note2",name3:"note2",hitnum:"350"}  ];


     $("#list").jqGrid({
        datatype: "local",
        height: 300,
        width:500,
        sortable: false ,
        shrinkToFit : false,
        colNames:['seq','name1', 'name2', 'name3', 'date','hit'],
        colModel:[
                {name:'seq' , frozen:true , width:100 },
                {name:'name1'  , frozen:true  , width:100 },
                {name:'name2' , width:100 },
                {name:'name3' , width:100 },                
                {name:'date1' , width:100 },
                {name:'hitnum' , width:100 }
        ],
        caption: " title aa ",
        gridComplete: function() {
            $('#list').on("selectstart", function(event){ return false; });
            $('#list').on("dragstart", function(event){ return false; });
        }
     });


     for(var i=0;i<=gridData.length;i++){
        $("#list").jqGrid('addRowData',i+1,gridData[i]);
     }
     $("#list").jqGrid( 'setFrozenColumns' );


})






</script>
<body>


<table id="list"></table>


</body>
</html>

 

'[.js][software]' 카테고리의 다른 글

[extJs] 헤더(컬럼) 동적으로 추가하기  (0) 2017.09.14
[jqGrid] div를 이용한 퍼센테이지바 percentage bar  (0) 2017.09.11
[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
[extJs] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
Posted by 혜화초보
,

[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동

[.js][software] 2017. 9. 11. 11:03

 

/*  특정 셀 값을 다른 셀로 마우스로 이동 */

/*  마우스다운한 위치의 값을 마우스업한 위치로 이동 */

/*  Move mouse-down to the position where you mouse-up */

/*  Move a specific cell value to another cell */

 

 

 


<html>
<head>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="./jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jqGrid/css/ui.jqgrid.css" />  
<style type="text/css">
</style>
<script src="./jqGrid/js/jquery-3.2.1.min.js"></script>
<script src="./jqueryUi/jquery-ui.js"></script>
<script src="./jqGrid/js/jquery.jqGrid.min.js"></script>
<script language='javascript' >
var value1 = '';


 $(function(){
     var gridData = [
        {seq:"1",date1:"2017/09/01",name1:"Homer",name2:"note",hitnum:"100"},
        {seq:"2",date1:"2017/10/02",name1:"Marge",name2:"note2",hitnum:"350"}  ];


     $("#list").jqGrid({
        datatype: "local",
        height: 300,
        colNames:['seq','name1', 'name2', 'date','hit'],
        colModel:[
                {name:'seq'},
                {name:'name1'},
                {name:'name2'},
                {name:'date1'},
                {name:'hitnum'}
        ],
        caption: " title aa ",
        gridComplete: function() {


            $('.jqgrow').mousedown(function(e) {
                var rowId = $(this).attr('id');
              var colModel = jQuery("#list").jqGrid ('getGridParam', 'colModel');
              var name1 = colModel[e.target.cellIndex].name;
                value1 = $('#list').jqGrid('getCell', rowId, name1 );
            });




            $('.jqgrow').mouseup(function(e) {
                var rowId = $(this).attr('id');
              var colModel = jQuery("#list").jqGrid ('getGridParam', 'colModel');
              var name1 = colModel[e.target.cellIndex].name;                
                $("#list").jqGrid('setCell',rowId,  name1 , value1 );
            });    
            
            $('#list').on("selectstart", function(event){ return false; });
            $('#list').on("dragstart", function(event){ return false; });
        }
        
        
     });


     for(var i=0;i<=gridData.length;i++){
        $("#list").jqGrid('addRowData',i+1,gridData[i]);
     }


 
     
})






</script>
<body>


<table id="list"></table>


</body>
</html>

 

 

'[.js][software]' 카테고리의 다른 글

[jqGrid] div를 이용한 퍼센테이지바 percentage bar  (0) 2017.09.11
[jqGrid] jqGrid 틀고정 Fixed frame  (0) 2017.09.11
[jqGrid] simple Grid (local)  (0) 2017.09.08
[extJs] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
[extJs] simple grid (editable)  (0) 2017.09.08
Posted by 혜화초보
,

[jqGrid] simple Grid (local)

[.js][software] 2017. 9. 8. 16:44

 

 



/* 기본 그리드 형태 */

/*  base grid style */


<html>
<head>
</head>
<link rel="stylesheet" type="text/css" media="screen" href="./jqueryUi/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./jqGrid/css/ui.jqgrid.css" />  
<style type="text/css">
</style>
<script src="./jqGrid/js/jquery-3.2.1.min.js"></script><script src="./jqueryUi/jquery-ui.js"></script>
<script src="./jqGrid/js/jquery.jqGrid.min.js"></script>
<script language='javascript' >




 $(function(){
     var gridData = [
        {seq:"1",date1:"2017/09/01",name1:"Homer",name2:"note",hitnum:"100"},
        {seq:"2",date1:"2017/10/02",name1:"Marge",name2:"note2",hitnum:"350"}  ];


     $("#list").jqGrid({
        datatype: "local",
        height: 300,
        colNames:['seq','name1', 'name2', 'date','hit'],
        colModel:[
                {name:'seq'},
                {name:'name1'},
                {name:'name2'},
                {name:'date1'},
                {name:'hitnum'}    
        ],
        caption: " title aa "
     });
         
     for(var i=0;i<=gridData.length;i++){
        $("#list").jqGrid('addRowData',i+1,gridData[i]);
     }
})






</script>
<body>


<table id="list"></table>


</body>
</html>


 

 

'[.js][software]' 카테고리의 다른 글

[jqGrid] jqGrid 틀고정 Fixed frame  (0) 2017.09.11
[jqGrid] 특정 셀 마우스다운하고 다른 셀에 마우스 업하면 값 이동  (0) 2017.09.11
[extJs] Mouse down the cell value and put it in the mouse-up cell  (0) 2017.09.08
[extJs] simple grid (editable)  (0) 2017.09.08
[extJs] simple gird  (0) 2017.09.08
Posted by 혜화초보
,

티스토리툴바