edatagrid扩展，仿kettle形式的表格实现

来源：互联网发布：台达plc编程实例47 编辑：程序博客网时间：2024/06/05 02:34

edatagrid的api提供了增删改的方法，但并没有界面形式的例子。这里仿写了kettle表输出形式的可输入表格。

具体功能有：

1.点击最后一个空白行时新增一行，点击其他空白行时添加该行行号

2.点击勾时，取消本行编辑

3.点击x时，删除本行，同时之后的行号上移

代码如下：

[javascript] view plain copy
 print?
//初始化表输出属性面板  
function init(){  
    $("#outputTableGrid").edatagrid({  
        data:{"rows":[  
                      {"rowIndex":1,"sourceValue":"", "targetValue":"", "value":"",operation:'<a href="#" onclick="saveRowData(1);" style="width:16px;height:16px;padding: 5px;"><img title="save" src="js/themes/icons/ok.png" ></img></a> <a href="#" onclick="deleteRowData(1);" style="width:16px;height:16px;padding: 5px;"><img  title="remove" src="js/themes/icons/cancel.png" ></img></a>'},  
                      {"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<rowNum-1;i++){  
                        if(rows[i].rowIndex > maxRowIndex){  
                            maxRowIndex = rows[i].rowIndex;  
                        }  
                    }  
                      
                    if(maxRowIndex < rowNum-1){  
                            //修改页面显示的最大行号的下一行  
                            $("#outputTableGrid").edatagrid("updateRow",{  
                                  index:maxRowIndex,  
                                  row:{  
                                      rowIndex:maxRowIndex+1,  
                                      sourceValue:"",  
                                      targetValue:"",  
                                      value:"",  
                                      operation:'<a href="#" onclick="saveRowData('+maxRowIndex+');" style="width:16px;height:16px;padding: 5px;"><img title="save" src="js/themes/icons/ok.png" ></img></a> '+  
                                          '<a href="#" onclick="deleteRowData('+maxRowIndex+');" style="width:16px;height:16px;padding: 5px;"><img  title="remove" src="js/themes/icons/cancel.png" ></img></a>'  
                                  }  
                              });  
                    }else if(maxRowIndex ==  rowNum-1){  
                            row.rowIndex = "";      //设置最后一行的行号为空  
                            $("#outputTableGrid").edatagrid("endEdit",index);  
                            $("#outputTableGrid").edatagrid("insertRow",{  
                                  index:index,  
                                  row: {  
                                      rowIndex:index+1,  
                                      sourceValue:"",  
                                      targetValue:"",  
                                      value:"",  
                                      operation:'<a href="#" onclick="saveRowData('+index+');" style="width:16px;height:16px;padding: 5px;"><img title="save" src="js/themes/icons/ok.png" ></img></a> '+  
                                      '<a href="#" onclick="deleteRowData('+index+');" style="width:16px;height:16px;padding: 5px;"><img  title="remove" src="js/themes/icons/cancel.png" ></img></a>'  
                                    }  
                             });  
                    }  
                }  
            }  
    });  
}  
  
//结束选中行的编辑  
function saveRowData(index){  
      $("#outputTableGrid").edatagrid("endEdit",index);  
}  
//删除选中的行  
function deleteRowData(index){  
    $("#outputTableGrid").edatagrid("deleteRow",index);  
    var data = $("#outputTableGrid").edatagrid("getData");  
    //遍历列表数据  
    for(var i=0;i<data.rows.length-1;i++){  
        //查找删除行之后的行数据  
        if(data.rows[i].rowIndex>index){  
            //修改删除行之后的行索引  
            data.rows[i].rowIndex = data.rows[i].rowIndex -1;  
            data.rows[i].operation = '<a href="#" onclick="saveRowData('+(data.rows[i].rowIndex-1)+');" style="width:16px;height:16px;padding: 5px;"><img title="save" src="js/themes/icons/ok.png" ></img></a> '+  
              '<a href="#" onclick="deleteRowData('+(data.rows[i].rowIndex-1)+');" style="width:16px;height:16px;padding: 5px;"><img  title="remove" src="js/themes/icons/cancel.png" ></img></a>';  
        }  
    }  
    //重新加载数据  
    $("#outputTableGrid").edatagrid("loadData",data);  
      
      
}  

实现时的注意事项：

a.只有点击最后一行时才添加行，点击其他空白行时只修改行号，这就要求最大的行号需要与行索引对应，行号-1=行索引。同时新增和修改需要以当前最大行号来决定。

b.不能使用formatter属性，因为该属性将和updateRow，deleteRow，insertRow等相冲突，将导致你调用这些方法时不生效。

c.注意onClickCell事件是优于行内的点击事件的，而浏览器默认事件是优于其他事件执行的。所以如果将onclick事件写到img中是不会触发的。<a>是浏览器默认事件会最先执行。

d.删除一行时需将其之后的行号上移一位，否则跟之前的逻辑冲突，达不到预期效果。

e.由于<a>标签事件最先执行所以必须传入行索引，否则删除或保存操作无法实现。

效果如下:

阅读全文

0 0