EASYUI数据列表显示实例(简单数据展示模式)(图文)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/upi2u/article/details/80125849
首先带来的是最简单的数据列表展示,数据来源自程序生成的json,或者直接写好json文件,将地址写在table标签里就行了。这样进行简单的数据展示是可以的,如何要加入其它功能则有一些问题。

<!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: 700px; height: 250px"
       data-options="singleSelect:true,collapsible:true,autoRowHeight:false,pagination:true, url: '/DepOperation/GetList',
				method:'get', ">
    <thead>
    <tr>
        <th data-options="field:'Id',resizable:false" width="15%">Item ID</th>
        <th data-options="field:'DepId',resizable:false" width="15%">Product</th>
    </tr>
    </thead>
</table>

</body>
</html>

数据展示的效果,分页功能还有待完善。

猜你喜欢

转载自blog.csdn.net/upi2u/article/details/80125849