博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
EasyUI Datagrid 单元格编辑
阅读量:5357 次
发布时间:2019-06-15

本文共 4375 字,大约阅读时间需要 14 分钟。

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);            });        }

 

 

 

原文地址:

转载于:https://www.cnblogs.com/kszit/p/3623289.html

你可能感兴趣的文章
组合数据类型练习,英文词频统计实例上
查看>>
Uber回馈开源的一些软件
查看>>
day 3 修改haproxy.cfg 作业
查看>>
UIScrollView —— 缩放实现案例(二)
查看>>
【Qt】Qt Linguist介绍【转】
查看>>
sim usim Uim 区别
查看>>
网页中插入透明Flash的方法和技巧
查看>>
动态内存申请函数选择(realloc、malloc 、alloca、 calloc)
查看>>
获取元素属性get_attribute
查看>>
视觉设计师的进化
查看>>
Python/jquery
查看>>
【BZOJ】【2132】圈地计划
查看>>
Lua 语言基本语法
查看>>
ARM 的Thumb状态测试
查看>>
windows下读取utf-8文件
查看>>
apache 启动不了的排查方法
查看>>
Java有没有goto?
查看>>
(转)makefile 的用法
查看>>
求不相邻金币相加和的最大值--动态规划1
查看>>
[转][osg]探索未知种族之osg类生物【目录】
查看>>