<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Complex DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="jquery-1.6.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript" src="demo.js"></script> <script type="text/javascript"> $(function(){ $('#test').datagrid({ url:'datagrid_data_.json', columns:[[ {field:'code',title:'Code',width:400,align:'center',headalign:'left'}, {field:'name',title:'Name',width:400,align:'right',headalign:'center'}, {field:'addr',title:'Address',width:459,align:'left',headalign:'right'} ]] }); }); </script> </script> </head> <body> <table id="test"></table> </body> </html>
{ "total":300, "rows":[ {"code":"001","name":"Name 1","addr":"Address 11"}, {"code":"002","name":"Name 2","addr":"Address 13"}, {"code":"003","name":"Name 3","addr":"Address 87"}, {"code":"004","name":"Name 4","addr":"Address 63"}, {"code":"005","name":"Name 5","addr":"Address 45"}, {"code":"006","name":"Name 6","addr":"Address 16"}, {"code":"007","name":"Name 7","addr":"Address 27"}, {"code":"008","name":"Name 8","addr":"Address 81"}, {"code":"009","name":"Name 9","addr":"Address 69"}, {"code":"010","name":"Name 10","addr":"ssmmsms 78"} ] }