使用easyUI提供的API创建datagrid

最新推荐文章于 2019-02-11 17:18:58 发布

A_jungle

最新推荐文章于 2019-02-11 17:18:58 发布

阅读量547

点赞数

分类专栏： easyUI

本文链接：https://blog.csdn.net/A_jungle/article/details/81154936

版权

easyUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档展示了如何使用EasyUI的JavaScript库来创建一个带有标题、数据列、操作按钮和分页功能的datagrid。通过定义表格的columns，设置数据源url，以及添加工具栏和分页配置，实现了数据的展示、添加、删除和查询功能。

摘要由CSDN通过智能技术生成

1.代码部分:

<table id="mytable">
   </table>
   <script type="text/javascript">
       $(function(){
           $("#mytable").datagrid({
               //定义标题行所有的列
               columns:[[
                   {title:'编号',field:'id',checkbox:true},
                   {title:'姓名',field:'name'},
                   {title:'性别',field:'sex'},
                   {title:'地址',field:'addr'}
               ]],
               //指定数据表格发送ajax请求的地址
               url:'${pageContext.request.contextPath}/json/datagrid_data.json',
               rownumbers:true,
               singleSelect:true,
               //定义工具栏
               toolbar:[
                   {text:'添加',iconCls:'icon-add',
                       handler:function(){
                           alert('add...');
                       }
                   },
                   {text:'删除',iconCls:'icon-remove'},
                   {text:'修改',iconCls:'icon-edit'},
                   {text:'查询',iconCls:'icon-search'}
               ],
               //显示分页条
               pagination:true
           });
       });
   </script>

2:json部分:

{
   "total":123,
   "rows":[
   {"id":"001","name":"消防","sex":"男","addr":"xxx"},
   {"id":"002","name":"小黑","sex":"男","addr":"xxx"},
   {"id":"003","name":"小李","sex":"男","addr":"xxx"},
   {"id":"003","name":"小李","sex":"男","addr":"xxx"}
]
}

3.效果: