easyuidatagrid表格内改变数据，改变其他单元格数据教程
也不全算是原创，看了网上不少资料
最近客户需要录入数据的时候按照excel中的方式，整体录入完毕后保存，
是用easyuidatagrid的时候遇到问题，
1)在进入datagrid的编辑状态后，使用普通的例如var rowdata = $("#demowells").datagrid("selectRow",editIndex);
是不管用的，只有在onBeginEdit:function()中使用是有用的
2)新增一行
$('#demowells').datagrid('insertRow', {
index: index,
row:{
// status:'P'
}
});
3)如果让datagrid的某行可以编辑需要
$('#demowells').datagrid('beginEdit',index);
4)新增一行可编辑的行，需要新增一行，选中一行，可编辑一行
function insert(){
var flag = endEditing();
if(!endEditing())return;
var row = $('#demowells').datagrid('getSelected');
if (row){
var index = $('#demowells').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#demowells').datagrid('insertRow', {
index: index,
row:{
// status:'P'
}
});
$('#demowells').datagrid('selectRow',index);
$('#demowells').datagrid('beginEdit',index);
editIndex = index;
}
5)在可编辑状态下，onClickRow? ，onClickCell是不会触发的
6)让某行的某列可编辑需要，在字段中加editor:属性
{field:'demoId',title:'demoId',width:100,editor:'textbox'},
7)需要触发某行的某列编辑后，触发该行的其他列数据改变，需要在onBeginEdit中使用
var rowdata2 = $("#demowells").datagrid("getEditors",rowIndex);
rowdata2[index]获取可编辑单元格
var products = [
{productid:'FI-SW-01',name:'Koi'},
{productid:'K9-DL-01',name:'Dalmation'},
{productid:'RP-SN-01',name:'Rattlesnake'},
{productid:'RP-LI-02',name:'Iguana'},
{productid:'FL-DSH-01',name:'Manx'},
{productid:'FL-DLH-02',name:'Persian'},
{productid:'AV-CB-01',name:'Amazon Parrot'}
];
8)触发行内combobox的onSelect事件，不能使用普通的onSelelct方法，而需要在onBeginEdit中使用
9)建议不要有多行可编辑，只有一行可编辑
var editormodel = rowdata2[4];
editorProduct.target.combobox({
onSelect:function(obj){
editorOther.target.textbox('setValue',obj.name);
editormodel.target.combobox('setValue',obj.productid);
}
});
$(function(){
? $("#demowells").datagrid({
? title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'demoId',
columns:[[? ??
{field:'demoId',title:'demoId',width:100,editor:'text'},
? ? ? ? {field:'demoName',title:'demoName',width:100,editor:'text'},? ??
? ? ? ? {field:'productid',title:'product',width:100,editor:'text',
? ? ? ? formatter:function(value){
for(var i=0; i if (products[i].productid == value) return products[i].name;
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:products,
required:true
}
}
? ? ? ? },? ??
? ? ? ? {field:'demoOther',title:'demoOther',width:100,align:'right',editor:'textbox'},
? ? ? ? {field:'modelid',title:'model',width:100,editor:'text',
? ? ? ? formatter:function(value){
for(var i=0; i if (products[i].productid == value) return products[i].name;
}
return value;
},
editor:{
type:'combobox',
options:{
valueField:'productid',
textField:'name',
data:products,
required:true
}
}
? ? ? ? },
? ? ? ? {field:'action',title:'Action',width:80,align:'center',
formatter:function(value,row,index){
console.log(row);
console.log(index);
if (row.editing){
var s = 'Save ';
var c = 'Cancel';
return s+c;
} else {
var e = 'Edit ';
var d = 'Delete';
return e+d;
}
}
}? ?
? ? ]],
? ? onBeforeEdit:function(index,row){
row.editing = true;
updateActions(index);
},
onAfterEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onCancelEdit:function(index,row){
row.editing = false;
updateActions(index);
},
onClickRow:function(rowIndex, rowData){
// console.log("onClickRow index = "+rowIndex);
},
onClickCell:function(rowIndex, field, value){
console.log("onClickCell index = "+rowIndex);
},
onBeginEdit : function(rowIndex, rowData){
console.log("onBeginEdit");
var rowdata2 = $("#demowells").datagrid("getEditors",rowIndex);
console.log(rowdata2);
var editorProduct = rowdata2[2];
var editorOther = rowdata2[3];
var editormodel = rowdata2[4];
editorProduct.target.combobox({
onSelect:function(obj){
editorOther.target.textbox('setValue',obj.name);
editormodel.target.combobox('setValue',obj.productid);
}
});
}
? });
});
var editIndex = -1;
function endEditing(){
if (editIndex == -1){
return true;
}else{
return false;
}
? ? if ($('#demowells').datagrid('validateRow', editIndex)){
? ? editIndex = -1;
? ? return true;
? ? } else {
? ? return false;
? ? }
}
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
$('#demowells').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target){
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#demowells').datagrid('deleteRow', getRowIndex(target));
editIndex = -1;
}
});
}
function saverow(target){
$('#demowells').datagrid('endEdit', getRowIndex(target));
editIndex = -1;
}
function cancelrow(target){
$('#demowells').datagrid('cancelEdit', getRowIndex(target));
editIndex = -1;
}
function updateActions(index){
$('#demowells').datagrid('updateRow',{
index: index,
row:{}
});
}
function insert(){
var flag = endEditing();
if(!endEditing())return;
var row = $('#demowells').datagrid('getSelected');
if (row){
var index = $('#demowells').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#demowells').datagrid('insertRow', {
index: index,
row:{
// status:'P'
}
});
$('#demowells').datagrid('selectRow',index);
$('#demowells').datagrid('beginEdit',index);
editIndex = index;
}
function changeProductId(obj){
console.log("changeProductId");
console.log(obj);
// var rowdata = $("#demowells").datagrid("selectRow",editIndex);
// console.log(rowdata);
// console.log(rowdata["demoName"]);
// console.log(rowdata.demoName);
// var rowdata2 = $("#demowells").datagrid("getEditors",editIndex);
// console.log(rowdata);
// $("#demowells").datagrid("getRows")[editIndex]["demoOther"] = "aaa";
// $("#demowells").datagrid("getRows")[editIndex].textbox('setValue',"aaa");
// console.log("bbb");
// var bb = $("#demowells").datagrid("getRows");
// console.log(bb);
// for(var a =0;a// console.log(bb[a].demoName);
// }
}
function query(){
var bb = $("#demowells").datagrid("getRows");
console.log(bb);
for(var a =0;a console.log(bb[a].demoName);
}
}
function changeSomeValue(rowIndex, rowData){
console.log("ccc");
var rowdata2 = $("#demowells").datagrid("getEditors",editIndex);
console.log(rowdata2);
}