tangjiali5-sngrid
/
index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="css/jquery.sngrid.css"/>
	<style type="text/css">
		body{
			background: #666;
		}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="js/jquery.sngrid.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">


		$(function(){
			$('.grid').sngrid({
				title:'数据表格',
				url:'/datagrid/index.html',
				sortName:'cell3',
				sortOrder:'asc',
				columns:[{
					field:'cell1',
					title:'表头1',
				},{
					field:'cell2',
					title:'表头2',
					sortable:true,
					formatter:function(rowData, data, rowPos, pos){return '<font color=red>' + data + '</font>'},
				},{
					field:'cell3',
					sortable:true,
					title:'表头3'
				},{
					align:'center',
					field:'cell4',
					sortable:true,
					hide:true,
					title:'表头4'
				},{
					field:'cell5',
					sortable:true,
					title:'表头5'
				},{
					field:'cell6',
					sortable:true,
					title:'表头6'
				}],
				data:{rows:[{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				},{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				},{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				},{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				},{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				},{
					cell1:'数据1',cell2:'数据2',cell3:'数据3',cell4:'数据4',cell5:'数据5',cell6:'数据6'
				}],total:61},
				striped:true,
				toolbar:[{
					text:'新增',
					handler:function(){alert('add')}
				},{
					text:'修改',
					handler:function(){alert('update')}
				}, '' ,{
					text:'删除',
					handler:function(){alert('delete')}
				},{
					text:'批量删除',
					handler:function(){alert('batchdelete')}
				}]
			});
		});
	</script>
	<body>
		<table class="grid"></table>
	</body>
</html>