easyui 动态列实现

发布时间:2020-07-12 17:12:02 作者:wolfsubmarine
来源:网络 阅读:1921

最近因公司需要,对easyui的动态列实现研究,并在网上查了不少的资料,但都不理想,结合自己的实践,简单介绍下实现过程;

需求特殊点在于:根据数据库的动态表结构,动态的加载datagrid表格,因数据库的表结构是变化的,用传统的加载方式无法实现列随表变化;正所谓难者不会,会者不难,而网上的相关资料比较少,经过大量的实验,最终实现了功能,而且关键代码却非常简单,如下所示:

      <script type="text/javascript">

        var dataGrid;

        var $datagrid = {};


        $datagrid.url = "${path }/******/dataGrid";


        $datagrid.striped = true;

        $datagrid.rownumbers = true;

        $datagrid.pagination = true;

        $datagrid.singleSelect = true;

        $datagrid.idField = "id";

        $datagrid.pageSize = 20;

        $datagrid.pageList = [ 10, 20, 30, 40, 50 ];


        //后台动态请求列信息

        function findColumns() {

            $.post('${path }/*******/viewColumns', {

            }, function(data) {

                var columns = new Array();

                var arr = data;

                $.each(arr, function (i, item) {

                    columns.push({ "field": arr[i].colname, "title": arr[i].colalias, "width": 100 });

                });

                $datagrid.columns = new Array(columns);

                $('#dataGrid').datagrid($datagrid);

            }, 'JSON');

        }

</script>

通过以上方法,即可实现easyui的动态列展示,且页面带分页功能;


推荐阅读:
  1. Easyui-Datagrid—表头灵活拖动
  2. easyUi动态生成datagrid列

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

数据库 资料 动态

上一篇:maven 生命周期和常用命令

下一篇:X9BYOD让你的电视机变成电脑

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》