当前位置： 移动技术网 > IT编程>网页制作>CSS > easyuidatagrid表格内改变数据，改变其他单元格数据教程

easyuidatagrid表格内改变数据，改变其他单元格数据教程

2018年03月05日  | 移动技术网IT编程  | 我要评论

也不全算是原创，看了网上不少资料

最近客户需要录入数据的时候按照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);

}

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网