在这一篇中我们看看如何在手风琴里面显示表格数据的。
1.先看看引用的资源
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/default/easyui.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/themes/icon.css" /> <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.5/demo/demo.css" /> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.min.js"></script> <script type="text/javascript" src="jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
我们看到这里面还是一样的，没有什么变化，还是jquery.min.js和jquery.easyui.min.js两个文件，看来这两个文件已经包含了大部分的功能了。
2.接下来是html代码
<body> <h2>Accordion Tools</h2> <div class="demo-info"></div> <div> <div id="demo-tip icon-tip"></div> <div>Click the tools on top right of panel to perform actions.</div> </div> <div style="margin:10px 0;"></div> <div class="easyui-accordion" style="width:500px;height:300px;"> <div title="About" data-options:"iconCls:'icon-ok'" style="overflow:auto;padding:10px"> <h3 style="color:#0099FF;">Accordion for jQuery</h3> <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p> </div> <div title="Help" data-options="iconCls:'icon-help'" style="padding:10px;"> <p>The accordion allows you to provide multiple panels and display one ore more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p> </div> <div title="DataGrid" style="padding:10px" data-options=" selected:true, tools:[{ iconCls:'icon-reload', handler:function(){$('#dg').datagrid('reload');} }]"> <table id="dg" class="easyui-datagrid" data-options="url:'jquery-easyui-1.3.5/demo/accordion/datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'itemid',width:80">Item ID</th> <th data-options="field:'productid',width:100">Product ID</th> <th data-options="field:'listprice',width:80">List Price</th> <th data-options="field:'unitcost',width:80">Unit Cost</th> <th data-options="field:'attr1',width:150">Attribute</th> <th data-options="field:'status',width:80,align:'center'">Status</th> </tr> </thead> </table> </div> </div> </body>
在第三个格子里面放置了一个表格，data-options=" selected:true, tools:[{ iconCls:'icon-reload', handler:function(){$('#dg').datagrid('reload');} }]"这句的意思就是这个格子的图标是刷新图标，初始状态是选中的，点击的时候出来展开之外还要刷新id="dg"这个表里的数据，然后面的表格<table id="dg" class="easyui-datagrid" data-options="url:'jquery-easyui-1.3.5/demo/accordion/datagrid_data1.json',method:'get',fit:true,fitColumns:true,singleSelect:true">这个就是前面讲到的文章里面的只是了，class="easyui-datagrid"表示这是一个表格，data-options里面url:'jquery-easyui-1.3.5/demo/accordion/datagrid_data1.json这个表示数据源，注意这里不再是访问一个php文件来返回数据而是直接从一个json文件中取数据了。method:'get'表示使用get方法获取数据。
注意一个问题，<th data-options="field:'itemid',width:80">Item ID</th>这个地方不能写成<th data-options="field:'itemid',width:80px">Item ID</th>会报js错误的，导致整个页面显示不出来。如下
报错内容：
return {field:'itemid',width:80px} |
最后下面我们看看效果图：
作者：Tyler Ning
出处：http://www.cnblogs.com/tylerdonet/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，如有问题，可以通过以下邮箱地址williamningdong@gmail.com 联系我，非常感谢。
![EasyUI-DataGrid控件[表格+日历]应用](https://ucc.alicdn.com/pic/developer-ecology/cb1b36e8855642b5bcc71862cfcac533.png?x-oss-process=image/resize,h_160,m_lfit)
