保存到桌面加入收藏设为首页
EasyUI
当前位置:首页 > Web技术 > EasyUI

easyui向DataGrid数据表格添加toolbar工具栏

时间:2013-07-26 01:56:08   作者:梦幻小纯哥   来源:永硕E盘装饰网   阅读:1212   评论:0
内容摘要:AddatoolbartoDataGridDataGrid数据表格添加toolbar工具栏Thisexampleshowhowtoaddatoolbartodatagrid.这个例子展示如何向datagrid数据表格添加工具栏。toolbar工具栏的效果如下:CreateData...

 

Add a toolbarto DataGrid

DataGrid数据表格添加toolbar工具栏

 

This example show how to add a toolbar to datagrid.

这个例子展示如何向datagrid数据表格添加工具栏。

 

toolbar工具栏的效果如下:

easyui向DataGrid数据表格添加toolbar工具栏

 

 

Create DataGrid

创建数据表格DataGrid

 

<table id="tt" class="easyui-datagrid" style="width:600px;height:250px"

              url="data/datagrid_data.json"

              title="DataGrid with Toolbar" iconCls="icon-save"

              toolbar="#tb">

 

       <thead>

              <tr>

                     <th field="itemid" width="80">Item ID</th>

                     <th field="productid" width="80">Product ID</th>

                     <th field="listprice" width="80" align="right">List Price</th>

                     <th field="unitcost" width="80" align="right">Unit Cost</th>

                     <th field="attr1" width="150">Attribute</th>

                     <th field="status" width="60" align="center">Stauts</th>

              </tr>

       </thead>

 

</table>

 

<div id="tb">

 

       <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"

       onclick="javascript:alert('Add')">Add</a>

 

       <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true"

       onclick="javascript:alert('Cut')">Cut</a>

 

       <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true"

       onclick="javascript:alert('Save')">Save</a>

 

</div>

 

 

We don't need to write any javascript code, attach a toolbar to the datagrid via 'toolbar' attribute.

我们不需要写任何javascript代码,通过“toolbar”属性给datagrid附上一个工具栏。

 

 



相关评论