Easyui datagrid加载本地Json数据

最新推荐文章于 2020-03-23 11:55:51 发布

原创最新推荐文章于 2020-03-23 11:55:51 发布 · 1.8k 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用EasyUI Datagrid插件构建的学生信息展示表格。该表格包括学生的ID、姓名、性别、生日、家庭住址、所属班级及成绩等字段，并通过JSON数据填充表格内容。

<table  id="loginInfoTable"
             class="easyui-datagrid"
        title="学生信息一览"
        border="0"
        cellspacing="0"
        cellpadding="0"
        iconCls="icon-edit"
        width="98%"
        pagination="true"
        remoteSort="false"
        singleSelect="false"
        showFooter="false"
        striped="true"

    <thead>
        <tr align="center">
            <th field="id"  width="200">ID</th>
            <th field="name"  width="100">姓名</th>
            <th field="sex"  width="150">性别</th>
            <th field="birthday"  width="100">生日</th>
            <th field="addr"  width="100">家庭住址</th>
            <th field="classid"  width="100">所属班级</th>
            <th field="grade"  width="100">成绩</th>
        </tr>
    </thead>
</table>

  </body>
  <script type="text/javascript">
$(document).ready(function () {
//doQueryData();
//doloadData();
var jsondata='{"total":1,"rows":[{"id":"M000005","name":"检测设备","sex":1,"birthday":"1991-03-17","addr":"双城市","classid":"03","grade":"78"}]}';
alert(jsondata);
var data = $.parseJSON(jsondata);
$('#loginInfoTable').datagrid('reload');
$('#loginInfoTable').datagrid('loadData', data);

});