Categories: jQuery EasyUI 教程

jQuery EasyUI 数据网格 – 添加复选框

jQuery EasyUI 数据网格 – 添加复选框

本节将介绍jQuery EasyUI数据网格中复选框的添加。

下述的实例演示如何放置一个复选框列到数据网格(DataGrid)。通过复选框,用户将可以选择“选中/取消选中”网格行数据。

为了添加一个复选框列,我们仅仅需要添加一个列的checkbox属性,并设置它为true。代码如下所示:

 <table id="tt" title="Checkbox Select" class="easyui-datagrid" style="" url="data/datagrid_data.json"    idField="itemid" pagination="true" iconCls="icon-save">
  <thead>
   <tr>
    <th field="ck" checkbox="true"></th>
    <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="100">Attribute</th>
    <th field="status" width="60" align="center">Status</th>
   </tr>
  </thead>
 </table>

以上代码添加了一个带有checkbox属性的列,所以它将成为复选框列。如果idField属性已设置,数据网格(DataGrid)的选择集合将在不同的页面保持。

下载 jQuery EasyUI 实例

jeasyui-datagrid-datagrid10.zip

admin

这个人很懒,什么都没有留下~

Share
Published by
admin

Recent Posts

聊聊vue3中的defineProps

在Vue 3中,defineP…

6 天 ago

在 Chrome 中删除、允许和管理 Cookie

您可以选择删除现有 Cooki…

1 周 ago

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

2 周 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

3 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

4 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

4 周 ago