easyui学习笔记7—在手风琴中显示表格

在这一篇中我们看看如何在手风琴里面显示表格数据的。

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错误的，导致整个页面显示不出来。如下

 

报错内容：

SyntaxError: identifier starts immediately after numeric literal
  
return {field:'itemid',width:80px}

 

最后下面我们看看效果图：

posted @ 2014-01-21 21:23  nd  阅读(2724)  评论(0)  编辑  收藏  举报