DataGrid组件

DataGrid组件概述

• 数据表格以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持

使用DataGrid组件

<div id="dg"></div>
<script>
    $(function () {
        $('#dg').datagrid({
            // 宽度
            width: 1000,
            // 高度
            height: 500,
            // 加载的数据，可以是一个请求，去请求后台获取
            url: 'datagrid_data.json',
            columns: [
                [{field: 'id', checkbox: true},
                    {field: 'productid', title: '商品编号', width: 200},
                    {field: 'productname', title: '商品名称', width: 200},
                    {field: 'unitcost', title: '商品单价', width: 200, align: 'center'},
                    {field: 'status', title: '商品状态', width: 200, align: 'center'},
                    {field: 'attr1', title: '商品属性', width: 200, align: 'center'},
                ]
            ],
            fit: true,
            // 自动展开/收缩列的大小
            fitColumns: true,
            // 去除最右侧空间
            scrollbarSize: 0,
            // 显示行号
            rownumbers: true,
            checkOnSelect: true,
        });
    });
</script>