EASYUI数据展示实例（js脚本控制）

在简单数据展示的基础上，使用js脚本进行数据的获取及显示控制，便于进一步使用程序进行控制。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Fluid DataGrid - jQuery EasyUI Demo</title>
    <script src="/Scripts/jquery.min.js" type="text/javascript"></script>
    <script src="/Scripts/easyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/easyui/easyui-lang-zh-CN.js" type="text/javascript"></script>
    <link href="/Content/themes/base/easyui.css" rel="stylesheet"/>
    <link href="/Content/themes/default/topjui.red.css" rel="stylesheet"/>
</head>
<body>
<h2>Fluid DataGrid</h2>
<p>This example shows how to assign percentage width to a column in DataGrid.</p>
<div style="margin: 20px 0;"></div>

<table id="dg" class="easyui-datagrid" title="Fluid DataGrid" style="width: 800px; height: 550px"
       data-options="singleSelect:true,collapsible:false,autoRowHeight:true,pagination:true ">
    <thead>
    <tr>
        <th data-options="field:'Id',resizable:false" width="15%">Item ID(15%)</th>
        <th data-options="field:'DepId',resizable:false" width="15%">Product(15%)</th>
    </tr>
    </thead>
</table>

</body>
</html>

<script type="text/javascript">
    
    function fLoadTable() {
        $('#dg').datagrid({
            title: '用户列表',
            width: 700,
            height: 300,
            fitColumns: true,

            //对应json数据中的每一列
            columns: [[{
                        field: 'cb', //每一列的名字
                        width: '100',
                        title: '',
                        checkbox: true
                    },
                    {
                        field: 'Id', //每一列的名字
                        width: '300',
                        title: 'ID'
                    },
                    {
                        field: 'DepId',
                        title: '职位',
                        width: '300',
                        align: 'center'
                    }
            ]],
            idField: 'id',
            loadMsg: 'Processing, please wait …',
            pagination: true
        });
    }

    function show() {
        $.ajax({
            url: '/DepOperation/GetList',
            type: "get",
            dataType: "json",
            
            success: function (data) {
                $('#dg').datagrid('loadData', data);
            },
            error:function(xhr) {
                alert(xhr.status);
            }
        });
    }

    $(document).ready(function() {
           fLoadTable();
           show();
    })
    
</script>
EASYUI数据展示实例（js脚本控制）

猜你喜欢
