edatagrid的api提供了增删改的方法,但并没有界面形式的例子。这里仿写了kettle表输出形式的可输入表格。
具体功能有:
1.点击最后一个空白行时新增一行,点击其他空白行时添加该行行号
2.点击勾时,取消本行编辑
3.点击x时,删除本行,同时之后的行号上移
代码如下:
//初始化表输出属性面板
function init(){
$("#outputTableGrid").edatagrid({
data:{"rows":[
{"rowIndex":1,"sourceValue":"", "targetValue":"", "value":"",operation:' '},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""},
{"rowIndex":"","sourceValue":"", "targetValue":"", "value":"",operation:""}
]},
fit:true,
fitColumns:true,
singleSelect:true,
columns:[[
{field:'rowIndex',title:'#',width:10,align:'center'},
{field:'sourceValue',title:'源值',width:100,align:'center',editor:'text'},
{field:'targetValue',title:'目标值',width:100,align:'center',editor:'text'},
{field:'value',title:'',width:100,align:'center',editor:'text'},
{field:'operation',title:'',width:40,align:'center'}
]],
onClickRow:function(index,row){
var rows = $("#outputTableGrid").edatagrid("getRows");
var rowNum = rows.length;
if(row.rowIndex == ""){
//查找当前页面显示的最大行号,未显示的行号默认为0
var maxRowIndex = 0;
for(var i=0;i maxRowIndex){
maxRowIndex = rows[i].rowIndex;
}
}
if(maxRowIndex < rowNum-1){
//修改页面显示的最大行号的下一行
$("#outputTableGrid").edatagrid("updateRow",{
index:maxRowIndex,
row:{
rowIndex:maxRowIndex+1,
sourceValue:"",
targetValue:"",
value:"",
operation:' '+
''
}
});
}else if(maxRowIndex == rowNum-1){
row.rowIndex = ""; //设置最后一行的行号为空
$("#outputTableGrid").edatagrid("endEdit",index);
$("#outputTableGrid").edatagrid("insertRow",{
index:index,
row: {
rowIndex:index+1,
sourceValue:"",
targetValue:"",
value:"",
operation:' '+
''
}
});
}
}
}
});
}
//结束选中行的编辑
function saveRowData(index){
$("#outputTableGrid").edatagrid("endEdit",index);
}
//删除选中的行
function deleteRowData(index){
$("#outputTableGrid").edatagrid("deleteRow",index);
var data = $("#outputTableGrid").edatagrid("getData");
//遍历列表数据
for(var i=0;iindex){
//修改删除行之后的行索引
data.rows[i].rowIndex = data.rows[i].rowIndex -1;
data.rows[i].operation = ' '+
'';
}
}
//重新加载数据
$("#outputTableGrid").edatagrid("loadData",data);
}
a.只有点击最后一行时才添加行,点击其他空白行时只修改行号,这就要求最大的行号需要与行索引对应,行号-1=行索引。同时新增和修改需要以当前最大行号来决定。
b.不能使用formatter属性,因为该属性将和updateRow,deleteRow,insertRow等相冲突,将导致你调用这些方法时不生效。
c.注意onClickCell事件是优于行内的点击事件的,而浏览器默认事件是优于其他事件执行的。所以如果将onclick事件写到img中是不会触发的。是浏览器默认事件会最先执行。
d.删除一行时需将其之后的行号上移一位,否则跟之前的逻辑冲突,达不到预期效果。
e.由于标签事件最先执行所以必须传入行索引,否则删除或保存操作无法实现。
效果如下: