easy-ui edatagrid 可编辑表格学习分享

---

最近遇到的一个需求 要在JSP页面里input输入框和下拉框里面加个表格 可以直接在里面编辑

最开始搜索easyui的grid表格 找到了 Property grid

这个gird只能一个name 一个value 不够用

然后找到了edatagrid

查了下论坛的教程跟官方文档
HTML代码大概就是

<table id="tt" style="width:600px;height:200px"
		title="Editable DataGrid"
		singleSelect="true">
	<thead>
		<tr>
			<th field="itemid" width="100" editor="{type:'validatebox',options:{required:true}}">Item ID</th>
			<th field="productid" width="100" editor="text">Product ID</th>
			<th field="listprice" width="100" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
			<th field="unitcost" width="100" align="right" editor="numberbox">Unit Cost</th>
			<th field="attr1" width="150" editor="text">Attribute</th>
		</tr>
	</thead>
</table>

JS代码：

$('#tt').edatagrid({
	url: 'datagrid_data.json',
	saveUrl: ...,
	updateUrl: ...,
	destroyUrl: ...
});

但是写好后页面报错 edatagrid not a function…

下载扩展包 引入里面的JS文件后就可以正常显示了
然后$(’#tt’).edatagrid这个方法里的url 一定得写上去 后面引json文件也行，写后台接口也行 但是我这个新增页面不需要查数据 所以得写个‘’ 要是没有url:’ ’ 也会无法初始化出表格
表格上可以自己加toolbar
各种方法比如新增一行删除一行 刚才引的js里也全有 也可以按需要自己去小改一下

$('#tt').edatagrid("addRow");
$('#tt').edatagrid("destroyRow");
调这个删除方法还会弹个英文询问是否删除的提示框，我直接去JS里把那一段注掉了
if (!rows.length){
					$.messager.show({
						title: opts.destroyMsg.norecord.title,
						msg: opts.destroyMsg.norecord.msg
					});
					return;
				}
				
				$.messager.confirm(opts.destroyMsg.confirm.title,opts.destroyMsg.confirm.msg,function(r){
					if (r){
						for(var i=0; i<rows.length; i++){
							_del(rows[i]);
						}
						dg.datagrid('clearSelections');
					}
				});

不过因为页面上不光有这个table还有其他input框之类的，而且也没建子表，提交的时候就得把这个表的数据对象转成JSON赋值给from表单里的一个对应字段 所以上面saveUrl的保存功能就不适合这里用，这里就自己手动去取 倒也方便

$('#tt').edatagrid("getRows")
但是这个edatagrid编辑每一行时很蛋疼
最新一行的数据 用getrows方法永远获取不到

在最开初始化地方加上autosave:true才能把最新一行的值也存进去
但是这个自动保存生效一定得这个table每一个tr失焦后才能有效
在论坛里找到个给每一个输入框加blur事件的栗子

function fn_gridBindBlur(grig, index, field){
        var ed = grig.datagrid("getEditor", {index: index, field: field});// 获取编辑器
        if(ed){
          // 编辑器存在，绑定blur事件，结束编辑模式
          $(ed.target).bind("blur", function(e){
             var temp= $('#table').edatagrid("getRows")
             console.log(JSON.stringify(temp))
          });
        }
        return ed;
      }
      
      但是无奈找不到好的事件去调这个方法
      官方提供了  onadd afteredit等方法但是不太好用
       $('#table').edatagrid({
        onAdd: function(index,row){
        }
      });
      最后干脆在点击提交按钮后去获取table里的数据了
      这个edatagrid的失焦事件是真的弄不出来 各种地方都试过了 tr上 th上 div上