3:对于单元格的编辑

$('#Units').datagrid({
pageNumber: 1,
//url: "@ViewBag.Domain/Paper/GetQuestionUnit",
columns: [[
{ field: 'Id', title: 'id', width: 100, editor: 'text' },
{ field: 'Name', title: 'name', width: 100, editor: 'text' }
]],
pagination: false,
rownumbers: true,
onClickCell: onClickCell
});

editor 也可以是一个类型,如下:

{field:'projectID',
title:'Project/Paid Leave',
width:100,
editor:{
type:'combobox',
options:{
valueField:'id',
textField:'DescriptionCode',
data:cmbprojects,
required:true,
editable:false,
onSelect:function(record){
}
}
}

默认的,EasyUI 对于编辑,是以行为单位的,也就是说,你要触发编辑,首先触发的是整行的编辑,类似如下:

$('#Units').datagrid('beginEdit', index);

上面的代码的意思是,第 index 行,可以编辑。如果要编辑单元格,一般我们用于单击某单元格,某行就可以编辑,则代码如下:

function onClickCell(index, field) {
$('#Units').datagrid('beginEdit', index);
var ed = $('#questionUnits').datagrid('getEditor', { index: index, field: field });
$(ed.target).val("dddd");
$('#Units').datagrid('endEdit', index);
}

在上面的方法中,第二行表示得到当前的 editor,注意,getEditor 方法必须要在 beginEdit 之后,否则,我们得到的 ed 为 null。当得到了 editor ,就可以为其赋值,如果你不想在界面中输入的话。endEdit 方法关闭行的可编辑状态,并且表示 datagrid 接收了值的修改,这个时候,我们如果查看 $('#questionUnits').datagrid('getRows'),得到的就是修改过后的值。

如果在 onClickCell 中不 endEdit,还可以在外部批量接受修改的值,使用方法:

$('#Units').datagrid('acceptChanges');

3.1 如何启动对指定单元格的修改

上面也说了,beginEdit 启动的是对行的修改,如果对行中的某个单元格启动修改,而其它单元格根本不启动修改,其中一个办法是:

$(ed.target).attr("disabled", true);

3.2 如何让 Row 获取 Editor 的额外属性

除非扩展一个自己的 Eidtor,否则 Editor 只有两个属性:type,options。但是,另外一种思路是,获取 Columns 的 Options 来达到此目的。比如,定义 Editor 为:

editor: { type: 'numberbox', options: { "UnitTemplateCode": item.Id } }

然后,得到 col,如下:

var fields = $('#UnitScores').datagrid('getColumnFields');

var col = $('#UnitScores').datagrid('getColumnOption', fields[i]);

然后,通过如下代码,就可以得到额外的属性 UnitTemplateCode。

col.editor.options.UnitTemplateCode

3.3 此 Editor 非彼 Editor

var ed = $('#Units').datagrid('getEditor', { index: index, field: field });

我们也得到了一个 Editor,即:ed,它是一个在 EasyUI 框架内定义的对象,跟我们通过 col.editor 得到的对象不是同一个对象。

3.4 单元格合计值

$(function () {
var lastIndex;
$('#tt').datagrid({
url: 'webjson.ashx',
title: 'Load Data ',
iconCls: 'icon-save',
singleSelect: true,
loadMsg: '数据加载中请稍后……',
width: 600,
height: 300,
columns: [[
{ field: 'itemid', title: 'Item ID', width: 80 },
{ field: 'productid', title: 'Product ID', width: 100 },
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: "numberbox" }, //增加可编辑
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: "numberbox" },//增加可编辑
{ field: 'attr1', title: 'Attribute', width: 150, editor: "text" },//这里虽为编辑类型,但是已经修改源码,成为不可以状态
{ field: 'status', title: 'Status', width: 60, align: 'center' }
]],
pageSize: 5,
pageList:[5,10,20,30],
pagination: true,
rownumbers: true ,
onClickRow: function (rowIndex) {
if (lastIndex != rowIndex) {
$('#tt').datagrid('endEdit', lastIndex);
$('#tt').datagrid('beginEdit', rowIndex);
setEditing(rowIndex);
}
lastIndex = rowIndex;
} });
});

//具体实现方法

      function setEditing(tablename,rowIndex) {
var editors = $('#tt').datagrid('getEditors', rowIndex);
var priceEditor = editors[0];
var amountEditor = editors[1];
var sumcount = editors[2];
priceEditor.target.bind('change', function () {
// calculate();
var sum = priceEditor.target.val() * amountEditor.target.val();
alert(sum);
sumcount.attr1.val(sum); });
amountEditor.target.bind('change', function () {
var sum = priceEditor.target.val() + amountEditor.target.val();
alert(sum); }); }

原文地址:http://www.tuicool.com/articles/UZZJr2

EasyUI Datagrid 单元格编辑的更多相关文章

  1. easyui datagrid 单元格编辑(cell editing)

    demo中有row editing 项目中发现个cell editing,但是有bug,修改好了 主要实现功能:单击数据表格单元格,编辑单元格数据 js代码如下: $.extend($.fn.data ...

  2. easyui datagrid 单元格编辑 即见即所得,MVC菜单维护,扫描增加

    效果如图: 参见 EasyUI 官方 Demo 及文档 @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Lay ...

  3. easyui datagrid 单元格 编辑时 事件 修改另一单元格

    //datagrid 列数据 $('#acc').datagrid({ columns : [ [ { field : 'fee_lend', title : '收费A', width : 100, ...

  4. easyui datagrid 单元格编辑 自动聚焦 、全选

    $.extend($.fn.datagrid.methods, { editCell: function (jq, param) { return jq.each(function () { var ...

  5. EasyUI datagrid单元格文本超出显示省略号,鼠标移动到单元格显示文本

    nowrap : true;  是前提 $('#×××').datagrid({ nowrap : true,//设置为true,当数据长度超出列宽时将会自动截取 }); 省略号样式: <sty ...

  6. easyui datagrid单元格实现溢出文本显示省略号的效果。

    Css .datagrid-btable .datagrid-cell{padding:6px 4px;overflow: hidden;text-overflow:ellipsis;white-sp ...

  7. easyui datagrid 单元格加进度条(亲测可用)

    {field: 'DataItemNum', title: '数据完整度', width: 100, formatter: function (v, r, i) { var p = (v / 27) ...

  8. Datagrid扩展方法InitEditGrid{支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

  9. Datagrid扩展方法onClickCell{easyui-datagrid-扩充-支持单元格编辑}

    //-----------------------------------------------------------------/******************************** ...

随机推荐

  1. iphone 8 plus 红色特别版,突然自动关机无法启动

    今天早上我的iphone 8p 突然自己在床上闪动开机图标,闪了半个多小时它就光荣的自动关机了,我尝试了长按开机键,长按home+开机键15秒,通通木有用,它就是没!反!应! 于是找了售后,学到了正确 ...

  2. 爬虫:Scrapy7 - Scrapy终端(Scrapy shell)

    Scrapy 终端是一个交互终端,可以在未启动 spider 的情况下尝试及调试你的爬取代码.其本意是用来测试提取数据的代码,不过可以将其作为正常的 Python 终端,在上面测试任何 Python ...

  3. Spring 学习笔记(二)—— IOC 容器(BeanFactory)

    使用Spring IoC容器后,容器会自动对被管理对象进行初始化并完成对象之间的依赖关系的维护,在被管理对象中无须调用Spring的API. 为了实现IoC功能,Spring提供了两个访问接口: or ...

  4. HS 光流法详解

    前言 本文较为详细地介绍了一种经典的光流法 - HS 光流法. 光流法简介 当人的眼睛与被观察物体发生相对运动时,物体的影像在视网膜平面上形成一系列连续变化的图像,这一系列变化的图像信息不断 &quo ...

  5. 获取JNDI数据源

    1 在容器中配置数据源 Tomcat <?xml version="1.0" encoding="UTF-8"?> <Context> ...

  6. 转:CentOS 6.5 nginx

    CentOS 6.5安装及简单配置Nginx 一.准备事项 (1) 因为nginx需要访问80端口所以请先关闭或者开放防火墙端口,和selinux. 参考命令 关闭防火墙: [root@local ~ ...

  7. this bind apply call

    this 是当前函数运行时所属的对象bind 是指定一个函数运行时的上下文,也就是说把这个函数的this指向绑定到相应对象上,默认的暴露在全局御中的函数this指向widow对象, 严格模式下全局的t ...

  8. 洛谷 P2715 约数和

    给出a和b求a^b的约数和. 题目描述 输入输出格式 输入格式: 一行两个数a,b. 输出格式: 一个数表示结果对 9901 的模. 输入输出样例 输入样例#1: 2 3 输出样例#1: 15 说明 ...

  9. jquery offset tip

    /* * 这是一张 JavaScript 代码草稿纸. * * 输入一些 JavaScript,然后可点击右键或从“执行”菜单中选择: * 1. 运行 对选中的文本求值(eval) (Ctrl+R): ...

  10. It运维项目整理

    String.prototype.toWeek=function(){ var date = new Date(this); var week = ""; switch (date ...