Datagrid 加载后台数据的方式

最新推荐文章于 2025-10-16 16:53:07 发布

原创

最新推荐文章于 2025-10-16 16:53:07 发布 · 5.8k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #datagrid #easyui

本文探讨了在开发库房系统中，使用EasyUI Datagrid加载后台数据的两种方式：通过Ajax从服务器获取JSON数据并填充，以及在JavaScript中直接创建和加载数据。强调了理解原理、查阅文档和学习他人代码的重要性。

【前言】
最近在开发库房系统，经常遇到easyui datagrid数据加载，但是发现加载数据有两种不同的方式，一种是ajax加载目标url返回的json数据；另一种是在加js对象,通过loadData方法（或者可以在js里创建datagrid，这样就不用loadData方法了）。

通过ajax 加载数据
在view 里设置好表格样式：

 <table class="easyui-datagrid" title="我的申请" style="width: 750px; height: 250px"data-options="
              singleSelect:true,     @*设置为 true，则只允许选中一行。*@
              collapsible:true,
              rownumbers:true,      @*设置为 true，则显示带有行号的列。*@
              autoRowHeight:false,
              pagination:true,      @*设置为 true，则在数据网格（datagrid）底部显示分页工具栏。*@
              pageSize:20">
        <thead>

            <tr>

                <th data-options="field:'ItemNo',halign:'center'">物品编号</th>
                <th data-options="field:'ItemName',halign:'center'">商品名称</th>
                <th data-options="field:'CategoryID',halign:'center'">商品类别</th>
                <