EasyUI之数据表格读取

最新推荐文章于 2023-08-06 07:24:54 发布

原创最新推荐文章于 2023-08-06 07:24:54 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端

easyui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用EasyUI框架中的datagrid组件，并进行详细的初始化配置，包括数据展示、分页、选择模式等设置。

前端部分
（一）创建一个表格容器table，id为dg（可任意）

<table id="dg" style="width:100%"></table>

（二）datagrid数据初始化配置开始

<script type="text/javascript">
//第二部分（关键部分，一般无需修改，直接使用即可）
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
        onAfterRender: function (target) {
            $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
            var opts = $(target).datagrid('options');
            var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
            vc.children('div.datagrid-empty').remove();
            if (!$(target).datagrid('getRows').length) {
                var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
                d.css({
                    position: 'absolute',
                    left: 0,
                    top: 50,
                    width: '100%',
                    textAlign: 'center',
                    color: 'red'
                });
            }
        }
    });
    ..........（这是第三部分）
</script>

（三）datagrid读取数据

<script type="text/javascript">
//第二部分
var myview = $.extend({}, $.fn.datagrid.defaults.view, {
        onAfterRender: function (target) {
            $.fn.datagrid.defaults.view.onAfterRender.call(this, target);
            var opts = $(target).datagrid('options');
            var vc = $(target).datagrid('getPanel').children('div.datagrid-view');
            vc.children('div.datagrid-empty').remove();
            if (!$(target).datagrid('getRows').length) {
                var d = $('<div class="datagrid-empty"></div>').html(opts.emptyMsg || 'no records').appendTo(vc);
                d.css({
                    position: 'absolute',
                    left: 0,
                    top: 50,
                    width: '100%',
                    textAlign: 'center',
                    color: 'red'
                });
            }
        }
    });
 //第三部分
  $('#dg').datagrid({
     title: '各部门人员登录信息',
     url: '......,  //接口URL
     view: myview,
     emptyMsg: '没有相关记录，请自行添加！',
     fitColumns: true,
     pagination: true,
     //fit:true,
     nowrap: false,
     singleSelect: true,
     pageSize: 20, //每页显示的记录条数，默认为10
     pageList: [20, 30, 40, 50], //可以设置每页记录条数的列表
     pagePosition: 'bottom',
     rownumbers: true,
     toolbar: "#toolbar",
     singleSelect: false, //允许选择多行
     selectOnCheck: true, //true勾选会选择行，false勾选不选择行, 1.3以后有此选项。重点在这里
     checkOnSelect: true, //true选择行勾选，false选择行不勾选, 1.3以后有此选项
     columns: [[
         {
             field: 'id',
             title: 'id名称',
             hidden: true,
             width: 40
         },
         {
             field: 'bmbh',
             title: '部门编号',
             width: 40
         },
         {
             field: 'rybh',
             title: '人员编号',
             width: 50
         },
         {
             field: 'kl',
             title: '密码',
             width: 40
         }
     ]]
 });
</script>