您的位置:首页 > 产品设计 > UI/UE

easyui datagrid 表格内改变数据,改变其他单元格数据

2018-03-05 11:26 507 查看
也不全算是原创,看了网上不少资料
最近客户需要录入数据的时候按照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<products.length; 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<products.length; 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 = '<a href="#" onclick="saverow(this)">Save</a> ';
var c = '<a href="#" onclick="cancelrow(this)">Cancel</a>';
return s+c;
} else {
var e = '<a href="#" onclick="editrow(this)">Edit</a> ';
var d = '<a href="#" onclick="deleterow(this)">Delete</a>';
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<bb.length;a++){
// console.log(bb[a].demoName);
// }
}

function query(){
var bb = $("#demowells").datagrid("getRows");
console.log(bb);
for(var a =0;a<bb.length;a++){
console.log(bb[a].demoName);
}
}

function changeSomeValue(rowIndex, rowData){
console.log("ccc");
var rowdata2 = $("#demowells").datagrid("getEditors",editIndex);
console.log(rowdata2);
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: