jQuery EasyUI 数据网格 - 列运算

  在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列。一个运算列通常包含一些从一个或多个其他列运算的值。

  首先,创建一个可编辑的数据网格(datagrid)。这里我们创建了一些可编辑列,'listprice'、'amount' 和 'unitcost' 列定义为 numberbox 编辑类型。运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果。

  

  title="Editable DataGrid with Calculated Column" iconCls="icon-edit" singleSelect="true"

  idField="itemid" url="data/datagrid_data.json">

  

  

  

  

  

  

  

  

  

  

  

Item ID List Price Amount Unit Cost Attribute Status

  当用户点击一行的时候,我们开始一个编辑动作。

  var lastIndex;

  $('#tt').datagrid({

  onClickRow:function(rowIndex){

  if (lastIndex != rowIndex){

  $('#tt').datagrid('endEdit', lastIndex);

  $('#tt').datagrid('beginEdit', rowIndex);

  setEditing(rowIndex);

  }

  lastIndex = rowIndex;

  }

  });

  为了在一些列之间创建运算关系,我们应该得到当前的 editors,并绑定一些事件到它们上面。

  function setEditing(rowIndex){

  var editors = $('#tt').datagrid('getEditors', rowIndex);

  var priceEditor = editors[0];

  var amountEditor = editors[1];

  var costEditor = editors[2];

  priceEditor.target.bind('change', function(){

  calculate();

  });

  amountEditor.target.bind('change', function(){

  calculate();

  });

  function calculate(){

  var cost = priceEditor.target.val() * amountEditor.target.val();

  $(costEditor.target).numberbox('setValue',cost);

  }

  }

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid15.zip

  本文转载自:w3cschool

  (编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 列运算的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建自定义视图

    jQuery EasyUI 数据网格 - 创建自定义视图 在不同的情况下,您可能需要为数据网格(datagrid)运用更灵活的布局.对于用户来说,卡片视图(Card View)是个不错的选择.这个工具 ...

随机推荐

  1. eclipse maven项目下载jar包失败解决办法

    1.找到我们的本地maven仓库目录 我的是 H:\Java\maven\Repository 2.搜索出该目录下的*lastUpdated.properties文件并删除,如下图所示,可以通过模糊搜 ...

  2. da5_random模块

    import random #标准模块,用来取随机数 print(random.randint(1,100)) #随机取一个整数,顾头顾尾 print(random.uniform(1,900)) # ...

  3. 图->最短路径->单源最短路径(迪杰斯特拉算法Dijkstra)

    文字描述 引言:如下图一个交通系统,从A城到B城,有些旅客可能关心途中中转次数最少的路线,有些旅客更关心的是节省交通费用,而对于司机,里程和速度则是更感兴趣的信息.上面这些问题,都可以转化为求图中,两 ...

  4. HTML链接式引入CSS和JS

    <!-调用CSS-> <link href="./XXXXX.css" rel="stylesheet" type="text/cs ...

  5. HTTP状态码简单总结

    状态码数字的第一位表明了响应类别,如以下5种:     类别 原因短语 1XX Informational(信息性状态码) 接受的请求正在处理 2XX Success(成功状态码) 请求正常处理完毕 ...

  6. 如何知道网页浏览器cookie是什么?

    一直有网友问网页cookie如何获取,其实想知道自己访问网页时的cookie没那么难,用Chrome内核浏览器的debug功能就能看到,怎么查看呢?随ytkah一起来看看吧! 打开网页,按F12键,选 ...

  7. 2018-2019-2 20175313 实验一《Java开发环境的熟悉》实验报告

    一.实验内容及步骤 使用JDK编译.运行简单的Java程序 cd code进入code文件夹 mkdir 20175313创建20175313文件夹 ls查看当前目录 cd 20175313,mkdi ...

  8. 012-docker-安装-fabric:1.4

    一.准备工作 linux 版本.docker.docker-compose go安装且版本较新 uname -a docker --version docker-compose --version g ...

  9. Cocos Creator的类别

    cc是命名空间:cocos creater引擎下的类得加cc; 如cc.Node cc.v2; 1).cc.Component组件类onLoadstartupdatelateUpdateonDestr ...

  10. CentOS 7 配置Tomcat9连接MySQL

    配置Tomcat 首先安装Tomcat 安装Tomcat分为安装Tomcat和安装JDK两个步骤 JDK( Java Development Kit ) 是Sun Microsystems针对Java ...