<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>easyUI 数据表格datagrid的使用</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script> <script type="text/javascript" src="js/easyui/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="js/easyui/themes/bootstrap/easyui.css"/> <link rel="stylesheet" href="js/easyui/themes/icon.css"/> </head> <body> <table id="grid"></table> </body> <script type="text/javascript"> $(function(){ $("#grid").datagrid({ columns:[[ { field:"id", title:"商品编号", 100 }, { field:"name", title:"商品名称", 100 }, { field:"price", title:"商品价格", 100 } ]], url:"product.json", pagination:true,//分页 toolbar:[ { id:"saveBtn", text:"保存", iconCls:"icon-save", handler:function(){ alert("这是保存操作") } }, { id:"exportBtn", text:"导出", iconCls:"icon-save", handler:function(){ alert("这是导出操作") } }, ] }); }); </script> </html>