easyUI 数据表格datagrid的使用

<!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:"商品编号",
                        width:100
                    },
                    {
                        field:"name",
                        title:"商品名称",
                        width:100
                    },
                    {
                        field:"price",
                        title:"商品价格",
                        width: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>

 

posted @ 2018-12-05 22:20  学亮编程手记  阅读(356)  评论(0编辑  收藏  举报