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