easyui 动态列实现

Posted 2020-09-23

最近因公司需要，对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的动态列展示，且页面带分页功能；