版权声明:本文为博主原创文章,未经博主允许不得转载。 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>
数据展示的效果,分页功能还有待完善。