01datagrid使用方法

三种方法:
1.将静态的HTML渲染为datagrid样式
2.发送Ajax请求获取json数据创建datagrid
3.使用easyUI提供的API创建datagrid

 <!-- 方式二：发送ajax请求获取json数据创建datagrid -->
    <table data-options="url:'${pageContext.request.contextPath}/json/datagrid_data.json'" class="easyui-datagrid">
        <thead>
            <tr>
                <th data-options="field:'id'">编号</th>
                <th data-options="field:'name'">姓名</th>
                <th data-options="field:'age'">年龄</th>
            </tr>
        </thead>
    </table>

datagrid_data.json

[
    {"id":"001","name":"小白","age":"21"},
    {"id":"002","name":"刘涛","age":"41"},
    {"id":"003","name":"忠民","age":"32"}

]

需要明确的是.json文件的写法要和<thead>里面的写法要一致</thead>

<table id="mytable"></table>
<!-- 方式三：使用easyUI提供的API创建datagrid -->
        <script type="text/javascript">
            $(function(){
                //页面加载完毕后,执行数据表格datagrid
                $("#mytable").datagrid();
                                //一调用这种方法就要创建数据表格了
  
                
            });
        </script>

<!-- 方式三：使用easyUI提供的API创建datagrid -->
        <script type="text/javascript">
            $(function(){
                //页面加载完毕后,执行数据表格datagrid
                $("#mytable").datagrid({
                    //定义标题行所有的列
                    columns:[[
                              {title:"编号",field:"id",checkbox:true},
                              {title:"姓名",field:"name"},
                              {title:"年龄",field:"age"},
                              {title:"地址",field:"addr"},
                            ]],
                            url:'${pageContext.request.contextPath}/json/datagrid_data.json',
                            rownumbers:true,
                            singleSelect:true,
                            
                            //工具栏
                            toolbar:[
                                     {text:'添加',iconCls:'icon-add'},
                                     {text:'修改',iconCls:'icon-edit'},
                                     {text:'删除',iconCls:'icon-delete'},
                                     {text:'查询',iconCls:'icon-search'}
                                     
                                     ],
                              pagination:true
                });
                
            });
        </script>