引用easyui

1. <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
2. <link rel="stylesheet" type="text/css" href="../themes/icon.css">
3. <link rel="stylesheet" type="text/css" href="demo.css">
4. <script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
5. <script type="text/javascript" src="../jquery.easyui.min.js"></script>

javascript代码

1. $(function(){
2. $('#tt').datagrid({
3. url:'datagrid_data2.json',
4. columns:[[
5. {   field:'productid',
6. title:'Product ID',
7. width:120
8. //rowspan:2
9. //colspan:2
10. //align:'center'
11. //sortable:true
12. //resizable:true
13. //hidden:true
14. //checkbox:true
15. //formatter:function(value,row,index){}
16. //styler:function(value,row,index){}
17. //sorter:function(a,b){ }
18. //editor:string,object
19. },
20. {field:'listprice',title:'List Price',width:80,align:'right'},
21. {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
22. {field:'attr1',title:'Attribute',width:250},
23. {field:'status',title:'Status',width:60,align:'center'}
24. ]],
25. frozenColumns:[[
26. {field:'ck',checkbox:true},
27. {field:'itemid',title:'Item ID',width:80,sortable:true}
28. ]],
29. //fitColumns:false,//true会导致列错位
30. //autoRowHeight:true,
31. toolbar:[{
32. iconCls: 'icon-edit',
33. text:'编辑',
34. handler: function(){alert('edit')}
35. },'-',{
36. iconCls: 'icon-help',
37. text:'帮助',
38. handler: function(){alert('help')}
39. }],
40. //striped:true,//条纹行，以区分行
41. //method:'post',
42. //nowrap:true,//false设置数据自动换行
43. //idField:'itemid',
44. loadMsg:'请稍候...',
45. pagination:true,//分页栏
46. rownumbers:true,//第一列显示自增序列
47. singleSelect:true
48. //checkOnSelect:true,
49. //selectOnCheck:true,
50. //pagePosition:'both',
51. //pageNumber:1,
52. //pageSize:10,
53. //pageList:[10,20,30,40,50],
54. //queryParams: {
55. //  name: 'easyui',
56. //  subject: 'datagrid'
57. //},
58. //sortName:'itemid',
59. //sortOrder:'desc',
60. //remoteSort:false,//true发送命令到服务器请求排序数据，false本地自己排序
61. //showHeader:true,
62. //showFooter:true,
63. //scrollbarSize:18,
64. //rowStyler:function(index,row,css){}
65. //loader:'json loader',
66. //loadFilter:function(data){}
67. //editors:'predefined editors',
68. //view:'default view'
69. });
70. //设置分页控件
71. $('#tt').datagrid('getPager').pagination({
72. pageSize: 10,//每页显示的记录条数，默认为10
73. pageList: [5,10,15],//可以设置每页记录条数的列表
74. beforePageText: '第',//页数文本框前显示的汉字
75. afterPageText: '页    共 {pages} 页',
76. displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
77. /*onBeforeRefresh:function(){
78. $(this).pagination('loading');
79. alert('before refresh');
80. $(this).pagination('loaded');
81. }*/
82. });
83. });

html代码

1. <table id="tt"></table>