edatagrid扩展,仿kettle形式的表格实现
来源:互联网 发布:数据安全性保密性 编辑:程序博客网 时间:2024/06/10 19:23
edatagrid的api提供了增删改的方法,但并没有界面形式的例子。这里仿写了kettle表输出形式的可输入表格。
具体功能有:
1.点击最后一个空白行时新增一行,点击其他空白行时添加该行行号
2.点击勾时,取消本行编辑
3.点击x时,删除本行,同时之后的行号上移
代码如下:
//初始化表输出属性面板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 == ""){//查找当前页面显示的最大行号,未显示的行号默认为0var 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
- edatagrid扩展,仿kettle形式的表格实现
- edatagrid扩展,仿kettle形式的表格实现
- easyui的自动分页表格以及行编辑模式edatagrid
- 仿QuickOffice的Excel的表格实现
- nodejs+edatagrid读取本地excel表格
- Android实现表格形式管理
- 使用Kettle工具通过执行SQL脚本的形式来实现导入到MySQL数据库
- 应用ul、li实现表格形式
- 扩展jquery实现客户端表格的分页、排序
- kettle 里面的xul实现
- Kettle循环调用的实现
- Spring Boot 菜鸟教程 8 EasyUI edatagrid 扩展
- easyui中edatagrid 的正确用法
- easyui 中edatagrid 时间类型的修改
- 分析表格形式的实验数据
- 以表格的形式输出游标Cursor
- 开源ETL工具 Kettle(kettle 5.2.0)的使用之Hello World 扩展
- Android中GridView以表格形式显示多张图片(仿桌面)
- Java多线程-概念与原理
- Android 教程
- 超出父视图的子视图事件
- 服务器入门科普
- Oracle 查看正在运行的存储过程
- edatagrid扩展,仿kettle形式的表格实现
- test
- Oracle 导入指定表
- 重叠子问题(1506)
- 超简单的 listview的第三方控件PullToRefreshListView 上拉刷新,下拉加载更多,分页加载
- UITableViewCell 适应字符串高度
- Sqlplus下的set命令详解
- Android布局优化之Merge Include ViewStub使用与源码分析
- mongodb删除数据基本操作