运用easyUI 创建复杂的toolbar到datagrid

使用easyUI 创建复杂的toolbar到datagrid

@author YHC

datagrid 的toolbar能包含的不仅仅只是按钮(button)也可以是其他的任何的组件,你可以简单的定义一个toolbar布局通过一个已存在的DIV 标记它将成为

datagrid 的toolbar内容,这个教程将向你展示如何为datagrid创建复杂的toolbar.

创建Toolbar

<table class="easyui-datagrid" style="width:600px;height:250px"          url="data/datagrid_data.json"           title="DataGrid - Complex Toolbar" toolbar="#tb"          singleSelect="true" fitColumns="true">      <thead>          <tr>              <th field="itemid" width="60">Item ID</th>              <th field="productid" width="80">Product ID</th>              <th field="listprice" align="right" width="70">List Price</th>              <th field="unitcost" align="right" width="70">Unit Cost</th>              <th field="attr1" width="200">Address</th>              <th field="status" width="50">Status</th>          </tr>      </thead>  </table>  

正如你所见到的,datagrid 的toolbar的定义和dialog的定义很相似,我们不需要写任何的javascript 代码就可以创建datagrid 复杂toolbar.

下载 EasyUI 示例代码:easyui-datagrid-demo.zip