Extjs grid 单元格编辑

实现grid勾选后出现编辑按钮,通过增加一个字段checked来控制

事件如下:

selectionchange: function (thi, selected, eOpts) {
for (var i = 0; i < selected.length; i++) {
if (selected[i].data["checked"] != true) {
selected[i].beginEdit();
selected[i].set("checked", true);
selected[i].endEdit();
}
};
},
deselect: function (row, record, index, eOpts) {
record.beginEdit();
record.set("checked", false);
record.endEdit();
},

grid中如下:

{
header: " ",//BlockingReason button
dataIndex: " ",
tooltip: " ",
width: 30,
renderer: function (v, m, recod, rowindex, colindex) {
m.tdAttr = ‘style="background-color: #CCFFCC;"‘;
//console.log(v, m, recod, rowindex, colindex);
if (recod.data.checked == true) {//
return "<img src=‘Scripts/Ext/resources/images/icons/add.png‘ style=‘float: right;‘/>";
}
else {
return v;
}
;
},
listeners: {
click: function (view, td, rowIndex, cellIndex, e, record, tr, eOpts) {
if (record.data["checked"] != true) {
return;
};
var win = Ext.create("Scripts.Code.MDM.Quality.DefectCause.DefectCauseCorp.view.ImputationWindow", {
myfrom: ‘A‘,
record: record // 传到弹出窗
});
win.show();
var hidegroup = record.data["IMPUT_RSN_CODE"];
var grid = win.down(‘grid‘);
var store = grid.getStore();
store.load();
store.on(‘load‘, function () {
var record = store.findRecord(‘COMM_CODE_NM‘, ‘ ‘);
if (record != null) {
store.remove(record);
};
if ((hidegroup != null) && (hidegroup != "")) {
hidegroup = hidegroup.replace(/‘/g, "");
var code = hidegroup.split(‘,‘);
var allrecords = grid.getStore().getRange(0, grid.getStore().getCount() - 1);
var arr = [];
for (var a = 0; a < allrecords.length; a++) {
for (var b = 0; b < code.length; b++) {
if (allrecords[a].data.COMM_CODE_NM == code[b]) {
arr.push(allrecords[a]);
}
}
}
grid.getSelectionModel().select(arr);//弹出窗中选中记录
};
});
}
}
},

弹出窗保存数据到 grid中,

Imputationclick: function (btn) {
var win = btn.up("window");
var grid = win.down("grid");
var arr_code = [];
var arr_name = [];
var records = grid.getSelectionModel().getSelection();
for (var i = 0; i < records.length; i++) {
arr_code.push(records[i].data.COMM_CODE);
arr_name.push(records[i].data.COMM_CODE_NM);
};
var currentRecord = win.record;
//currentRecord.set("CTRNT_FB_RSN_CONT", arr_code.toString());//???
currentRecord.set("IMPUT_RSN_CODE", arr_name.toString());//修改grid中的数据
win.close();
},

其他配置

loadMask: false,
selModel: {
injectCheckbox: 0,
mode: "MULTI", //"SINGLE"/"SIMPLE"/"MULTI"
checkOnly: true //只能通过checkbox选择
},
viewConfig: {
loadMask: false,
columnLines: true,
autoScroll: true,
enableTextSelection: true
},
selType: ‘checkboxmodel‘,

时间: 2024-10-29 19:10:39

Extjs grid 单元格编辑的相关文章

ExtJs表格控件(三)----单元格编辑与提交修改

ExtJs的EditorGrid控件提供了动态修改某个单元格的方法,首先如果要使用编辑插件,首先必须要在需要的列上添加editor属性,只有添加了editor属性的列才可以被编辑,否则无法编辑.同时我们可以在editor中添加一些限制或者约束条件,例如禁止编辑的单元格为空,首先在定义列的时候使用如下方法定义: var columns = [{ header : '第一列', dataIndex : 'first', renderer:datarender, editor:{ allowBlank

ExtJs4学习(十)Grid单元格换色和行换色的方法

Grid单元格换色 { text:'类别', dataIndex:'type', align:'center', renderer:function(value,metaData){ console.log(metaData); if(value==0){ metaData.css='x-grid-record-gray'; return "<span style='color:#FFF;font-weight:bold;'>注销系统</span>"; }els

ExtJS4.2 Grid知识点三:改变表格Grid单元格背景颜色

在ExtJS4.2 Grid知识点一:改变表格Grid单元格文字颜色一文中讲解了如何改变单元格中文字颜色,接下来在本章学习如何改变Grid中单元格的背景颜色,显示结果如图片: 在线演示  /  示例代码 实现方式同样是为Grid中该列自定义renderer函数,查询ExtJS 4.2 API得知,Ext.grid.column.Column的renderer属性可以是一个函数也可以是字符串,这个知识点是通过函数来实现的.函数参数列表如下: value : 当前待渲染的单元格值,即表格中某行某列的

jqGrid单元格编辑详解

单元格编辑 单元格编辑提供给用户修改一行中的单个单元格内容的功能,开发者可以通过ajax或者单元格编辑事件对修改的数据进行处理. 通过下面的行为,单元格编辑支持键盘导航和执行单元格编辑操作 点击一个不可编辑的单元格会选中它,然后可以通过上下左右键移动到其他单元格 当移动到一个可编辑的单元格,可以按下Enter键将单元格切换到编辑模式.当再次按下Enter键,或者tab,点击其他单元格将会执行保存操作.按下Esc键取消编辑并且恢复为之前的值.当编辑一个单元格时,光标键始终在此单元格内. 点击可编辑

MFC List Control控件添加单元格编辑和单元格下拉列表项以适用于数据库相关操作

作为现代的软件,往往是连着数据库的,而连着和用户方便地操作之间,还有着界面这道坎.MFC是Windows上比较好开发用户界面的框架,然而其自带的控件中没有对于数据库表格支持较好的控件,而使用网上提到的 DataGrid 等控件在本人的win8.1+VS2013平台上老出现找不到控件或者头文件的问题,搞的烦死人.最后想到 List Control 控件只要稍作修改,加上单元格编辑和单元格下拉列表,其实就能和数据库进行良好的对接,一百度,果然有人已经做了这件事,实在是太让人感动了!       

[DevExpress]GridControl单元格编辑验证

关键代码: /// <summary> /// 自定义单元格验证 /// </summary> /// <param name="view">GridView</param> /// <param name="e">BaseContainerValidateEditorEventArgs</param> /// <param name="fieldNameHandler"

C# Excel 单元格编辑

public class ExcelReport    {  //Excel 文件修改要引用COM组件Microsoft Excel 11.0 Object Library  //using Microsoft.Office.Interop.Excel;  /// <summary>        /// 单元格修改        /// </summary>        /// <param name="filePath">excel路径<

GridControl单元格编辑验证的方法

本文实例演示了DevExpress实现GridControl单元格编辑验证的方法,比较实用的功能,具体方法如下: 主要功能代码如下: /// <summary> /// 自定义单元格验证 /// </summary> /// <param name="view">GridView</param> /// <param name="e">BaseContainerValidateEditorEventArgs

JQgrid实现全表单元格编辑

1 jQuery("#baseWageDataValueGrid").jqGrid('setGridParam',{'cellEdit':true}); 2 3 //修改所有td tabindex 4 var tdList = $('#baseWageDataValueGrid').find('td'); 5 if(!!tdList && tdList.length>0){ 6 $.each(tdList,function(i,o) { 7 $(o).attr('